Create a Heroku App

Overview

Now that we are able to use environment variables in our application to store secrets and use different configuration files based on the NODE_ENV environment variable it is time to deploy our loopback app the web so our frontend can use it.

Prerequisites

• Loopback Production Environment

• That loopback repository on github

First Steps

Create a Heroku Account. its FREE!

Create a New App on Heroku

Note: if you don't already have a Heroku account set one up now!

You will need to give your app a different name; all heroku apps are unique.

Connect to github Repo

Once you create your app in Heroku you will be shown the "Deploy" screen

Connect your Heroku app to the GitHub Repository that has your production ready loopback app.

• Click on the "Connect to GitHub" button

• Search for the repository learn-heroku in our case,

• Click on "Connect" button.

Now click "Enable Automatic Deploys" to ensure that any changes made on GitHub are automatically deployed on Heroku

Automatic deploys will let heroku get all the updates of the new app when ever you push to the master branch.

Adding Environment Variables to Heroku

Since our .env file is not included on git by design we need a way to set the machines environment variables on heroku.

To do that go to SETTINGS tab in Heroku and select REVEAL CONFIG VARS

You should see something close to this with no values in it.

In this step we want to take the information from our .env file and add it to heroku. In your .env copy the variable name you used. file on the left side, the blue box. Then paste the value of DB_URL from the .env file into the right file value, ( blue arrow )

The variable names must match but the values could be different

Now we need to add one more environment variable to heroku so it will use the production config instead of the local config we setup before.

Create another environment variable NODE_ENV and the value will be production. This way when loopback starts on heroku is will use the production configuration.

Should look like this after

Deploy your App

Back in the deploy section in heroku we want to trigger a new deploy using the environment variables we just configured.