loading...

Discussion on: How Can I Access Environment Variables in My Static Website?

Collapse
eruizdechavez profile image
Erick Ruiz de Chavez

As far as I understand you are building your site statically, and having the JS code pull the podcast data as a JSON response from some other place, BUT this other place requires an API key so you can fetch that data.

As you and @mellen mention, the only way to effectively hide this is to proxy that request on your server so you "inject" the key while keeping it hidden from the browser.

Thinking a bit "out of the box" you still have one more option, that is, pre-rendering the json file before publishing it, which is similar to what Jekyll, Hugo, Gatsby, etc. do. The new workflow would be as follows:

  • You publish a new podcast episode 👏🏻🎉.
  • A build is started (triggered by a script monitoring your RSS, a WebHook received by your build system, or you pushing a button 😉).
  • The build process fetches the new data with the hidden API key and the result is stored as a static JSON file.
  • The updated static site, including the new JSON, is published somewhere.

I have not used GitHub actions, but I am 99% sure it can be done with those, and if not, I can help you figure out how to do it using other free tools.

Collapse
eruizdechavez profile image
Erick Ruiz de Chavez

To give a bit more context (after looking at your site), your file podcast.js would have an empty array episodes instead of the current content, and your build script would dynamically replace it with the actual content of the array fetched from the API and then publish it to your server.

Collapse
dengel29 profile image
Dan

This is totally doable via Github Actions, and Github gives you a way to have secrets or environment variables accessible via the Action. I have one that calls Airtable twice daily using the API key, pulls the json into the repo and rebuilds the website with the updated information. Totally viable and can be set to run on a schedule so you can set it and forget it!