How to use .env in a React app using Create React App?
.env files are extremely useful to hide secret keys like API keys in your project.
When you have a project that uses API keys or any other private keys, and want to push it on GitHub, you might probably want to hide those details from any other people who see the code. That's when you have store the API key as environment variable on a .env
file and add it on a .gitignore
file on the root of the project. Lucky for you all, create-react-app
is already configured with git and adds all the list of files and folders that should not be pushed onto GitHub or anything similar like gitlab or bitbucket.
What is create-react-app?
create-react-app
is a tool created by facebook to create applications with React.JS. It creates all the necessary build setup with no manual configuration required. To initialize a react app using create-react-app
go to your terminal and type the following:
$ npx create-react-app hiding-env
This gives you the bare minimum setup required to start building React applications.
If you want to learn about environment variables then check out this video by Jacob Sorber who is a computer scientist and a professor.
Coming back to our react app, the folder structure now must look like this
- hiding-env
- .git
- node_modules
- public
- src
package.json
.gitignore
So now, create an .env
file on the root of your project.
create-react-app
comes with all the necessary configurations to use environment variables in our applications so there's no setup required.
Open the .env
file and create an environment variable. The environment variable must be prefixed with REACT_APP
so any variable you name must be like REACT_APP_MY_KEY
. It is something enforced by create-react-app. You can read the docs here.
Open .env
variable and add the following key. It means nothing and just for the test purpose.
REACT_APP_API_KEY=123jkawqo-123@3
Go to the app.js
file inside src
and add the following code inside the App component.
const key = process.env.REACT_APP_API_KEY
console.log(key)
If you run the development server for the app and check the console you will then see the key being printed on the console of your browser.
Changing the variable depending on environment
There might be a case when you have to hit to a particular endpoint while you are in a development environment and a different endpoint while you are in a production environment. process.env.NODE_ENV
gives us the information about the environment the app is currently running on. So in order to do that we can do something like the following.
First add the URL to the development and production server in env file
REACT_APP_DEV_SERVER=localhost:3000/api/some_api
REACT_APP_PROD_SERVER=https://bigomega.dev/api/some_api
Then, check the environment you're on with the following code.
if(process.env.NODE_ENV == 'development') {
// do something
} else {
// do some other things
}
What we want to do is create a url variable that points to either development server or the production server so for that, we can do
if(process.env.NODE_ENV == 'development') {
const url = process.env.REACT_APP_DEV_SERVER
} else {
const url = process.env.REACT_APP_PROD_SERVER
}
You can refactor the code inside the App component or any other component as follows:
function App() {
const { NODE_ENV,
REACT_APP_DEV_SERVER,
REACT_APP_PROD_SERVER,
REACT_APP_API_KEY } = process.env
const url =
NODE_ENV == "development" ? REACT_APP_DEV_SERVER : REACT_APP_PROD_SERVER
const key = REACT_APP_API_KEY
console.log(key, url);
console.log(process.env.NODE_ENV)
return(<div className="App">Hi</div>)
}
Check the above example and explore the code yourself at this link.
You can optionally create a context or use redux to store these keys on a global state so that you do not have to check for environment and set URL on every file you encounter.
Thanks for reading.