Environment Variables not working in production

Support
, , , ,
#1

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: https://clutchweather.netlify.app/
Here are images from browser for more details:

console error
console error1068×108 21 KB

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:

 "scripts": {
    "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?

#3

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?

#4

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.