importing env variable react front end
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 [email protected]
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 [email protected]
or higher, though.
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