Using Environment Variables in Loopback

Requirements

• a loopback project

• a connected database

• An understanding of 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 for more details.

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

Before Environment Variables

Your datasources.json file may looking slightly different

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

After Environment Variables

DO NOT CHANGE THE FILE YET!

Using datasources.local.js

Step One

In your server folder create a file named datasources.local.js and paste the below code

Note this file is javascript instead of JSON like datasources.json

Step Two

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

Leaving the database name and connector is required. These need to match what our models are using when we set them up.

Step Three

Back in your datasouces.json remove all the fields but keep the following

Leaving the database name and connector is required. These need to match what our models are using when we set them up

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.

SUCCESS move to the next section

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.

Running Node with Environment Variables

Loopback is just a NODE JS application, we are using NODE environment variables.

Step One

Your datasources.local.js should look something like below, but with your DB URL on line 7

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

Note: the DB_URLdoes not get surrounded by quote marks

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.

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

Step 4

Now lets run our loopback app using the environment variable, DB_URL with our URL we saved in the .env file.

Run the following command from the root directory in your terminal.

You can copy and paste from your .env file, the entire, DO NOT COPY THIS ONEDB_URL="mongodb+srv://john:[e-mail]

DB_URL=<YOUR DB URL HERE> node .

Sample Usage with a fake value for DB_URL

DB_URL=mongodb+srv://john:[e-mail] node .

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

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.

SUCCESS

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.

For example:

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

Using dotenv

In order for NODE to use our .env file we need to install the NPM 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

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.

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