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;