How to Setup Environment Variables for Web Dev projects

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.

Note: In this article, I will only focus on Javascript environment, I might update other languages once I figure them out later.

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:

console.log(process.env.NEW_VAR);
Yes,

process.env

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.

Third, install

dotenv

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.
require('dotenv').config()

Note: Because setting up environment variables are best practices, most of the Javascript frameworks or packages already come with it. (So we don’t need to do the steps above)

Fourth, ignore 

.env 

file to avoid it recorded by “git” or upload to Github. 

Add following line to our 

.gitignore

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.

For example, if the project created by create-react-app , the variable names have to start with

REACT_APP_ prefix

(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.

yarn start

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)

read original article here