@benwilson512 Ok, let’s simplify it. Suppose you’re working on a Google Analytics clone…
Google Analytics is installed on a website by including a JS snippet on each page.
An example of such snippet is here:
<!-- Google Analytics -->
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-XXXXX-Y', 'auto');
ga('send', 'pageview');
</script>
<!-- End Google Analytics -->
Notice that the snippet loads asynchronously the actual Google Analytics JS lib: “https://www.google-analytics.com/analytics.js”
Now, once the lib is loaded it can track events on the website, for example pageview events, which are sent to the backend (our Phoenix app) for processing.
So we’ve got 3 parts here:
-
JS snippet
-
JS lib
-
backend (Phoenix app)
Now, how to share some Phoenix config with the JS lib (which is generated through Webpack pipeline)? Suppose both the analytics.js (JS lib) and the backend (Phoenix app) need to connect to some external API endpoint, which changes from time to time. A good idea is to put the API URL to a config file and share it between different modules of the system that use it, so that the configuration data is in one place only. This could be API endpoint URLs, cookie names, query string keys, dictionaries, etc.
I tried to put such config data to Phoenix config.exs and then interpolate it in lib.js.eex (which is an equivalent of the Google Analytics JS lib - analytics.js).