Adding an .env file to a React project [duplicate]

This solution does not require any extra packages.

Step 1 ReactDocs

In the above documentation they mention export in Shell and other options, and 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 the 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

After I did step 1.1|2, it was not working, but then I found the above issue/solution. React reads/creates env when it is built, so you need to run npm run start every time you modify the .env file, so the variables get updated.

There is now 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 JavaScript file in the following way:

process.env.REACT_APP_API_KEY

React has supported environment variables since [email protected]. You don't need an external package to do that.

Adding Development Environment Variables In .env

*Note: I propose .env.local instead of .env because create-react-app adds this file to gitignore when creating 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 information: Adding Custom Environment Variables

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).

Webpack Users

If you are using Webpack, you can install and use the 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 the 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 dotenv-webpack.

1. Create the .env file on your root folder

Some sources prefer 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, you will have problems.

3. Include your variable

To include your environment variable, just put process.env.REACT_APP_VARIABLE in your code.

You don't have to install any external dependency

1. Install dotenv as devDependencies:

   npm i --save-dev dotenv
   

2. Create a .env file in the root directory:

   my-react-app/
   |- node-modules/
   |- public/
   |- src/
   |- .env
   |- .gitignore
   |- package.json
   |- package.lock.json.
   |- README.md
   

3. 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
   

4. [ 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;
   

5. Or you can simply just call the environment variable in your JS file in the following way:

   process.env.REACT_APP_BASE_URL
   

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 you do not have to install anything 😃.
• Second, create your .env file or .env_developement file or whatever and place your variable, but, and this is the big but, add REACT_APP_ to each variable name, for example, REACT_APP_API_KEY= "secret_key_here". Without adding REACT_APP_, you will get the undefined issue.
• Now, you can simply use this variable: process.env.REACT_APP_VARIBALE_NAME. For example: const API_KEY = process.env.REACT_APP_API_KEY.
• Finally, we solved this miserable situation 😇.

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"
  }

If in case you are getting the values as undefined, then you should consider restarting the Node.js server and recompile again.

The everyone got undefined the solution is put your .env file in the root directory, such as:

• project-name/
• src
• .env

Don’t create it in the src Folder. Create it in the root directory of your app.

It think you created the file in the src folder, because I also created it there only... Then only did I realise it was wrong, so I created the .env file in the outer of src. It will work.

You have to run npm start again once you set up the environmental variable. That was the missing part for me. The .env variables do not get updated on auto reloading.