Using .env file environment variables with create-react-app project

env-file-in-react-create-app.md

For a simple way to use environment variables in your react-create-app project, follow these steps:

1. Create a new file named .env in the root of your project.
2. In your new .env file, add a new key=value pair. For security reasons, you must prepend your key with REACT_APP, for example REACT_APP_API_KEY=abcdefg123456789
3. Restart your server development server. In order for React to find and register your newly created environment variable you must restart your server. Do this every time you add or change a variable.
4. Your new variables will now be available throughout your React app via the global process.env object. In our case, we could get our API key using process.env.REACT_APP_API_KEY.

Additinal notes

• Since we commonly store secrets in .env you probably want to add it to .gitignore.
• You don't need to install the dotenv package or anything else for this to work.

For the people who use Vite react app, you can try this:

in your .env file, you will start your variable name with VITE_something_something_something=value

In your react file, the part you want to get the variable from .env, you write import.meta.env.VITE_something_something_something

for those who are not able to access env variables and process.env.APIKEY shows undefined. You need to know this :
if your project has a similar directory structure :
project
->client(This is your frontend)
->components
->SomeComponent.tsx ( and you need to access env variable in this file then .env should be in client directory not the main project directory)

I made a seperate .env for client and it solved my issue. I think it happens becuase you run "npm start" in client directory ( which is your frontend ) and it will only bundle files from client only.

Hope this helps.

if come to this error "process is not defined" . apply this i solve this problem
create your project root folder in ,env file and use this
VITE_OPEN_API_KEY=keyValue
when use you .env key
const apiKey = import.meta.env.VITE_OPEN_API_KEY;

if not solve in up method alt last apply this in .eslintrc.cjs file
env: {
node: true,
commonjs: true,
browser: true,
es6: true,
},

thanks a lot you save me for losing a lot of time

Thank you so much.

if come to this error "process is not defined" . apply this i solve this problem create your project root folder in ,env file and use this VITE_OPEN_API_KEY=keyValue when use you .env key const apiKey = import.meta.env.VITE_OPEN_API_KEY;

if not solve in up method alt last apply this in .eslintrc.cjs file env: { node: true, commonjs: true, browser: true, es6: true, },

It worked for me Thanks !