Why your environment variable doesn't work in production.

There are many reasons why your environment variable might not work in production. Maybe it works in development, but not in production? There’s a lot of room for error. This article should help you understand why your environment variable might not work in production.

Valid formatting and structure for environment variables

ENV_VARIABLE_NAME='value'

The standard for setting environment variables is to format the variable name to be all uppercase with underscores between words. Notice how there’s no whitespace between the variable name and the value. The variable name is proceeded by an equals sign, then comes the value for the variable. The value should be surrounded by single or double quotes. Often the hosting provider will deal with this, meaning you won’t need to add any quotes. But if you do, you can use single or double quotes.

Environment variables are structured this way due to their original use in the Bash programming language, where for example even whitespace is a significant part of the syntax.

Case 1 - Environment variable is not set

This is the best-case scenario. If the environment variable is not set, it can be set however the best practice is to set it with the hosting provider you’re using.

For example with Vercel, you go to your project, to Settings and then Environment Variables. You can set the environment variable there.

It’s also important to note that after you set the environment variable, you will likely need to restart your project (often done by redeploying it) to allow your hosting proivder to use it in your project.

Case 2 - Environment variable is set, but incorrectly

The second best-case scenario is if the environment variable is set, but the value is incorrect. This can obviously be fixed by changing it to the correct value. But, the correct value is not always so clear. Should you be using quotes, single quotes perhaps, or none at all? It can be a little tricky to figure out what the correct format is.

As mentioned earlier, environment variables are very sensitive to any extra characters, including whitespace. From past hours of debugging, even a carriage return character (which is invisible may I add) which may exist at the end of the variable, can result in the environment variable not being correct. It’s genuinely that strict.

CORS Errors (honorable mention)

CORS errors are caused entirely by the backend. To follow best practise, you should not be trying to fix CORS errors by using funky scripts or front-end workarounds. CORS is an important browser security feature, it’s made to protect against malicious attacks.

Final thoughts

As explored here, environment variables can sometimes be a bit of a mystery. They might not always be set correctly, and when they don’t work, it can be tricky to figure out why. Hopefully by reading this post it’s helped you to figure out why your environment variables weren’t working.