Simple question,
I have the following environment variables:
REACT_APP_API_URL=http://localhost:1234
Although this evaluates to undefined?
console.log(process.env.REACT_APP_API_URL)
Using create-react-app, from their documentation this is all I need to do? .env file is in the root directory, react even re-compiled when I changed it.
I believe you have to include your environment variables in global process.env. For this you can use some sort of package like dotenv.
This blog link would be helpful. https://trekinbami.medium.com/using-environment-variables-in-react-6b0a99d83cf5
inside your app can you try to console.log it like this?
const {REACT_APP_API_URL} = process.env;
console.log(REACT_APP_API_URL)
Grabbed from here:
https://adostes.medium.com/using-environment-variables-in-a-react-application-ac3b6c307373
Can you provide some screenshots? It seems to work fine for me. Please see the below screenshots.
Make sure you have the .env file in your root folder (same as where package.json is) and not in /src. Then double check that you have restarted the server (kill the npm start and start again). If it's not that, you will have to share more information, because it doesn't seem to be anything wrong in the few bits of information you have shared.
Related
I am working to build a weather app in react, and I need to use 2 api keys. I have a .env setup and it is working fine for the first key, but I cannot seem to get my second key to return a value, it keeps showing as undefined when I make my fetch call.
My .env is setup as below. I know that the naming convention needs to include REACT_APP to be picked up but I am unsure of how to differentiate the two of them and have them still be picked up.
REACT_APP_APIKEY={MyOpenWeatherAPIKEY}
REACT_APP_APIKEY2={MyUnSplashAPIKEY}
Any idea of how to resolve?
EDIT:
For anyone having the same issue. the answer is the right way to have the keys setup in the .env file. but do not forget to kill your app and then restart it after making changes to the .env file.
try this inside your .env :-
REACT_APP_OPEN_WEATHER_KEY=whateveryouropenweatherkeyis
REACT_APP_UNSPLASH_KEY=whateveryourunsplashkeyis
note that curly braces are not required here
then you can access them anywhere in your code like this : process.env.REACT_APP_OPEN_WEATHER_KEY , process.env.REACT_APP_UNSPLASH_KEY
NB : make sure .env is in the root project directory i.e. same with package.json
no need to add to the variable REACY_APP you can define the variable name in the env file
OPEN_WEATHER={APIKEY}
first you need to install dotenv package
npm install dotenv --save
add this line to your app :
require('dotenv').config()
and finaly use this command to get the variable value
process.env.OPEN_WEATHER
let me know if you need any other help
I am encountering something strange here and hope to find out if I have missed anything. Here is the thing, I have a .env file with this value here:SITE_URL=http://localhost:5000 and when I tried console.log(process.env.SITE_URL), it returned undefined. But the strange thing is when I changed .env file value to REACT_APP_FETCH_URL=http://localhost:5000 and did a console.log(process.env.REACT_APP_FETCH_URL), it returned http://localhost:5000.
I am not sure what is going on? Any help greatly appreciated and many thanks in advance.
I'm guessing you're using create-react-app. In CRA you need to prefix your environment variables with REACT_APP_ in order for them to be accessible under provess.env.
You can check documentation about it here: https://create-react-app.dev/docs/adding-custom-environment-variables/
I'm using React JS and when I build my app to deploy, I use react-scripts as follow below:
react-scripts build
And my chunk files are something like:
0.cebdafcf.chunk.js
1.fa48de00.chunk.js
2.98b9bea7.chunk.js
...
52.9ca2408d.chunk.js
App.7b21e172.chunk.js
dashboards.f6142b89.chunk.js
user-forgot-password.06d87a22.chunk.js
views.16dc12b2.chunk.js
...
But every time I build, the hash suffix are the same, for example, I'd like every build change the hash for App..chunk.js
Is there any way to do it?
I've tried the option described here: Github Renamer Answer, using the lib renamer, but it didn't work to update the hash name for all chunk files.
Thank you in advance for helping
What I've done to solve was: First of all, I had to eject react so on this way I had access to change the webpack.config and after I've changed on webpack.config everything with
[contenthash:8]
to
[contenthash]
So, on this way, everytime we have a change on the file, the hash config chunk will be different. And for me, it's enough.
I don't know if someone has another solution, better or simpler. If yes, post to help other people.
So I have a file named .env with the following contents
NODE_PATH=./src
NODE_ENV=what
TEST=test
And I am calling that in my index.js in my react app.
require("dotenv").config();
console.log(process.env);
...
shows the following output
NODE_ENV: "development"
PUBLIC_URL: ""
I thought maybe I declared another .env file somewhere else, but thats not the case. I searched my project for the PUBLIC_URL and it's not located anywhere in my project. I don't even know what else to check at this point.
In react code you have to compile the environment variables in at, well, compile time because at run-time there it is only possible to access a fake process.env object. Unless you are using server side rendering.
See also: Passing environment-dependent variables in webpack
If you're using CRA then you'll need to do: REACT_APP_TEST=test and reload the dev server to have it show up as expected in your app.
If you have used create-react-app for bootstrap your project then you have to use environment variables like REACT_APP_NODE_ENV=development.
After adding any new environment variable, you have to restart the development server.
I'm getting error while searching for location It is showing that Can't find variable config. Any help will be appreciated.
If you look at the code, in App.js line 20 it does:
import config from './config';`
and then it later uses that import on line 84:
axios.get(`https://api.wunderground.com/api/${config.apiKey}/geolookup/q/${this.state.latitude},${this.state.longitude}.json`)
Since there is no config.js file in the repo, it seems that is a file you need to create yourself to store app secrets, so it's a good thing it's not checked in since you wouldn't want others knowing your secrets.
If you wanted to be pretty awesome, you could create a PR against that repo that explains what needs to be done in the README so that others who use that code won't have the same problem :)
The config file is missing.
You will need to create your own config file which holds the API key which you will receive from Wunderground's API.