create react app cannot read environment variable after build

Question

I have a react app , created with create-react-app then I build the app with command: npm run build

It's using serve to run the app after build, if we start the app with development code by running ENV=production npm run start it can read the process.env.ENV variable beacause I'm adding this plugins to webpack dev config

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

I also add the script above to webpack prod config, but if I try this command after build ENV=prod serve -s build, it cannot read the environment variable

How to fix this?

Answer 1

If you set all the environment variables inside the app.config.js, you can replace them after the build in the main.????????.chunk.js file.

A sample app.config.js could look like:

export default {
  SOME_URL: "https://${ENV_VAR_1}"
  SOME_CONFIGURATION: "${ENV_VAR_2}",
}

Leave the app.config.js file as is, without replacing the environment variables with their actual values. Then, create the optimized production build:

npm ci # if not already installed
npm run build

If the default webpack configurations are used, the contents of app.config.js will be bundled in build/static/js/main.????????.chunk.js. The values of the environment variables can be be envsubst, with a bash script like this:

main_chunk=$(ls build/static/js/main.*.js)
envsubst <$main_chunk >./main_chunk_temp
cp ./main_chunk_temp $main_chunk
rm ./main_chunk_temp

Note: In the above example, envsubst reads the actual variables set in the environment at runtime and literally replaces ${ENV_VAR_1} and ${ENV_VAR_2} with them. So, you can only run this once as the chunk is being over-written.