Context:
- MERN stack app
- Deployed to Heroku
- React app created with create-react-app
Here is my folder structure:
folder structure
In my server app.js, I can access the .env variables by requiring it like this: require('dotenv').config({ path: '../.env' });
I am trying to access the env variables on my React app, but I cannot seem to access the variables in the root .env file, and I cannot seem to specify the path in React (can I?) for the .env like in server/app.js.
The only way I can get it to read any .env variable value is if I move the .env file to the client directory, so my workaround for now is to move .env to my client directory and update the code in my server to require it as such: require('dotenv').config({ path: '../client/.env' });
This workaround fixes it, but is there a better way/best practice to allow for the .env file be in the root folder?
Do I need to eject create-react-app and set up some custom configurations?
More info:
My local .env file contains:
REACT_APP_API_URL=http://localhost:5000
My client/package.json scripts:
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
Sorry, miss understood your question.
In create-react-app you don't have to require the dotenv module, ref: https://create-react-app.dev/docs/adding-custom-environment-variables/
Are you sure your local environmentis development?
I am using 3 .env file like .env.prod, .env.dev and .env. But not able to fetch the url to my component.
I am using react 16.9.
Can you please help me why I am not able to fetch it?
in my .env / .env.dev files
loginUrl = = "http://localhost:8080/api/2.0/admin/auth/login"
in my package.json files
"scripts": {
"start": "cp ./.env.dev .env && react-scripts start",
"build:dev": "cp ./.env.dev .env && react-scripts build",
"build:stage": "cp ./.env.stage .env && react-scripts build",
"build:prod": "cp ./.env.prod .env && react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},```
Inside my component, when I am printing it it is giving undefined.
console.log(process.env.loginUrl) is giving undefined
Using react-script
Looking at react script adding-custom-environment-variables documentation, variables are automatically loaded from .env if:
Note: You must create custom environment variables beginning with REACT_APP_. Any other variables except NODE_ENV will be ignored to avoid accidentally exposing a private key on the machine that could have the same name. Changing any environment variables will require you to restart the development server if it is running.
Seams like the problem come from the name of your variable, try renaming in REACT_APP_LOGIN_URL
Note: this feature is available with react-scripts#0.5.0 and higher.
If using Webpack instead of react-script
You need to use webpack DefinePlugin to inject environments variables in your code.
In your webpack.config.js file :
require("dotenv").config(); // will load .env file in process.env
const webpack = require("webpack");
...
plugins: [
...
new webpack.DefinePlugin({
"process.env": {
NODE_ENV: JSON.stringify("production"),
SENTRY_DSN: JSON.stringify(process.env.SENTRY_DSN),
BUILD_DATE: JSON.stringify(new Date()),
TRAVIS_COMMIT: JSON.stringify(process.env.TRAVIS_COMMIT)
}
}),
...
]
Make sure you have strings only as if the value isn't a string, it will be stringified (including functions).
Then in your code, you can call console.log(process.env.NODE_ENV)
We're using react-scripts to run our tests, via the command react-scripts test. Locally we have our own test environments, and use the .env.test file as the environment file (it uses this automatically).
However, in our CircleCI environment we want to run the tests using the development environment, i.e. using .env.development. I can't figure out how to tell react-scripts to use the dev env file, I've tried setting various values before running the command like REACT_APP_ENV and NODE_ENV. I've tried using the env-cmd module to specify it to use the dev env file (e.g. env-cmd .env.development react-scripts test), but it STILL uses the test one.
I know in the CircleCI test command I could just overwrite the test env file with the dev one (something like cp -rf .env.development .env.test && react-scripts test), but I was wondering if there was a cleaner way of doing it (since if I did it that way, if we wanted to test using dev environment locally, it'd overwrite our personal .env.test files)?
The only thing you need to do is to modify the react-scripts test command by adding the following:
--env=jsdom
So the end result would be
// package.json
{
"scripts": {
...
"test": "react-scripts test --env=jsdom"
...
}
}
https://serverless-stack.com/chapters/environments-in-create-react-app.html
I'm trying to figure out how to run a react application (created through create-react-app) with different profiles.
That is, suppose I have several environments (local, dev, prod) and I have a fetch that refers to the backend (which is deployed on another server).
The backend has its own address for each environment. I need to somehow set global variables for different launches.
For example, in Springboot this can be done via application-"profile".properties.
I run the application through npm install -g serve & serve -s build. How to do it?
When working with create-react-app, you can configure your app using environment variables.
It is explained in detail in the documentation here: https://facebook.github.io/create-react-app/docs/adding-custom-environment-variables
All environment variables need to be prefixed with REACT_APP_.
You can define profiles with different environment variables using .env files.
For example, to set an API URL in production, create a file .env.production with the following contents:
REACT_APP_API_URL=https://my.beautiful.api/
…and as default (for local development), create a file .env:
REACT_APP_API_URL=http://localhost:3001/
The environment variables from the .env.production file will be used when you build your project with npm run build
The environment variables from the .env file will be used when you work on your project in local dev mode with npm start
Example for using the environment variable in your app's code:
fetch(process.env.REACT_APP_API_URL)
.then(function(response) {
return response.json();
})
.then(function(myJson) {
console.log(JSON.stringify(myJson));
});
The way i handle this case is by using package react-native-config and i have create .env file (.env.dev, .env.staging, .env.prod) and i have define some scripts in the package.json. I am using react-native init project though.
as below
"scripts": {
"start": "node node_modules/react-native/local-cli/cli.js start",
"test": "jest",
"postinstall": "sed -i '' 's/#import <RCTAnimation\\/RCTValueAnimatedNode.h>/#import \"RCTValueAnimatedNode.h\"/' ./node_modules/react-native/Libraries/NativeAnimation/RCTNativeAnimatedNodesManager.h",
"clean": "cd android && gradlew clean",
"feature": "node scripts/createfeature.js",
"component": "node scripts/createcomponent.js",
"android": "cd android && gradlew app:assembleDebug && gradlew installDebug",
"storybook": "storybook start -p 7007",
"prestorybook": "rnstl",
"android-dev": "SET ENVFILE=.env.dev && react-native run-android",
"android-staging": "SET ENVFILE=.env.staging && react-native run-android",
"android-prod": "SET ENVFILE=.env.prod && react-native run-android",
"ios-dev": "ENVFILE=.env.dev react-native run-ios",
"ios-staging": "ENVFILE=.env.staging react-native run-ios",
"ios-prod": "ENVFILE=.env.prod react-native run-ios",
"build-android-prod": "SET ENVFILE=.env.prod && cd android && gradlew assembleRelease"
},
I am using create react app to bootstrap my app.
I have added two .env files .env.development and .env.production in the root.
My .env.development includes:
API_URL=http://localhost:3000/api
CALLBACK_URL=http://localhost:3005/callback
When I run my app using react-scripts start and console out process.env it spits out
{ NODE_ENV: "development", PUBLIC_URL: "" }
I've tried different things, but its just not picking up the veriables in my development file, what am I doing wrong?!
Directry structure is:
/.env.development
/src/index.js
Package.json script is:
"start": "export PORT=3005; npm-run-all --parallel server:start client:start",
"client:start": "export PORT=3005; react-scripts start",
"server:start": "node server.js",
"build": "react-scripts build",
Edit:
#jamcreencia correctly pointed out my variables should be prefixed with REACT_APP.
Edit 2
It works okay if I name the file .env but not if I use .env.development or .end.production
With create react app, you need to prefix REACT_APP_ to the variable name. ex:
REACT_APP_API_URL=http://localhost:3000/api
REACT_APP_CALLBACK_URL=http://localhost:3005/callback
** Make sure your .env file is in the root directory, not inside src folder.
CRA Docs on Adding Custom Environment Variables:
Note: You must create custom environment variables beginning with REACT_APP_. Any other variables except NODE_ENV will be ignored to avoid accidentally exposing a private key on the machine that could have the same name
Make sure your .env file is in the root directory, not inside src folder.
Had this same problem! The solution was to close the connection to my node server (you can do this with CTRL + C). Then re-start your server with 'npm run start' and .env should work properly.
Source: Github
If you want to use multiple environment like .env.development .env.production
use dotenv-cli package
add .env.development and .env.production in project root folder
and your package.json
"scripts": {
"start": "react-app-rewired start",
"build-dev": "dotenv -e .env.development react-app-rewired build",
"build-prod": "dotenv -e .env.production react-app-rewired build",
"build": "react-app-rewired build",
"test": "react-app-rewired test --env=jsdom",
"eject": "react-scripts eject"
},
then build according to environment like
npm run-script build-dev
I was having the same problem, but it was because I had my .env file in YAML format instead of JS.
It was
REACT_APP_API_PATH: 'https://my.api.path'
but it needed to be
REACT_APP_API_PATH = 'https://my.api.path'
For people who apply all those answers above and didn't work just restart the terminal of npm start, stop the live server and run it again and it will work because it works for me
Regarding env-cmd. As per VMois's kind post on gitHub, env-cmd has been updated ( version 9.0.1 as of writing ), environment variables will work as follows on your React project:
"scripts": {
"build:local": "env-cmd -f ./.env.production.local npm run build",
"build:production": "env-cmd -f ./.env.production npm run build"
}
In your package.json file.
1- Make sure .env file is based your react app root directory
2- for react app you need to prefix REACT_APP_ to the variable name. ex: REACT_APP_API_URL
3- kill server and npm start again after .env file modify
For this purpose there is env-cmd module. Install via npm npm i env-cmd then in your package.json file in scripts section:
"scripts": {
"start": "env-cmd .env.development react-scripts start",
"build": "GENERATE_SOURCEMAP=false env-cmd .env.production react-scripts build",
}
In your project root you have to create two files with the same env variables but with different values:
.env.development
.env.production
Then exclude them from public. For this in your .gitignore file add two lines:
.env.development
.env.production
So this is a proper way to use different env variables for dev and prod.
While working with .env file, be it frontend or backend.
Whenever you modify the .env file, you must restart the respective server for the changes to take effect in the application.
Hot reloading doesn't read changes from .env file.
If the .env file works but .env.development or .env.production don't, then create an empty .env file alongside those two. I don't know why but this works for me.
Your project can consume variables declared in your environment as if they were declared locally in your JS files. By default you will have NODE_ENV defined for you, and any other environment variables starting with REACT_APP_.
Reference: https://create-react-app.dev/docs/adding-custom-environment-variables
that doc creates confusion.
So you actually need to put prefix REACT_APP_ within the .env to make it work.
And make sure that you restart the test/dev/prod server because the .env content change was loaded on the build stage.
And remember not to have semi-colon after the API key in the env-file.
REACT_APP_API_KEY = 'ae87cec695cc4heheh639d06c9274a';
should be
REACT_APP_API_KEY = 'ae87cec695cc44heheh1639d06c9274a'
that was my error
when you get undefined from the environment file then just stop the terminal and restarts with npm start command.
For any VS Code users, be aware that the .env.local env file is auto-sourced, but also auto-ignored from search results when you do a project wide search for MY_ENV_VAR(probably due to it being git ignored by default). This means that if you have MY_ENV_VAR= in your .env.local like me and forgot about it, it'll break things and you'll spend 15 mins being very confused.
Was struggling for a good hour before I noticed my kind IDE added an import:
import * as process from "process";
just remove it and you're fine, if that's your case as well.
After you add .env file, you need to
restart your application
kill the server
run npm start again
And it should work
I had same issue that I wasn't able to access .env variable in App.js.
and I had solved the problem use create correct .env file.
in my case I was copy file from different OS and use in ubuntu system
so just I did "sudo touch .env" and added my variables and restart app again then it's working for me.
I forget to add process.env.
It looks like this
const domain = process.env.REACT_APP_AUTH0_DOMAIN;
first step:
in your .env.local file add REACT_APP_your_API_key in this way
second step:
Add your config file ${process.env.REACT_APP_Your_API_key}
the third step:
must restart your React App and then Test whether it works.
mainly, I forget the last step
If none of the solutions above worked for you, give these potential solutions a shot:
Make sure all the import statements within the file that is requiring defined environmental variables are being imported from the local project and not some other project(VSCode wrongly autocompleted some of my import statements in this manner)
Try exiting your current Terminal instance and running the app in a new instance
I made the silly mistake of naming my file secret.env because that's how I always did it in Node.js.
After changing the name to .env, restarting the terminal, and running npm start again, everything worked like a charm
I didn't get any value back as well. For some reason, I thought the environment file should be dev.env, qa.env etc. Actually, it's just ".env". That's that. In case some else makes this mistake.
create-react does not supports hot reload feature .env files since they are not Javascript. So, when you change the env files make sure to manually start your server to see the effect of new changes.
In my case, a manual restart of the server worked fine :)
What worked for me was to install env-cmd and after that in my package.JSON add the following line of code
"scripts": {
"start": "env-cmd -f .env.development react-scripts start ",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
}
As of latest react-scripts (3.2.0) it's a simple as putting say
PORT=4000
BROWSER=none
in your .env or .env.development file (..etc) which is supposed to be in the root folder.
It will NOT work with then REACT_APP prefix (the docs are outdated I guess) and it does NOT require any extra npm packages (react-scripts already includes dotenv 6.2.0)