# Using Environment Variables in Loopback

### Requirements

* a loopback project
* a connected database 
* [An understanding of environment variables](https://softstack-factory.gitbook.io/mean-stack/deployment/deploying-loopback/learn-environment-variables)

## Overview

In this section we are going to change the configuration of our Loopback app in order to deploy our application. Typically you will use different databases for production and development in our case we only have one, but we will go through the practice of setting up our application to work differently in production and development

The end goal will be an application that does not commit your secrets and api keys to git. 

See [Loopback Environment Configuration](https://loopback.io/doc/en/lb3/Environment-specific-configuration.html) for more details.

Right now in your you loopback project in the **server folder,** your datasources.json should look something like this:

{% tabs %}
{% tab title="Before Environment Variables" %}
{% hint style="info" %}
Your **datasources.json** file may looking slightly different
{% endhint %}

{% embed url="<https://gist.github.com/ssffacilitator/61b957f6a7ee3c3669ca6e80e2afdeda>" %}

**(1)** What is wrong with this url? It has my username and password in it for the datatabase. \
username: john\
password: 1234

Our goal is to hide these values from git but still be able to use them when we are developing on our machine.
{% endtab %}

{% tab title="After Environment Variables" %}
{% embed url="<https://gist.github.com/ssffacilitator/d5bdf9e4f4cb9f8d2d69c9f894056392>" %}

{% hint style="danger" %}
**DO NOT CHANGE THE FILE YET!**
{% endhint %}
{% endtab %}
{% endtabs %}

### Using datasources.local.js

{% tabs %}
{% tab title="Step One" %}
In your server folder create a file named **datasources.local.js**  and paste the below code

{% embed url="<https://gist.github.com/ssffacilitator/0cdb15d342cf64066d8530e5b38a8f47>" %}

{% hint style="info" %}
Note this file is javascript instead of JSON like datasources.json
{% endhint %}
{% endtab %}

{% tab title="Step Two" %}
{% embed url="<https://gist.github.com/ssffacilitator/0cdb15d342cf64066d8530e5b38a8f47>" %}

**Line 7:** replace **\<YOUR FULL DATABAE URL HERE>,** with your database URL from your **datasources.json** file

{% hint style="info" %}
Leaving the database name and connector is required. These need to match what our models are using when we set them up.
{% endhint %}
{% endtab %}

{% tab title="Step Three" %}
Back in your **datasouces.json** remove all the fields but keep the following

{% embed url="<https://gist.github.com/ssffacilitator/d5bdf9e4f4cb9f8d2d69c9f894056392>" %}

{% hint style="info" %}
Leaving the database name and connector is required. These need to match what our models are using when we set them up
{% endhint %}
{% endtab %}

{% tab title="Step 4" %}
Now restart loopack if you have errors try to double check for typos missing {} or "".   In the section we created a javascript file, **datasources.local.js** that we will use in the next steps. We had to use a javascript file because JSON Files cannot use environment variables.

{% hint style="success" %}
**SUCCESS** move to the next section
{% endhint %}
{% endtab %}
{% endtabs %}

## Using an Environment Variable

### Overview

In the last section we created a file `datasources.local.js` but still have our mongo database URL hardcoded into the file,  **see line 10**. Now we are going to setup a an environment variable and try it out.

{% embed url="<https://gist.github.com/ssffacilitator/61b957f6a7ee3c3669ca6e80e2afdeda>" %}

### Running Node with Environment Variables

{% hint style="info" %}
Loopback is just a NODE JS application, we are using NODE environment variables.
{% endhint %}

{% tabs %}
{% tab title="Step One" %}
Your **datasources.local.js** should look something like below, but with your **DB URL on line 7**

{% embed url="<https://gist.github.com/ssffacilitator/0cdb15d342cf64066d8530e5b38a8f47>" %}

{% endtab %}

{% tab title="Step Two" %}
We are now going to create a file to hold our **DB\_URL.**

\
In your root directory, one above server. Create a file name `.env`.  This file is should be on the same level as your `package.json` file. In your newly created `.env` file, add the below and replace\
\<YOUR DB URL HERE> with your URL from your `datasources.local.js`

{% embed url="<https://gist.github.com/ssffacilitator/fb0229135f8b481e8e8621da7a019ffe>" %}

{% hint style="info" %}
Note: the `DB_URL`does not get surrounded by quote marks
{% endhint %}

We will come back to this later, we created the file for now just to not lose our DB\_URL, but we will be using this in the next section, with `dotenv.`
{% endtab %}

{% tab title="Step 3" %}
Now are want to setup our application to use the environment variable instead of our hardcoded database URL.\
**On Line 7** in `datasources.local.js` , replace your with `process.env.DB_URL`

{% embed url="<https://gist.github.com/ssffacilitator/5f5c8aa185b80838fd52368d939a65db>" %}
{% endtab %}

{% tab title="Step 4" %}
Now lets run our loopback app using the environment variable, **DB\_URL** with our URL we saved in the `.env` file.

{% hint style="info" %}
Run the following command from the **root directory** in your terminal.
{% endhint %}

You can copy and paste from your **`.env`** file, the entire, **DO NOT COPY THIS ONE**`DB_URL="mongodb+srv://john:1234@cluster0-0vx31.mongodb.net`

```
DB_URL=<YOUR DB URL HERE> node .
```

Sample Usage with a fake value for **`DB_URL`**

```
DB_URL=mongodb+srv://john:1234@cluster0-0vx31.mongodb.net node .
```

If your application builds successfully you should see something close to below.

![](https://3729111192-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LJF8uz6T7DhCLClK6jV%2F-LyQTY6wj4fIfe5_H0Vq%2F-LyQVrg9A4muTzRMe9SN%2Fimage.png?alt=media\&token=b12e5058-9bcf-4874-9c98-a837d1ece69c)

#### Recap

We changed our `datasources.local.js` to use our environment variable when we set it and run our loopback application. In the next step we will use the `.env` file and the dotenv NPM package so we do not have to type out that long DB\_URL every time we start our app.

{% hint style="success" %}
**SUCCESS**
{% endhint %}
{% endtab %}
{% endtabs %}

## Using .env

Right now we have a working application but it is pretty tedious to remember that url or store that command. We could have multiple variables to set and the command would get quite large.&#x20;

For example:&#x20;

```
PORT=8000 \
DB_URL=DB_URL=mongodb+srv:@cluster0-0vx31.mongodb.net \ 
NODE_ENV=production \
USER=John \ 
PASSWORD=1234 \
node .

```

So in this step we want to use the `.env` file that is not tracked by git to make this easier.

If your project does not have a `.gitignore` file in your root directory, just create one.  Otherwise you should be able to just open the file.

**Line 6:** add **.env** to the list

{% embed url="<https://gist.github.com/ssffacilitator/dcda8bfb329828199e56323f0a562aa0>" %}

### Using dotenv

In order for NODE to use our `.env` file we need to install the [NPM package dotenv](https://www.npmjs.com/package/dotenv)

Run the following command to install it.

```
npm install dotenv --save
```

Now open your `datasources.local.js` and **add line 1** to it from the below sample

{% embed url="<https://gist.github.com/ssffacilitator/ffe064112d306674b80d74713d52149e>" %}

Now restart loopback but do not use the environment variable in the command.  Remember to run node . from root.

```
node .
```

Your server is using the environment variable and connecting to the database if you see the following.

![](https://3729111192-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LJF8uz6T7DhCLClK6jV%2F-LyQTY6wj4fIfe5_H0Vq%2F-LyQVrg9A4muTzRMe9SN%2Fimage.png?alt=media\&token=b12e5058-9bcf-4874-9c98-a837d1ece69c)

## Recap

We created a new javascript file, `datasources.local.js` to use when we start our app for local development. We then created a `.env` file to store our environment variables and installed the [npm package dotenv](https://www.npmjs.com/package/dotenv) to allow the project to use this file to setup environment variables. Lastly we added the `.env` to the `.gitignore` file so our secrets are not in git. Now we need to prepare our app to use a different file for production, this was all for using local environment variables while we develop on our machine. In the next section we will launch our app to heroku using our a production config.