Environment variables - Webstorm & Nodemon
Tags: javascript, node, nodemon, webstorm
Published: 2021-10-04 19:40:30

When creating an app, it is important to create environment variables. In my current project, I am using Webstorm as my ide and the nodemon npm package for my server as well as the **passport google Strategy**.  

`Passport is authentication middleware for Node.js. Extremely flexible and modular, a Passport can be unobtrusively dropped into any Express-based web application. A comprehensive set of strategies support authentication using a username and password, Facebook, Twitter, and more.`

When using Google as an authenticator, or any 3rd party api, there is a process to create credentials for your app (Client ID, Secret). Once you have those credentials, it's important to _keep them secret, keep them safe_.  In order to do so, there is a method most people use and that is to create **environment variables**.

`An environment variable is a variable whose value is set outside the program, typically through functionality built into the operating system or microservice. An environment variable is made up of a name/value pair, and any number may be created and available for reference at a point in time.`

**Nodemon** `is a utility depended on by over 1.5 million projects, that will monitor for any changes in your source and automatically restart your server`.

In my project I kept coming up with errors in my google Strategy.  The environment variables were not being read.

Creating variables in webstorm, as opposed to _sublime_ or maybe _atom_, is very different.  In either of the latter text editors I mentioned you could simply create a **.env** file where you would store these important variables.  Also installing the **dotenv** npm package to be able to use these variables is necessary.

**Dotenv** `Dotenv is a zero-dependency module that loads environment variables from a .env file into process.env.`

This is where it would get confusing. In webstorm, you can influence the runtime behavior of your app by adding program arguments and environment variables to _**run/debug configurations**_.

![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/s88pks9ri9wfehwr7a1i.png)
 
###Add environment variables﻿
1. From the main menu, select Run | Edit Configurations or choose Edit Configurations from the run/debug configurations selector on the toolbar.

2. In the Run/Debug Configurations dialog, select a configuration you want to add the environment variables to.

3. Type the variable name and value: <name>=<value>. If you add several variables, they should be separated with semicolons.

Alternatively, click the Environment
variables icon and add the variable name and value to the **User environment variables list**.

This will work but just don't forget to click the _apply_ button once done!  Also, this will only work when running your app through the ide (not using nodemon).
![Pasted Graphic](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6jxlh5szwhj1791d5m15.png)

When using **nodemon** to run the app, and trying to set environment variables by using the ide's configurations, the env variables will not be read.  Instead this is where the **dotenv** npm package and a **.env** file comes into play.

According to a post on the JetBrains Hub, _"Variables you have defined in run configuration are only available in runtime, they can't be resolved during static code analysis"_

Create a _.env_ file in the root directory of your app.  Place your variables inside this file as such:

`VARIABLE_NAME=VARIABLE_INFORMATION`

Next, it's important to require the dotenv package as soon as possible.  In my experience it is always on line 1 of my main file (app.js, index.js, etc.).

Now that you have your env variables set in the env file, **don't forget to set the .env file in your .gitignore file**, you can run nodemon and the variables will be read.