Setting up Environment Variables is the best practices in web dev world for many reasons, let me show you how in this article … without pain.
So why I need to set it up?
First, for security reason, obviously. We don’t want people see our “API Key” or “Encryption Slat” inside our code, right?
Second, 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 I should set it up?
Right after create 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 the whole 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 for testing purpose, 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
file to avoid it recorded by “git” or upload to Github.
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.
Ok, this .env file is safe for development now, how about the production or test environment? Let’s move on.
Fifth, setup production variables manually … in the server.
Yes, there are no other ways (There might be some, but we don’t want servers access our machine anyway). Fortunately, the setup are dead simple.
Setup in Netlify
Setup in Heroku
Note: There would be similar process for test environment, ie, we need to set it up manually. But the good thing is, we only need to do it once.
Sixth, if we still can’t manage to make the variables work, there might be some restrictions come from other factors.
(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 we might need to restart the servers entirely.
Final word …
At 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 ofter 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 more solutions or pitfalls)