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
As far as sanity check goes, I do have the following setup:
credential in .env are name correctly for a React app: REACT_APP_BASE_URL="https://api.openweathermap.org/data/2.5/" REACT_APP_API_KEY=secrect-api-key
on site setting Environment Variables are defined as how they are in .env file:
key: REACT_APP_API_KEY
value: secrect-api-key
key: REACT_APP_BASE_URL
value: https://api.openweathermap.org/data/2.5/
if it matters, package.json start and build scripts are:
Hi, @simonxcode. The environment variables exist in the build system alone. They do not exist anymore once the build completes.
If you want to keep your API a secret (meaning not embedding in in the client side javascript where anyone could steal it) then the solution is to use Functions to do so.
There is a support guide about this here:
Would you please read that support guide above and then let us know if there are other questions about this?
Thanks @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.