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

Hi everyone,

In the Phoenix application, I have a React code in the assets/javascript/ folder. I’m using Brunch and Babel (added by the framework).

At some point I needed to add a configuration variable containing the client_id for Google API. The config is needed in React part of the app and it should be different depending on the environment (dev & test, prod). Ideally, it should be stored outside of the Git repository.

The questions is how should I store and access the config. My idea was to use environment variables and access them using process.env in Javascript.

The problem is that it doesn’t work:

After running GOOGLE_CLIENT_ID=123 mix phoenix.server, the value of process.env.GOOGLE_CLIENT_ID in Javascript code is undefined. I’m not sure why. It worked for me in Rails 5.2 with Webpack and React.

What solution would you recommend for the Phoenix and React app?

Best,
Marek