This post was originally published on October 9, 2020 on my blog.

Good morning and happy Friday! I've run into a bit of an issue - that I know I've solved before by putting a sort of band-aid solution on it - but I want to solve it fully now and I'm running into a bit of a wall.

Essentially, I have a static website running on simple HTML, CSS, and JavaScript. I'm currently fetching data from my podcast host API so that I can display podcast episodes without having to hardcode all of the podcast data into my own JS files.

Now, where I'm running into my issue is that I want to use an environment variable for my API access key in a .env file, but I can't use the 'require' function in my JS page because 'require' isn't available in the browser (I think that's what the issue is).

From where I stand now, I'm going to need to incorporate Node or I can rebuild the website as a React app and then install dotenv as a package and simply import it and the environment variable into my app.

I'd like to figure out the steps for adding it to my static HTML/CSS/JS site, if possible - but I'm not sure how to or even really how to phrase the question when I try to look it up.

Any guidance or insights appreciated!

P.S. Did you know I have a podcast with new episodes each Wednesday? Go listen right over here >>