Thursday, 25 August 2022

Using process.env in React

  1. Install dotenv package
  2. Create .env file in root directory
  3. Add variables to the file like this:
REACT_APP_MOCK_API_URL=data1
REACT_APP_REST_KEY=data2

  1. Read variables like this:

const key = process.env.REACT_APP_REST_KEY;
const mockUrl = process.env.REACT_APP_MOCK_API_URL;

Important!

Variable name MUST begin with "REACT_APP_"

(Initially I called variable MOCK_API_URL. It took me few hours to figure out why key contained value and mockUrl was undefined.)