Environment variables are a great way to configure the configurational data of an application. APIs and third-party libraries integration require developers to use configurational data called environment or config variables. It helps your application to behave differently based on the environment.
There are different service providers and cloud hosts such as Heroku, AWS, Azure, Google Cloud etc uses environment variables. These environment variables are mostly used in CI or deployment pipelines. But can we use the environment variables locally?? And also, can we work as per the environment variables in our react app?
- Don’t store environment variables in source control
- Use packages such as .dotenv to read data from .env
- Encrypt your environment variables and updated it regularly
- create-react-app uses namespaces in environment variables
Creating an application
Let’s create a simple react application using create-react-app.
npx create-react-app my-app
Then open http://localhost:3000/ to see your app.
When you’re ready to deploy to production, create a minified bundle with
npm run build.
So if we look at our start script command from package.json , create-react-app uses react-scripts. react-scripts includes scripts and configuration used by the create-react-app.
Thanks to the community, the environment variables support has been added at email@example.com .
Load environment file in development by ayrton · Pull Request #695 · facebook/create-react-app
Adds support to load environment variables via a .env file for development using the very stable and battle tested ⚔…
Ok, let’s try in our application.
echo "BASE_URL='http://localhost:7000'" >> .env
And log the value in
Let’s run the application.
But wait it doesn’t work? Why is that?
If you are using create-react-app to boilerplate your application then there is something in the config of reacts.scripts.
Set up a modern web app by running one command. Contribute to facebook/create-react-app development by creating an…
So let’s try with prefix and run our code.
Depending upon our deployment pipelines the environment configuration might vary. The environment variables that you want to use in production might vary to the development one, and it might differ from staging so on and so forth.
One way to deal coulde be:
Which is then followed by the
build. The problem of having this is we have to run this before every build. Seems time-consuming.
Can we make it simpler?
Yes, we can: We can create a separate with respect to our GitHub repo name: For eg:
.env.development ==> for development branch
.env.production ==> for production branch or we can call it as .env.master too .
we have this beautiful command which gives the name of GitHub branch.
git rev-parse — symbolic-full-name — abbrev-ref HEAD
Now what we can do is, we can copy the environment variables using the branch name. So, if you have a development branch and you have
.env.developement file. Then, we can use this command to copy the configuration and add it to our build script command
cp ./.env.$(git rev-parse — symbolic-full-name — abbrev-ref HEAD) .env && react-scripts build