dotenv react 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: .env

require('dotenv').config()
const dotenv=require('dotenv');

//Usuage
process.env.NAME

Example 3: .env

npm install dotenv

Example 4: how to use .env file in react native

// step one install this module
npm install react-native-dotenv

// step two add this in your babel.config.js
 plugins: [
    'module:react-native-dotenv',
    {
      moduleName: '@dotenv',
      safe: false,
      allowUndefined: false
    }
  ]
 
 // step three add value whatever in your .env file
 API_KEY = 434d3c04fc285d218d740e2a568387e4
 
 // step four use this method for call environment
 import { API_KEY } from '@dotenv'

Example 5: 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;