.env File

Env files are used to store credentials such as API keys, Firebase Credentials. An environment variable supports storing the API link at one location so that we do not need to change the Link in each file manually.

Warning: Env file do not store any secrets (such as private API keys) in your React app's environment file (env file). Keep in mind that environment variables are included in the app's build, making them accessible to anyone who inspects your app's files.

Environment variables is used to create clean and well-organized code with separating configuration from application logic, which yielding a codebase that's easier to maintain, read and debug.

Is a .env file secure?

-: env file is a good way to keep it secure and separate from the rest of your code. Defining your API key in a .env file has several benefits: Security: Keeping your API key in a separate file ensures that it does not get accidentally committed to a public repository.

Where should .env file go in the project?

-: Open the project root directory and create a .env file inside that directory.

How can use .env files?

-: After creating a new file named .env in the root of your project, in your new .env file, add a new key=value. 

REACT_APP_API_URL= "YOUR_API" // in React Hooks
VITE_APP_API_URL= "YOUR_API" // in React + Vite

These environment variables will be defined for you on process.env. The below example for process.env is from index.js file.

<BrowserRouter basename={process.env.PUBLIC_URL}></BrowserRouter>

© Skote.