I have a weather app built with React and Express which uses a secret API key. Everything works as expected when running locally on Express server. However when testing in production I am getting the following error in console:
xhr.js:210 GET https://clutchweather.netlify.app/weather?q=atlanta 404
Here is the URL to live site:
Here are images from browser for more details:
As far as sanity check goes, I do have the following setup:
credential in .env are name correctly for a React app:
on site setting Environment Variables are defined as how they are in .env file:
if it matters, package.json start and build scripts are:
"start:server": "node index",
"build": "react-scripts build",
Is there anything else I may be missing? Or perhaps issue has nothing to do with env var whatsoever?
@simonxcode. The environment variables exist in the build system alone. They do not exist anymore once the build completes.
There is a support guide about this here:
Last reviewed by Netlify Support: Jan 2022
With Jamstack sites, using API keys/tokens to make API calls to other services is a frequent pattern. In some cases, you may want to hard code the keys in your html, when invoking those API calls - which on a service like Netlify means these keys are now public. Anyone can open their browser dev tools and view them, and of course this can lead to someone abusing this access.
In some cases, this is fine. For instance, some types of Firebase and FaunaD…
Would you please read that support guide above and then let us know if there are other questions about this?
@luke and my apologies for the very delayed response. Netlify Functions would have been a viable option, but I did decided to host site on a platform that supported Node.