dotenv in react app code example

Example 1: how to import dotenv in react

//create .env file and use prefix "REACT_APP_" infront of variable name
//for example
REACT_APP_TOKEN=abcdefghijklmnopqrstuvwxyz

// inside react file simple call it by
process.env.REACT_APP_TOKEN

//if your react server was running before creation of .env and restart it.

Example 2: react environment variables

// Place a filer called .env at the doc root of your project
/*
my-react-app/ 
 |-node-modules/
 |-src/
 |-public/
 |-.env
 |-gitignore
 |-package.json
 |-package.lock.json.
 |-README.md
*/
// Edit the .env file and create your cusotm Environment Variables
// DO NOT USE SINGLE OR DOUBLE QUOTES!

REACT_APP_CLIENT_ID=jfjffffaddfeettgydgdffv
REACT_APP_KEY=aaddddawrfffvvvvssaa

// They will be READ-ONLY from your JS file, you can print them
// or assign them to other variables

console.log(process.env.REACT_APP_CLIENT_ID);
console.log(process.env.REACT_APP_KEY);

var id = process.env.REACT_APP_CLIENT_ID;
var key = process.env.REACT_APP_KEY;