How to have different configuration based on environment for gulp?

Question

I have a chrome-extension React project that gets built with gulp. I'd like to propagate configuration values based on environment. for example, with CHROME_ENV=staging I'd like to have config.oauth_client_id = '<some ceratain thing>' and be able to change it per-environment. So the question is two-fold: * how do I build different files with gulp based on environment variable? * how do I structure my React project so there is a config module or varuable that is quite global that stores my configuration.

Answer 1

In your gulpfile.js you could use dotenv, (https://github.com/motdotla/dotenv) to set environment variables or simply pass the gulp script them:

NODE_ENV=staging gulp some-command

In node you can reference this as process.env.NODE_ENV.

To pass environment variables to your build depends on what you're using.

For webpack here is a good answer: Passing environment-dependent variables in webpack

For browserify you would most likely look at: https://github.com/hughsk/envify

I bootstrap my client side scripts with environment variables set at starting the script or with .env, and from there send it up from the server by rendering json in a script tag. This may not work for you as it's a browser extension and needs to be executed without a server and should be injected at build time.