React Environment Variables

What is ENV 🤔

env file to store your sensitive credentials like API keys. Environment variables can also help you to store your API link in one location so that you don't have to change the link in each file manually.

Do you have to install any plugin to use ENV file 🙄

No, A React frontend connected to a Node backend is a rock-solid combination for any application you want to build. So you can create and use .env file without installing any plugins. Usually, you create one .env file which triggers for local, integration and production.

What if you want to create different Keys for integration and production

If you have to use different keys for integration and production, in that case you have to customise your environment.
Now, let's see what are we going to cover in this article:

1. Customise Environment Variable for build environment
2. Use Environment variable in HTML

1. Customise Environment Variable for build environment

There are already few environment which React supports like .env.development ,.env.test , .env.production , etc.

.env files can be used:

• .env
• .env.local:
• .env.development, .env.test, .env.production : Environment-specific settings

You can create your own env file which is not added in react. You need to install one package called env-cmd for setup the custom environment. Create a file ca

• reate a file called.env.integration where.env exist
• .env.local:
• Set the environment variable which you wanted for integration in .env.integration,
REACT_APP_NAME = XXXX
• install .env.cmd
$ yarn add env-cmd
• Add a new script to your .package.json building with your new environment:
{ "scripts": { "build: integration": "env-cmd -f .env.integration yarn run build" } } }
• Now you can run the integration command yarn run build:integration to build with the integration environment config.

What if you want to install devDependencies when NODE_ENV=production 🤔

As you know if NODE_ENV=production , then devDependencies packages will not get installed.

However, You can install the devDependencies in NODE_ENV=production with setting yarn install --production=false in package.json .

Checkout this Link for more information.

2. Use ENV variables in HTML

You only use environment variable in JavaScript files. But what when you need to use environment variable in HTML, It can be Google Map keys or any secret keys of script.

Define permanent environment variables in .env file in root of the project.

.env:

📝 Remember to restart the server when you make any changes in .env file.

Reference 🧐

• CRA adding custom environment variables
• CRA deployment docs
• CRA env variables for build env

Summary ⅀

If you want to add any other env which is not mentioned in react app, you have to setup env-cmd and can use it. Also, you can use .env variables in HTML file using REACT_APP_ Thanks for reading the article ❤️