How to set node env variables (runtime) after build the React project?

Question

I'm setting up ReactJS Project to change environment variables at Run-time.

I have 2 ENV variables:

1) NODE_ENV = Production, Development

2) FLAVOUR = Alpha, Beta

I want to load different configurations, theme and images based on FLAVOUR variable. Which is already done and working.

Build commands:

1) cross-env NODE_ENV=production --env.FLAVOUR=Alpha webpack

2) cross-env NODE_ENV=production --env.FLAVOUR=Beta webpack

--

But above commands are changing env variables at Build-Time. But I want to change FLAVOUR variable only for Production env at Run-Time after the build.

Ex. ./build cross-env --env.FLAVOUR=Alpha node server

Ex. ./build cross-env --env.FLAVOUR=Beta node server

./build is build directory, created by npm run build command.

--

Which means when I change the FLAVOUR variable to Beta and restart the web app My expectation is that it will be the Beta app and Theme. This helps us with scaling these webapps. They can be re-purposed on a dime.

Webpack Production:

new webpack.DefinePlugin({
   'process.env.FLAVOUR': JSON.stringify(process.env.FLAVOUR),
})

Answer 1

I don't know if this answers your question, but I have set up my project using webpack as the following

  new webpack.EnvironmentPlugin({
      ENV: process.env.ENV || 'development',
      API_BASE: process.env.API_BASE,
    }),

I have API_BASE defined in an .env file which webpack picks up when I run yarn start for development

Once I am done developing, I build a production docker image and I can overwrite the API_BASE in the environment file while running the image as

docker build -t yourProjectName .
docker run -e API_BASE='http:\/\/yourIPAddress:port/' -p 9000:80 yourProjectName

This is possible because in my Dockerfile I run bash script whenever the image runs

RUN chmod +x setup.sh

ENTRYPOINT ["sh","/setup.sh"]
CMD ["nginx", "-g", "daemon off;"]

and the setup.sh file

/bin/sed -i "s||${API_BASE}|g" /usr/share/nginx/html/app.*.js
exec "$@"

The script looks for the string http://localhost:5000/ and replaces it with whatever you pass during runtime

Hope this helps!

Answer 2

I have come across this problem today and have solved it by making process.env available through webpack externals.

const config = {
  externals: [{ processEnv: 'process.env' }, nodeExternals({})],
}

The line above tells webpack that there is a dependency called processEnv and should be resolved by referencing process.env. It outputs a small commonjs module.

// WEBPACK'S BUILD
/***/ "processEnv":
/*!******************************!*\
  !*** external "process.env" ***!
  \******************************/
/***/ ((module) => {

"use strict";
module.exports = process.env;

/***/ }),

In your code, you can require this shim by doing.

const processEnv = require('processEnv')

I have documented the process in more detail here https://blog.freemiumpn.com/docs/developer/how-to/web/runtime-configs-with-webpack-and-docker-v2