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. Note: In this article, I will only , I might update other languages once I figure them out later. focus on Javascript environment So why it is necessary? Obviously, you don’t want people see our “API Key” or “Encryption Slat” in our code, right? First at all, it is for security reasons. 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. Secondary, for better development experiences. 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? , 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: First = http://localhost: = BASE_URL 3000 NWE_VAR 1234 Note: Conventionally, make all the variables in Upper Case. initial the project, start to write some code to test the environment variables. Second, Like example below: ( ); console .log process .env .NEW_VAR Yes, prefix is the key to access the environment variable, we can apply this rule in project-wide. process.env 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. install package into your project. Third, dotenv npm install dotenv yarn add dotenv # with npm # or with Yarn And add following line in our code as early as possible, more details . here .config() require ( ) 'dotenv' Note: Because setting up environment variables are best practices, most of the Javascript frameworks or packages already come with it. (So you might don’t need to do the steps above) , ignore file to avoid it recorded by “git” or upload to Github. Fourth .env Add following line to our file (create one if don’t have) .gitignore .env Note: . Otherwise, all we did earlier would be useless, because “git” will log our files every time we commit. This step is important and should do it as early as possible And optionally, you might consider adding more .env files for different environments, such as: .env.development.local .env.test.local .env.production.local 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. Setup Environment Variables in different environments. Fifth, 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) , if you still can’t manage to make the variables work, there might be some restrictions come from other factors. Sixth For example, if the project created by , the variable names have to start with (more detail ), so our .env file might need to change the name as below: create-react-app REACT_APP_ prefix here = http://localhost: = REACT_APP_BASE_URL 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. yarn start Photo by on Pietro Rampazzo Unsplash 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) https://www.microverse.org/