# 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](https://softstack-factory.gitbook.io/mean-stack/deployment/production-environment#production-configuration)
* That loopback repository on github

## First Steps

[Create a Heroku Account.](https://signup.heroku.com/t/platform?c=70130000001xDpdAAE\&gclid=EAIaIQobChMInqy_loT_5gIVsxx9Ch1ojAHnEAAYASAAEgIif_D_BwE) its FREE!

###  **Create a New App on Heroku**

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

![](https://3729111192-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LJF8uz6T7DhCLClK6jV%2F-LyQTY6wj4fIfe5_H0Vq%2F-LyQj0H32dznsHk9pihT%2Fimage.png?alt=media\&token=e9e9bd2c-f23d-4f93-99b0-848abafd683a)

{% hint style="info" %}
**Y***ou will need to give your app a **different name**; all heroku apps are **unique**.*
{% endhint %}

### Connect to github Repo

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

![](https://3729111192-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LJF8uz6T7DhCLClK6jV%2F-LyQTY6wj4fIfe5_H0Vq%2F-LyQje_zC78hACJWzKLn%2Fimage.png?alt=media\&token=b1fafd55-f104-409d-a79b-06cb2d535f12)

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

![](https://3729111192-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LJF8uz6T7DhCLClK6jV%2F-LyQTY6wj4fIfe5_H0Vq%2F-LyQjsB7UVnKCLJ4_Zip%2Fimage.png?alt=media\&token=916b97fc-e7e6-4eb8-8da4-3c576f13d63f)

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

![](https://3729111192-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LJF8uz6T7DhCLClK6jV%2F-LyQTY6wj4fIfe5_H0Vq%2F-LyQlnGMr1ff9ki_MGXe%2Fimage.png?alt=media\&token=10bfd891-099e-4b42-8ade-804fab153806)

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

![](https://3729111192-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LJF8uz6T7DhCLClK6jV%2F-LyQTY6wj4fIfe5_H0Vq%2F-LyQmBqdt5XMeoyxPc6H%2Fimage.png?alt=media\&token=917f4a65-8423-4e18-897b-a4ca40998248)

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 )

{% hint style="info" %}
The variable names must match but the values could be different
{% endhint %}

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

![](https://3729111192-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LJF8uz6T7DhCLClK6jV%2F-LyQTY6wj4fIfe5_H0Vq%2F-LyQnr05xCprcSMMWRwz%2Fimage.png?alt=media\&token=86fa3527-a6d2-4b3b-88b8-a2fc7880892b)

## Deploy your App

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

![](https://3729111192-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LJF8uz6T7DhCLClK6jV%2F-LyQTY6wj4fIfe5_H0Vq%2F-LyQrMnIsn1CSOpvZPC6%2Fimage.png?alt=media\&token=29bb58d0-4957-435f-a444-410d12978591)