How to store environment-specific configuration used in Javascript code?

Where is your JavaScript code running? On the server or in the browser?

Setting an environment variable at the point you run your server would do nothing to transfer that environment variable to the browser. From searching for process.env on the internet it looks like it’s part of Node.js. So it would be available to a server-side component running in JavaScript, but it doesn’t really look relevant to client-side JavaScript in the browser.

The roughly equivalent call for Elixir on the server side is System.get_env. That let you should see your client ID as you’ve set it on your mix line. Transferring that securely to the browser would probably involve using HTTPS or some other encryption in a server to client transfer step (say an API call).

With webpack that would be accomplished with something like

• DefinePlugin
• EnvironmentPlugin
• dotenvPlugin

See also: Should I move from brunch to webpack? - #14 by peerreynders

I’m using Brunch and Babel (added by the framework).

I assume that “the framework” refers to Phoenix.

https://github.com/phoenixframework/phoenix/pull/2779

Description how to use webpack 4 (with Phoenix 1.3.x) instead of brunch:
https://github.com/kokolegorille/app/blob/master/WEBPACK4.md

alternate

That being said recommended practice is to limit the reliance on environment variables to one, single variable typically process.env.NODE_ENV - which is then used to select the correct module (e.g. settings.prod.js vs. settings.dev.js) to include in the generated JS bundle.

SurviveJS: Choosing which module to use

A similar approach seems to be possible with brunch with the jsenv-brunch plugin (npm).

Many thanks!

Could someone explain how would people use environment variables in their front-end (react) now that we’re using esbuild in Phoenix please?