Skip to content

Instantly share code, notes, and snippets.

@Haugen
Created November 9, 2018 17:33
Show Gist options
  • Save Haugen/f6d685f18b4bd8a3cf5bcf6272577c5b to your computer and use it in GitHub Desktop.
Save Haugen/f6d685f18b4bd8a3cf5bcf6272577c5b to your computer and use it in GitHub Desktop.
Using .env file environment variables with create-react-app project

For a simple way to use environment variables in your react-create-app project, follow these steps:

  1. Create a new file named .env in the root of your project.
  2. In your new .env file, add a new key=value pair. For security reasons, you must prepend your key with REACT_APP, for example REACT_APP_API_KEY=abcdefg123456789
  3. Restart your server development server. In order for React to find and register your newly created environment variable you must restart your server. Do this every time you add or change a variable.
  4. Your new variables will now be available throughout your React app via the global process.env object. In our case, we could get our API key using process.env.REACT_APP_API_KEY.

Additinal notes

  • Since we commonly store secrets in .env you probably want to add it to .gitignore.
  • You don't need to install the dotenv package or anything else for this to work.
@nameernihad
Copy link

That was nice 😍👍

@zafar122
Copy link

zafar122 commented Apr 1, 2024

That was nice

@godcodevo
Copy link

This is nice.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment