Local Environment Variables… without the local! (Part 2)

For a straightforward API call with my API key included right in the URL, I had no problem fetching data using an environment variable (stored both in Gitpod and in Netlify) in the JavaScript code block of my Astro page. (You can see how it’s used in Part 1.)

But, using the eBird API requires a call with Headers which I am making within a React component. You can see an example of how I fetch from eBird in this experiment, using my API key’s value as a string.

Problems arose while attempting to replace this string with an environment variable. While this variable appeared to be available upon initial render, almost immediately, the process object was not available to my code, causing my component to “disappear” from my Astro page and a console message that process was not defined. The only version of my code that successfully ran used my API key directly as a string in my Header, which obviously exposed it in my source code. Here’s how the friendly Gitpod community contributed to my site and at least solved the problem of the exposed API key… (embedded as a CodePen to avoid some Markdown woes.)

See the Pen Untitled by Sarah Rainsberger (@sarah11918) on CodePen.

This script runs on start and build, by adding the command to my package.json:

{
  "name": "sastro",
  "version": "1.0.0",
  "private": true,
  "description": "Sarah Rainsberger's personal website",
  "main": "src/pages/index.astro",
  "scripts": {
    "start": "bash parseenv.sh astro dev",
    "build": "bash parseenv.sh astro build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "dependencies": {
    ...
  }

This script looks for any key(s) listed listed within it, and anywhere in my code I have typed ({}).KEY_LISTED_IN_THE_SCRIPT it temporarily swaps out that string with the actual API key’s value from my environment variables that are held by both Gitpod and Netlify. The script also provides a helpful message indicating all files that have been modified to temporarily use the value instead of the variable.

When I CTRL-C to terminate the server running dev or build, the script executes a reverse swap so that my code is reverted to using environment variables again. And again, the script provides confirmation of each file that has been reverted.

So, I haven’t yet figured out exactly at what stage in my React component’s lifecycle process becomes unavailable to it, and how being rendered within an Astro page relates to it. But, at least for the purposes of building and deploying, my React app has been given the API value it needs to execute its search, and my code visible on GitHub only shows a reference to the environment variable.

I understand that this solution is “risky and invites failure.” Here are a couple of things that immediately come to mind that I now have to be careful about:

• I have to remember not to commit code without first CTRL+C stopping the server!
• Since many of my blog posts include code snippets of the material I’m discussing, I have to remember not to type out the actual string {({}).THAT_KEY} in my code sample. (Whereas normally, that would be a totally safe thing to do.)

But, until I have a better solution, or at least a better understanding of the problem, this does achieve the goal of storing my eBird API key as an environment variable and not exposing it by committing it to source.