I am planning on deploying a MERN stack app to heroku (followed Traversy Media on youtube) and I was wondering if what is the best practice to hide api keys (google map) in the client side?
I know how to add env variable to the server side of MERN in heroku but is it possible to add env variable to the client side of MERN?
yes you can add .env file in the root ...
remember you dont need to install any npm package , because .env already comes with react js
create a .env file and define your variable in it
must define .env in the .gitignore file
use your .env variables using process.env.VAIRIABLE_NAME
Just create a .env file in your react app's root folder and you are golden. You can access the env variable using process.env.Var_name.
Related
I have created a react app using create-react-app. I'm using react-admin to develop my admin panel. I want to use some environment variables. Here's my .env file:
REACT_APP_API_URL=http://localhost:8000
REACT_APP_BRAND=Guli
REACT_APP_SLOGAN=Financial transactions, redefined
And I also have .env.test and .env.production for staging and production environments, and I only override API URL in those files.
Now I want to use these variables inside my react app. I'm using them inside index.html and DataProvider.js that I use for react-admin.
In index.html I use:
<title>%REACT_APP_BRAND%</title>
and in DataProvider I use:
const apiUrl = process.env.REACT_APP_API_URL;
// using apiUrl in the rest of DataProvider.js
The problem is that none of these variables are read from .env file. In index.html I see the title of my app to be exactly %REACT_APP_BRAND%, and the calls to my API go to undefined/users for example which means that process.env.REACT_APP_API_URL is not loaded.
What sould I do?
How to use multiple .env config files correctly for development / stage / production. I realize I need a .env file, use dotenv (at least), but when I start hosting my app (React), I use localhost: 5000 urls, but I have to use some service-host urls which I use.
Your .env file is not commited.
So on you production build, you will configure your .env file to contain your production details. Again, .env files are private.
Your development .env file will contain details that you use for your localhost.
You can also, set a variable called to say PROD_BASEURL and then utilize an IF statement in your code.
if(PROD_BASEURL) {
do stuff
}
To answer your question. No, you won't use multiple .env files to separate PROD/UAT/DEV
Why do you want to use multiple .env files ?
The general recommendation is to have one unique .env file.
Should I have multiple .env files?
No. We strongly recommend against having a "main" .env file and an
"environment" .env file like .env.test
link : https://github.com/motdotla/dotenv#should-i-commit-my-env-file
Use a package like dotenv to manage your env variables. There are other package that do the same thing.
And you define your production env variables on your other, production server. The general recommendation is to have one .env file per host.
If you still need to however, you can use the following dotenv configuration :
require('dotenv').config({ path: '/custom/path/to/.env' })
Remember to not store any secret in your .env file in your react app.
I'm trying to use process.env.REACT_APP_* process env variables in my react app after building it with npm run build on heroku, but my setup has a server and a client with all of the react code in a separate client folder in the root:
root
└ client/
└ build/
└ server.js
Even in my local development server this isn't working properly and I'm having to use a separate .env file in the client with the same key/value pair just prepended with REACT_APP. On my local, I'm running the server and the client concurrently, but on Heroku, it's built into a static app under client/build. The config vars that I defined on the heroku site is evidently not accessible in the static app because when I console log the process.env variable, I only see these variables:
NODE_ENV: "production"
PUBLIC_URL: ""
WDS_SOCKET_HOST: undefined
WDS_SOCKET_PATH: undefined
WDS_SOCKET_PORT: undefined
__proto__: Object
I have several REACT_APP_* variables defined on the heroku site, but none of them make it to the static build, but they're perfectly accessible on the server.
I need a way to access the variables on the static site and I'm currently exploring the possibility of manually writing a .env file to the client folder via bash scripts before running npm run build, but I ran compgen -vand set and viewed the values of all of those variables and the config vars don't appear to be any of them.
EDIT: I want to also note that I've tried this on a static-only heroku deploy which does NOT have a server and the root folder is the react app itself and I'm able to see my config var when I console.log(process.env):
NODE_ENV: "production"
PUBLIC_URL: ""
REACT_APP_TEST: "HELLO WORLD" <<===========
WDS_SOCKET_HOST: undefined
WDS_SOCKET_PATH: undefined
WDS_SOCKET_PORT: undefined
When heroku runs "npm run build", it is actually building the server.js file. Hence, the environment variables are injected in to server.js. If you console.log them some where inside the server.js, you will have them. The client is not actually build using the heroku, so no environment variables are injected. This is normal. You can change your project folder structure to fix this.
So I'm deploying a MERN stack app to heroku, and I have two .env files. One is for the nodejs backend, and one is for the react frontend. In heroku, you can set environment variables but they act essentially as a .env file in the root directory. However, my client folder is nested inside the node.js
If you're using react-scripts, you just need to preface any React env variables with REACT_APP_. This is how it knows where they belong when it is building your app. So just add them to your code and to the config vars on Heroku as REACT_APP_NAME_OF_YOUR_ENV_VAR and you should be good.
Here's the docs from Create React App on how to do it using react-scripts and adding the env variables and here it is for Heroku
I want to deploy my app using Heroku but I have kept my API keys in .env file which will be ignored by .gitignore file while pushing to Heroku and after deploying my app on Heroku, it is no longer able to read my API keys and app crashes? What to do in this case? How to use it correctly?
If your not storing your .env file in your git repository (which is absolutely the correct thing to do) then you need to manually configure the .env file once you deploy it.
In the instance of Heroku you can set Config Vars:
Configuration and Config Vars
If you do it that way I believe you have to access the vars in a different manor to env values but it has a local mode so that shouldn't be a problem.
You have to specify all the API keys in your START script in "package.json". Like below
"start": "MONGO_USER=abcis app.js"