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?
Related
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 am using dotenv npm package to hide sensitive data in my app. The config variables for backend and frontend/React are defined locally inside .env file. The app works fine locally.
I deployed my app to Heroku and added config variables manually to Heroku.
I have 4 variables, 3 for backend, 1 for React. While the VARs for backend works properly in Heroku, the VAR which I use in React to fetch data from external API returns undefined.
React var has a prefix REACT_APP_ and as I said above it works fine locally and I can fetch data from external API. The only problem I have is, it doesn't work in Heroku.
I fixed the problem by removing the requirement for dotenv module in front-end. Simply I removed the code below and deployed to Hereoku again.
const path = require('path');
require('dotenv').config({path: path.resolve(process.cwd(), 'client', '.env.development'), debug: true});
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.
I'm trying to use environment variables in create-react-app.
I've prefixed all of the variables in my .env file with REACT_APP_ and installed/required dotenv.
However, I'm suspecting that the reason why my .env values aren't being read is because the script in which I'm calling them from isn't in the root folder where my .env file is located.
There's a quick overview of my project structure below
ROOT:
.env
VIEWS (folder):
view.js
I'm trying to access the .env variables in view.js by calling process.env.REACT_APP_MYVAR but it either doesn't return a value or returns something that isn't a string (which is the error my API is throwing, but it could be because that call is returning undefined)
Is this a known issue or is there any way I can fix this? I could just take the script out of that folder and put it in the root of my app but I'd rather keep the structuring of the app consistent
You don't need to "install/require" dotenv. If you are using create-react-app, this functionality is available with no additional install required.
You indicate that .env is in your root, but I suspect it may not actually be in your root. From your description, it sounds like you have it in your root source folder, but the .env file belongs in the root directory of your app (i.e. the same directory as your package.json file).
Here's a CodeSandbox (using create-react-app) that demonstrates using an environment variable in a nested file:
The contents of this sandbox includes:
.env (in the same directory as your package.json file)
REACT_APP_MYVAR=Here is my value for REACT_APP_MYVAR
src/index.js
import React from "react";
import ReactDOM from "react-dom";
import View from "./views/View";
function App() {
return <View />;
}
const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);
src/views/View.js
import React from "react";
const View = () => {
return <div>My Var: {process.env.REACT_APP_MYVAR}</div>;
};
export default View;
The result that gets rendered is:
My Var: Here is my value for REACT_APP_MYVAR
The environment variable can be used in any of the js source files regardless of level of nesting.
If this doesn't help with your problem, please show the exact contents of your .env and view.js.
remove dotenv. Here is my git-repo for accessing REACT_APP_KEY. tell me if this solves your problem.
git-repo
Change .env to .env.development.local
Actually .env also work but if you have other .env.* file it will override .env,
.env is least priority in create-react-app
if you run project with npm start this file .env.development.local will override other env files
priority goes like this, form left to right
npm start: .env.development.local, .env.development, .env.local, .env
I have a single page application which is a react app. I am using webpack for it. I am facing problem in configuring server API URL for every stage like test, beta and prod.
Is there some standard way of doing it?
Create a .env and add your variables there ensuring that they are prefixed with REACT_APP e.g. REACT_APP_SERVER_URL=https://example.com
You can create multiple env files one each for dev, prod, test etc. like .env.local, .env.prod
The env files injected from your npm commands
npm start: .env.development.local, .env.development, .env.local, .env
npm run build: .env.production.local, .env.production, .env.local, .env
Use the variable in your code like
if (process.env.NODE_ENV !== 'production') {
analytics.disable();
}
OR
<b>{process.env.NODE_ENV}</b>
Refer https://github.com/facebook/create-react-app/blob/master/packages/react-scripts/template/README.md#adding-development-environment-variables-in-env
Do that based on NODE_ENV.
declare an url file in your application for the basepath of it.
const baseURL = (__DEV__) ? url1 : url 2;
or a switch statement, does'nt matter.
Do be able to have access to these variables, you have to use DefinePlugin from webpack.
new webpack.DefinePlugin({
envType: JSON.stringify(process.env.NODE_ENV)
})
or something like that...