Search code examples
reactjsapiherokucreate-react-appapi-key

API Key not working in HEROKU app built with create-react-app

I just deployed a React app on HEROKU (the app is made from create-react-app).

My app's file are on Github and I set up HEROKU to point to that github repo.

My app uses an API key. Normally (when I spin up the project locally) that API key is being accessed from an .env file at the root level and I access it with the dotenv package. However I'm not committing this .env file to github (.env is in gitignore).

I understand that HEROKU needs to know about this API key. So, I went to the settings page of my HEROKU app and added the API key there. However I'm not sure I'm doing this correctly since the API is not working.

This is how I'm entering the API key in HEROKU's settings (I've also tried this with just REACT_APP_LASTFM_API_KEY - not the process.env. before it): enter image description here

And this is how the API key is being used in the app (the variable is process.env.REACT_APP_LASTFM_API_KEY)

const url = `http://ws.audioscrobbler.com/2.0/?method=artist.getinfo&artist=${artist}&api_key=${process.env.REACT_APP_LASTFM_API_KEY}&format=json`;
Solution

  • The environment variables declared in the Heroku settings are specific for processes that run on Heroku itself.

    Since your app will run on a client's browser, the react app will look for those environment variables in the client's browser.

    The only job of Heroku is to host & serve static files. These static files that Heroku serves must have these environment variables embedded in them & this is exactly what CRA react-script does for you.

    Please know that this isn't specific to just Heroku, the same holds true for say Azure or Cloud run.