Build react app multiple times with different environment variables

Question

I have a development environment file .env.development and a production .env file for my React web app.

The .env.development has a value REACT_APP_NAME=My Test App and the .env file has the value REACT_APP_NAME=My Blue App.

This works if there is only one customer (called Blue) that uses my app. The .env has the customer address and more customer specific values as well.

Now I want to deliver the app to multiple customers with multiple customer specifications in multiple env files.

My idea is to store customer specific env files:

• .env.blue
• .env.red
• .env.yellow

When I now (somehow) build the app, I'll get three folders

• build_blue
• build_red
• build yellow

and each folders consumed the specific environment for the build.

Is this somehow possible?

My current workaround would be:

• Rename .env.blue to .env
• yarn build
• publish to ftp server
• Rename .env to .env.blue
• Rename .env.red to .env
• yarn build
• ...

Answer 1

I build a little shell script that does the job. I'd like to share it, as someone else forces the same solution:

mv .env env

for CURR in .env.red .env.blue .env.yellow
do
    mv $CURR .env
    yarn build
    mv build build_$CURR
    cp .env build_$CURR/.env
    mv .env $CURR
done

mv env .env

After that you can load the different build folders to the different servers and move the .env file to the root.