I have published a static website built with 11ty (Node based SSG) and npm. Everything works fine except for the setup of an environment variable the JS script can’t seem to access. I get the title message (Process not defined) when executing the script on the browser.
I have a different Node web service project that I setup the same way, just defined the environment variables through the dashboard, and it worked fine. I’m accessing them through process.env.VARIABLE_NAME. Is there any other step I need to do to make it work with a static website?
Setting the environment variable in Render for a static site will only make that variable available while building your static site.
If you want this value available in the browser, you’d need to include a step as a part of your build command to write the environment variable to a javascript asset that’s served with your static site.
Let me know if you have any questions about this or if I’ve misunderstood your question.
The idea is you’d write a simple script to inject the Environment Variable value into some Javascript for the frontend, then run your usual build command.
For a very simple example, I have a Jekyll static site. Usually, it’s built with jekyll build. If I wanted to expose a Render environment variable called TEST_VAR on the index page of my site I could write this Bash script to add a bit of Javascript to index.html on each build, then run the typical build command.
#! /bin/bash# build.sh# inject the environment variable into a static assetecho "<script>const testVar = '$TEST_VAR'</script>" >> index.html# run the rest of the typical buildjekyll build
Then in the Dashboard, I’d replace my build command with ./build.sh. When I visit my static site, I’ll see testVar has the value I configured in the Render Dashboard for the TEST_VAR environment variable.
You could (and would need to for a real application) get a bit more sophisticated with how you inject variables, but this example illustrates the simplest approach I could think of. For example, you might inject all your environment variables into a dedicated file, which all your other files then load to make the variables available on all pages. I could also imagine swapping a Bash script for a Node script, then taking advantage of some templating, etc. It all really depends on what you need to accomplish.
Lastly, you’ll also want to be careful not to expose any secrets in your Javascript, as there’s nothing stopping anyone from inspecting the values.