hide api keys react code example

Example 1: how to hide api key in react app

// .env
API_KEY=your_api_key            <-- this won't work
REACT_APP_API_KEY=your_api_key  <-- yes! this work
// Example:
// REACT_APP_GOOGLE_API_KEY=123456

Example 2: how to hide api key in react app

node_modules
public  
src 
.env     <---- Here
.gitignore  
LICENSE 
README.md   
package-lock.json   
package.json

Example 3: hide urls in .env in react app

WARNING: Do not store any secrets (such as private API keys) in your React app!

Environment variables are embedded into the build, meaning anyone can view them by inspecting your app's files.

outside our src folder create .env file and add it to gitignore
REACT_APP_WEATHER_API_KEY=123456
inside where you want to access the variable 
const API_KEY = process.env.REACT_APP_WEATHER_API_KEY;

make sure to restart the server