Setup Environment Variables for Web Dev projects [A How To Guide]
Setting up Environment Variables is the best practices in web dev world. But it seems troublesome for most people in practices, so few applied it. Well, it actually not that hard and it is necessary in most cases, let me show how you in this article.
So why it is necessary?
First at all, it is for security reasons. Obviously, you don’t want people see our “API Key” or “Encryption Slat” in our code, right?
Secondary, for better development experiences. We usually would set different databases or servers for related environment. Put those address in the code is one option, but need to switch back and forward every time we change the environments, that is a pain.
Ok, when we should set it up?
Right after creating the project folder, Period.
Wait … can we set it up right before our projects go live? En … No. Because remember if we are using “git” for our projects, people can not only see our final code but also the entire history of our codes.
Good, so how we can set it up?
First, create .env file in project root folder, and put at least one variable there to get going (you can always add more variables when project grow). For example:
BASE_URL = http://localhost:3000
NWE_VAR = 1234
Note: Conventionally, make all the variables in Upper Case.
Second, initial the project, start to write some code to test the environment variables.
Like example below:
prefix is the key to access the environment variable, we can apply this rule in project-wide.
At this point, we might or might not see the result (“1234”) come out from console, if yes, just skip following step, otherwise, move on.
package into your project.
# with npm
npm install dotenv
# or with Yarn
yarn add dotenv
And add following line in our code as early as possible, more details here
file to avoid it recorded by “git” or upload to Github.
Add following line to our
file (create one if don’t have)
Note: This step is important and should do it as early as possible. Otherwise, all we did earlier would be useless, because “git” will log our files every time we commit.
And optionally, you might consider adding more .env files for different environments, such as:
This is convenient for checking all the settings in one place later.
Ok, once these .env files are safe in local drive, let's move on the setup those variables in Production and Test environments.
Fifth, Setup Environment Variables in different environments.
For most cases, the server we need to run our apps already come with the support of Environment variables, such as Netlify, or Heroku.
All you need to do is manually copy the values in their console panel. (It might be a way to do it in CLI, I will update it later once I found it).
Setup in Netlify
Setup in Heroku
If you build the testing environment yourself or just use the same services above, repeat the same process above. (More detail, I might update later)
Sixth, if you still can’t manage to make the variables work, there might be some restrictions come from other factors.
For example, if the project created by create-react-app
, the variable names have to start with
(more detail here
), so our .env file might need to change the name as below:
REACT_APP_BASE_URL = http://localhost:3000
REACT_APP_NWE_VAR = 1234
Similar rules might also apply to other frameworks, go checkout their docs.
Or you might need to restart the servers entirely.
Final word …
In the end, you might wonder, this guide seems didn’t tell much … or too simple …
Well, that might be exactly my purpose — Setting those up are really dead simple, we should do it as earlier as possible (even in our first project).
I saw too many, too often that people leaking their API keys in their repos … that I can’t resist to write this article out, ^z^.
Finally, I can’t guarantee the steps above will work for everyone in every project due to my limited experiences, but if it does, please help spread the words! Thanks in advance!!!
(Any comment or suggestion are very much welcome, I will come back update this articles once I found better solutions)
Subscribe to get your daily round-up of top tech stories!