An Interest In:
Web News this Week
- April 19, 2024
- April 18, 2024
- April 17, 2024
- April 16, 2024
- April 15, 2024
- April 14, 2024
- April 13, 2024
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
: 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
Original Link: https://dev.to/suprabhasupi/react-environment-variables-k0n
Dev To
An online community for sharing and discovering great ideas, having debates, and making friendsMore About this Source Visit Dev To