importing env variable react front end

Question

I have bootstrapped an app using create-react-app. I have a token that I don't wish to push to GitHub.

I have ran yarn add dontenv and then tried to import the env variable to my App.js file.

My code looks like this

.env

TOKEN=**************

Then my app.js file looks like this:

app.js

import React from 'react';
import ReactDOM from 'react-dom';
require('dotenv').config();

const App = props => {
    console.log(process.env.token);
    return <p>Test</p>
}

process.env.token is undefined. Can anyone advise how to use token in the front end or how I should do this using a bootstrapped create-react-app?

Does this answer your question? [How do I hide API key in create-react-app?](https://stackoverflow.com/questions/48699820/how-do-i-hide-api-key-in-create-react-app) — Malcolm, Jun 22 '22 at 00:17
i dont remember, i asked this question over 4 years ago, and there is a popular and accepted answer below so I imagine that answered my question @Malcolm — peter flanagan, Jun 22 '22 at 04:43

score 74 · Accepted Answer · answered Mar 05 '18 at 10:29

You don't need dotenv (and I doubt that library will work at runtime in a client-side application anyway).

create-react-app actually provides this functionality out of the box, assuming you're using react-scripts@0.5.0 or higher.

The steps are as follows:

Create a .env file in the root of your project.
Add a variable, starting with the prefix REACT_APP_.
Access it via process.env.

That second bit is the important part - to avoid you exposing variables by accident, create-react-app forces you to use a prefix as a way of saying "yes, I know what I'm doing".

If you're not intending to push the file to source control (which you shouldn't be, if it's got secret keys in!), then using an .env.local file is more idiomatic - that requires react-scripts@1.0.0 or higher, though.

Note: You need to restart your server after making these corrections — TOLULOPE ADETULA, Aug 31 '19 at 00:28
@TOLULOPEADETULA took me sometime to figure that out, thanks! — dpacman, Aug 03 '20 at 05:14

score 13 · Answer 2 · answered Dec 28 '19 at 07:42

for anybody that does not get this to work, try this

if you want git to ignore it you can create a .env.local file and git will ignore it. Look at your .gitignore file and you will find the `.env.local``

create .env.local file in your root folder
Open your .env.local
IMPORTANT, all your environment variables MUST start with REACT_APP_
Create an environment variables REACT_APP_BASE_URL
Restart your application (kill it)
To access environment variables you write process.env.REACT_APP_BASE_URL

Thank you for the great answer. ".env.local" or ".env" they both work fine. — Abdulhakim, Dec 08 '22 at 18:53

score 7 · Answer 3 · answered Mar 12 '21 at 13:51

 - Create .env file in root folder

 - Open to .env file

     --> REACT_APP_API_KEY= API KEY
    **NOTE** starting with the prefix REACT_APP_ (IMPORTANT)

 - Access it use process.env
  eg  const  {REACT_APP_API_KEY,REACT_APP_TEMPLATE_ID,REACT_APP_SERVICE_ID} = process.env

 - And use with template string
 eg emailjs.send(`${REACT_APP_SERVICE_ID}`,`${REACT_APP_TEMPLATE_ID}`, values, `${REACT_APP_API_KEY}` )
      .then((response) => {
         console.log('SUCCESS!', response.status, response.text);
      }, (err) => {
         console.log('FAILED...', err);
      });


When you do any changes or need to create at .env file don't forget to restart  
appliction "npm start"

hopefully, you'll find this helpful :)

score 2 · Answer 4 · answered Oct 28 '18 at 08:57

2

You don't have to use any code logic for this purpose. You have to use different .env files for production and development if you want to serv different values for different environments. See my answer here

answered Oct 28 '18 at 08:57

Nastro

1,719
7
21
40

importing env variable react front end

4 Answers4