I’m trying to build a React weather app using Open Weather Map’s API. In concurrence with best practices, I want to store the API key in an environment variable (in a .env file). I also installed dotenv and called the environment variable:
Nope. It’s undefined. And I found this thread on Stack Overflow and it said it’s undefined because " the Node.js execution environment does not know the newly added [APP_ID]."
So I tried the steps they suggested in the thread by exporting APP_ID from the .bash_profile but it’s still undefined.
hi @Dusch4593
if your are using react with create react app then , you should prefixe your API key name in .env file with REACT_APP_{YOUR_API_KEY_NAME} , because create react app will ignore all env variables not staring with it
You really should not be adding the API key to the React app anyway. You want that to be hidden from the browser. If you still want to use one locally, you can also do something like the following on the command line
REACT_APP_APP_ID=123456 yarn start
Then in your App.js file, you would reference process.env.REACT_APP_APP_ID.
You want a proxy server. You would have your own API that makes the fetch call on the server using the API key so the browser never sees it. Your React app would make a request to your API instead.
That is what I recommend, but you do not have to do that. You just run the risk of someone else using your key for there own site and maximizing out the requests/hour limit for the free version of the API. If you already have a backend for the other project, it is as simple as adding another route.
So I began to work on the backend server but I’m running into a really confusing situation: I’m getting a successful fetch, but when I try to log the response, I’m getting this message on my terminal:
Missing required request header. Must specify one of: origin,x-requested-with
Again, according to my local server, the fetch is successful:
//Open Weather Map Route
backend.get("/", async (req, res) => {
try {
// Using node-fetch with Pittsburgh's city ID on Open Weather Map along with API Key (APP_ID)
const response = await fetch(`https://cors-anywhere.herokuapp.com/https://api.openweathermap.org/data/2.5/forecast?id=5206379&APPID=${process.env.REACT_APP_API_KEY}`);
// The API returns stuff we don't care about, so we may as well strip out
// everything except the results:
console.log(await response.text());
return res.json({
success: true,
})
} catch (err) {
return res.status(500).json({
success: false,
message: err.message,
})
}
})
I looked online for an explanation of why I’m getting this message on my terminal (I’m getting it in Postman, too) but I can’t understand why?
Whether you intended it or not, you’ve answered my question by asking me why I was still using cors-anywhere.herokuapp.com Now I’m seeing the data logging to my terminal!
If you have a backend server, you can make your fetch call (from the front-end) to your back-end API that would make the actual request to the Open Weather Map API. This is what you already did in the other project.