Adding an .env file to React Project
ReactjsEnvironment VariablesApi KeyReactjs Problem Overview
I'm trying to hide my API Key for when I commit to github, and I've looked through the forum for guidance, especially the following post:
https://stackoverflow.com/questions/48699820/how-do-i-hide-api-key-in-create-react-app
I made the changes and restarted yarn. I'm not sure what I'm doing wrong––I added an .env
file to the root of my project (I named it process.env
) and in the file I just put REACT_APP_API_KEY = 'my-secret-api-key'
.
I'm thinking it might be the way I'm adding the key to my fetch
in App.js, and I've tried multiple formats, including without using the template literal, but my project will still not compile.
Any help is much appreciated.
performSearch = (query = 'germany') => {
fetch(`https://api.unsplash.com/search/photos?query=${query}&client_id=${REACT_APP_API_KEY}`)
.then(response => response.json())
.then(responseData => {
this.setState({
results: responseData.results,
loading: false
});
})
.catch(error => {
console.log('Error fetching and parsing data', error);
});
}
Reactjs Solutions
Solution 1 - Reactjs
4 steps
-
npm install dotenv --save
-
Next add the following line to your app.
require('dotenv').config()
-
Then create a
.env
file at the root directory of your application and add the variables to it.
// contents of .env
REACT_APP_API_KEY = 'my-secret-api-key'
- Finally, add
.env
to your.gitignore
file so that Git ignores it and it never ends up on GitHub.
If you are using create-react-app then you only need step 3 and 4 but keep in mind variable needs to start with REACT_APP_
for it to work.
Reference: https://create-react-app.dev/docs/adding-custom-environment-variables/
NOTE - Need to restart application after adding variable in .env file.
Reference - https://medium.com/@thejasonfile/using-dotenv-package-to-create-environment-variables-33da4ac4ea8f
Solution 2 - Reactjs
So I'm myself new to React and I found a way to do it.
This solution does not require any extra packages.
ReactDocs
Step 1In the above docs they mention export in Shell and other options, the one I'll attempt to explain is using .env file
1.1 create Root/.env
#.env file
REACT_APP_SECRET_NAME=secretvaluehere123
Important notes it MUST start with REACT_APP_
1.2 Access ENV variable
#App.js file or the file you need to access ENV
<p>print env secret to HTML</p>
<pre>{process.env.REACT_APP_SECRET_NAME}</pre>
handleFetchData() { // access in API call
fetch(`https://awesome.api.io?api-key=${process.env.REACT_APP_SECRET_NAME}`)
.then((res) => res.json())
.then((data) => console.log(data))
}
1.3 Build Env Issue
So after I did step 1.1|2 it was not working, then I found the above issue/solution. React read/creates env when is built so you need to npm run start every time you modify the .env file so the variables get updated.
Solution 3 - Reactjs
Today there is a simpler way to do that.
Just create the .env.local file in your root directory and set the variables there. In your case:
REACT_APP_API_KEY = 'my-secret-api-key'
Then you call it in your js file in the following way:
process.env.REACT_APP_API_KEY
React supports environment variables since [email protected] .You don't need external package to do that.
*note: I propose .env.local instead of .env because create-react-app add this file to gitignore when create the project.
Files priority:
npm start: .env.development.local, .env.development, .env.local, .env
npm run build: .env.production.local, .env.production, .env.local, .env
npm test: .env.test.local, .env.test, .env (note .env.local is missing)
More info: https://facebook.github.io/create-react-app/docs/adding-custom-environment-variables
Solution 4 - Reactjs
Webpack Users
If you are using webpack, you can install and use dotenv-webpack
plugin, to do that follow steps below:
Install the package
yarn add dotenv-webpack
Create a .env
file
// .env
API_KEY='my secret api key'
Add it to webpack.config.js
file
// webpack.config.js
const Dotenv = require('dotenv-webpack');
module.exports = {
...
plugins: [
new Dotenv()
]
...
};
Use it in your code as
process.env.API_KEY
For more information and configuration information, visit here
Solution 5 - Reactjs
1. Create the .env file on your root folder
some sources prefere to use .env.development
and .env.production
but that's not obligatory.
2. The name of your VARIABLE -must- begin with REACT_APP_YOURVARIABLENAME
it seems that if your environment variable does not start like that so you will have problems
3. Include your variable
to include your environment variable just put on your code process.env.REACT_APP_VARIABLE
> You don't have to install any external dependency
Solution 6 - Reactjs
Steps to use environment variables in a CREATE REACT APP (Without dotenv package)
-
Create a new file called
.env
in the root folder of the project (NOT inside src folder but one level up. Remember, it should be at the same level as package.json (THIS IS VERY IMPORTANT) -
Define your variables like so (Note that every variable you define should start with REACT_APP_)
Example :
.env file
REACT_APP_ACCESS_KEY=8Sh9ZLwZevicWC-f_lmHvvyMu44cg3yZBU
Note: You don't have to enclose the value in
"" or ''
-
Now you can use the variable in any of your components like so
const apiKey = process.env.REACT_APP_ACCESS_KEY
The name should match the key given in the
.env
file -
Now before you try this out, always remember to restart the local server. Once you run
npm start
it works. This step applies whenever you make changes to the.env
file. We generally forget this step so it might not work. -
Optionally, check if
.env
entry is present in.gitignore
file. If the entry of.env
exists in.gitignore
then your.env
file will not be pushed to github(This is the reason why we use.env
in the first place).
Solution 7 - Reactjs
- Install
dotenv
as devDependencies:
npm i --save-dev dotenv
- Create a
.env
file in the root directory:
my-react-app/
|- node-modules/
|- public/
|- src/
|- .env
|- .gitignore
|- package.json
|- package.lock.json.
|- README.md
- Update the
.env
file like below & REACT_APP_ is the compulsory prefix for the variable name.
REACT_APP_BASE_URL=http://localhost:8000
REACT_APP_API_KEY=YOUR-API-KEY
- [ Optional but Good Practice ] Now you can create a configuration file to store the variables and export the variable so can use it from others file.
For example, I've create a file named base.js
and update it like below:
export const BASE_URL = process.env.REACT_APP_BASE_URL;
export const API_KEY = process.env.REACT_APP_API_KEY;
- Or you can simply just call the environment variable in your JS file in the following way:
process.env.REACT_APP_BASE_URL
Solution 8 - Reactjs
You have to install npm install env-cmd
Make .env in the root directory and update like this & REACT_APP_ is the compulsory prefix for the variable name.
REACT_APP_NODE_ENV="production"
REACT_APP_DB="http://localhost:5000"
Update package.json
"scripts": {
"start": "env-cmd react-scripts start",
"build": "env-cmd react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
}
Solution 9 - Reactjs
If in case you are getting the values as undefined
, then you should consider restarting the node server and recompile again.
Solution 10 - Reactjs
I want to explain well how to solve this problem to prevent the undefined
issues:
- First, Adding Development Environment Variables In
.env
is available with[email protected]
and higher. This means u do not have to install anything . - Second create your
.env
file or.env_developement
file or whatever and place ur variable but and this is the big but addREACT_APP_
to each variable name for exREACT_APP_API_KEY= "secret_key_here"
. Without addingREACT_APP_
you will getundefined
issue. - Now, You can simply use this variable
process.env.REACT_APP_VARIBALE_NAME
. for ex:const API_KEY = process.env.REACT_APP_API_KEY
. - Finally, we solved this miserable situation .
Solution 11 - Reactjs
The everyone got undefined the solution is put your .env file in root directiory such as
- project-name/
- src
- .env
Dont Create in src Folder create in root directory of your app
It think u guys created file in src folder because i also created there only... Then only i realised it is wrong so create .env file in outer of src It will Works