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?
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:
.env
file in the root of your project.REACT_APP_
.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.