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
: Default -
.env.local
: Local overrides. This file is loaded for all environments except test -
.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 called
.env.integration
where.env
exists - 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.
π Variables in
.env.production
will be used as fallback becauseNODE_ENV
will always be set to production for a build.
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.
You can access the environment variables in the index.html, just to remember that the env variable should be prefix with REACT_APP_
.
<title>%REACT_APP_NAME%</title>
Define permanent environment variables in .env
file in root of the project.
.env:
REACT_APP_NAME=ProjectName
π Remember to restart the server when you make any changes in .env
file.
Reference π§
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 β€οΈ
Top comments (5)
Nice article. Thanks for sharing.
Thanks Gokul
thanks for the information.
really valuable..
Thanks for sharingπ€©, nice article
Thank you for sharing!