Deploy to Heroku

Learning Goals

After this lesson, you will be able to:

• Understand what Heroku is and why we should use it to deploy our applications.
• Understand what Environment Variables are, how to use them, and why it's very important to keep them in mind.
• Configure our environment to be able to deploy web applications to Heroku.
• Deploy our website to Heroku.
• Deploy our database using the Heroku MongoLab addon.

Introduction

Qu'est-ce qu'Heroku ?

Heroku is a cloud platform that lets companies build, deliver, monitor and scale apps without having a big knowledge about DevOps. It's the fastest way to deploy your application and make it accessible to everyone.

One of the best things of Heroku is that it lets you focus on building your application, while they deal with the infrastructure. It makes so simple to deploy our applications. As simple as push it to a git remote repository.

We are going to cover the process we will follow to deploy a website to Heroku. On one hand, we are going to deploy the website to heroku, and on the other hand, we will deploy our Mongo database with the Heroku MongoLab addon.

Nous déploierons ce répository : https://github.com/ironhack-labs/lab-first-deploy

We are going to deploy a very simple project that will show us a map. This map will access to our position, and it's going to indicate us where are we right now. You can download this exercise from this Github repository.

Clonons-le localement et npm installons tous les paquets.

Clone the repository into your computer, and let's start configuring our environment to deploy our application!

Don't forget to run npm install after you clone the project.

Project

We are going to deploy an small project. Its functionality is to show you the position in a map, store this position in a database, and show a list of all the positions you have saved.

Vérifions que notre projet est fonctionnel en local :

$ npm start

You have to pay attention at the following line in the routes/siteController.js file:

res.render("site/index", { apiKey: "AIzaSyCTxsFM2Bbm4KEtuFAmdu11WF3s3zUliwU" });

As you may know, Google Maps requires an API Key to work on our applications. We are indicating that key in the controller, and we are sending it to the view.

Keep that in mind, because we will come back here later on this lesson to talk about environment variables.

Let's configure Heroku to upload our application.

Prerequisits

Sign up

Créons-nous un compte Heroku : https://signup.heroku.com

The first we need to deploy an app to Heroku is an account. Signup in Heroku by indicating the fields in the page:

Heroku will send an email to your account with a confirmation link that will activate your account after setting up your password. Once you have logged in, you will see Heroku's dashboard:

Create App

Depuis le dashboard, créeons une app :

Once we have logged in Heroku, we will have to create a Node.js app to be able to deploy it. To do that, we have to press the "Create New App" button in the dashboard.

Fill the form with the correct information to create your first app:

Once we are done with that, we will have to download and install the Heroku CLI to be able to deploy our application as if it was a repository.

Heroku CLI

Installons l'outil en ligne de commande d'Heroku : https://devcenter.heroku.com/articles/heroku-cli#download-and-install

The Heroku CLI (or Heroku Command Line Interface) is a tool for creating and managing Heroku apps from the command line of various operating systems.

Following the DevCenter information, you can find how to install the CLI depending on your Operative System.

OS X

Download and run the OS X Installer

Windows

Download and run the Windows Installer 32 bits or 64 bits.

Linux Debian/Ubuntu

Run the following commands to add Heroku apt repository and install the CLI:

$ sudo apt-get install software-properties-common # debian only
$ sudo add-apt-repository "deb https://cli-assets.heroku.com/branches/stable/apt ./"
$ curl -L https://cli-assets.heroku.com/apt/release.key | sudo apt-key add -
$ sudo apt-get update
$ sudo apt-get install heroku

Getting started

The first time you run the Heroku CLI, you will have to enter your Heroku credentials. You can avoid this by loggin in heroku through your terminal. Run the following command in the terminal:

Une fois installé, loggons-nous depuis le terminal :

$ heroku login
  Enter your Heroku credentials
  Email: [e-mail]
  Password (typing will be hidden):
  Authentication successful.

You are now logged in, so you don't have to indicate your credentials again. We are ready to deploy our project to Heroku!

Before deploy

Before deploy our application, we have to consider the following: now, we use npm start to run the server. This launches the command nodemon ./bin/www. We have installed nodemon in the development environment, so when heroku executes npm start, the app will crash.

We could change nodemon for node, but then in development, we should to restart the server with every change. Another possible solution is do the following:

Nous devons nous assurer que la section scripts de package.json contient bien un script "start", car c'est cette commande qu'Heroku cherchera à démarrer :

// ...
"scripts": {
  "start": "node ./bin/www",
  "start-dev": "nodemon ./bin/www"
},
// ...

Now, if we are working in our development environment, we will launch the application by running npm run start-dev. On the other hand, Heroku will launch npm start, so our application will work in both environments.

Deploy to Heroku

Let's do a quick recap. We have created a project, we have created an account in Heroku, created an application in our Dashboard, downloaded and installed the Heroku CLI, and now we are going to deploy the application.

At the beginning of the lesson, we said that deploy an application to Heroku is like pushing our project to a remote repository. If we go back to our Heroku dashboard, we will find the following:

We have to configure our remote repository, and we do that by running the following command:

Deployer avec Heroku est aussi simple que de pusher ! Pour cela, nous devons définir un remote qu'Heroku met à notre disposition pour que nous puissions pousser dessus :

$ heroku git:remote -a ih-first-deploy

If we check out our remote repositories, we should have something like it follows:

$ git remote -v
  heroku	https://git.heroku.com/ih-first-deploy.git (fetch)
  heroku	https://git.heroku.com/ih-first-deploy.git (push)
  origin	https://github.com/ironhack/lab-first-deployment.git (fetch)
  origin	https://github.com/ironhack/lab-first-deployment.git (push)

We are ready to go! Let's deploy our first application to Heroku by running the following command:

Une fois le remote heroku en place, ne nous reste plus qu'à pousser :

$ git push heroku master

Something new will happen. First of all you will see the normal git push result, indicating that all the objects have been uploaded. Then, heroku will launch a command that will deploy our application to the repository we have created.

In the Overview tab in our Dashboard, we will be able to see the summary of the last deploy we just did:

Cool, let's see what we have by running:

Si nous cherchons à ouvrir notre application, nous aurons une erreur :

$ heroku open

This will launch our application in the default browser we have configured in the computer. The result is the following:

We can check out the heroku logs with the command $ heroku logs, and we may see something like this:

En regardant les logs grâce à heroku logs nous pouvons voir que l'erreur en question est qu'Express ne parvient pas à se connecter à MongoDB :

MongoError: failed to connect to server [localhost:27017] on first connect

We are trying to connect a database located in localhost, so in Heroku. Heroku allows us to deploy our web applications, but not the database. We have to deploy our database in MongoLab.

Deploy database

MongoLab is a Database as a Service that allow us to have our Mongo Database in production. If we want to use MongoLab in our deployed application, we have to configure the mongolab add-on in our Heroku repository. We will do this by running the following command:

Heroku met à disposition des addons, dont une addons MongoDB : mongoLab

$ heroku addons:create mongolab:sandbox

As you can see in the result, you can't use Heroku add-ons without adding your credit card to your account. There is no other way, and you will need to do this anyway to deploy your projects later on. MongoLab add-on is free, so don't be worried about that, there is no extra-cost to use that.

Please, be very careful while activating or deactivating configurations in Heroku. Some of them can charge a huge amount of money, so we ask you to be very careful when updating your configuration.

You can add your credit card number by going to Account Settings (located on the top right corner), Billing tab. Once we have indicated our Billing information, we can run the command again and the add-on will be installed successfully.

We can open our MongoLab instance by running the following command:

$ heroku addons:open mongolab

We are connecting Mongoose to our local database. So we have to change the configuration to be able to work with our new MLab Server. First of all we need to see the connection string that is using the database. We can get this information running this:

Une fois l'addon installée, une variable MONGODB_URI contenant l'URL de connection à la DB nous est communiquée par mLab :

$ heroku config:get MONGODB_URI

The output is our database URL connection. It contains the URL, the username, the password, the port, and the database name. Easy to solve the problem we have right now… we go to app.js in our application, we change the line 17, and we add our new connection string:

Il va donc falloir nous en servir pour nous connecter à notre DB :

mongoose.connect("mongodb://localhost/deploy-exercise");

Then we push all the changes to Heroku and Github, so everybody will be able to see our connection string, and add a lot of cool stuff in our database. Even more, if we update the MongoLab plan and we select the most expensive one, we will be paying everyone's database.

You musn't publish any key, server configuration, AWS key… Whatever that includes personal information, billing information, database configuration can't be published in Github nor Heroku.

We can solve this problem by using the Environment Variables.

Environment Variables

Environment variables are a set of dynamic named values that allow us to access different values depending of our environment. Depending on the environment, production or development, we will load different values.

In this case, we will configure our project to have a value for the database connection string in our development project, and another one in the Heroku repository. So we will have to configure two different things: the variables locally and the variables in Heroku.

Local environment

We will use the dotenv package to configure our environment variables. It's very easy to configure, so let's do it. First of all, we need to install the package and save it in our environment:

Nous allons utiliser dotenv pour cela :

$ npm install --save dotenv

Then, we will create a hidden file to store the values of the environment variables. In this case, the file will be .env, and we can create it by running the touch command:

Et créer notre fichier .env à la racine :

$ touch .env

Remember to add the .env file in the git ignore, to avoid its deployment.

In the .env file, we will create the variable we are going to use as a database connection string. The content of the file is the following:

Dans lequel nous allons pouvoir renseigner notre URL de connexion à la DB locale :

# .env

MONGODB_URI=mongodb://localhost/deploy-exercise

Now, we have to update the app.js file. First of all, we have to require the package at the beginning of the file. Then, we have to update the connection string to use the value we have in the environment variable:

N'oublions pas d'appeler dotenv dans app.js ainsi que de remplacer notre URL hardcodée par process.env.MONGODB_URI :

require("dotenv").config();

mongoose.connect(process.env.MONGODB_URI);

As you can see, we can access the environment variable through process.env.<VARIABLE NAME>. If we start the server with npm start, our application should work normally.

So, we have defined the variable in our local project… what happens with Heroku now? Let's see how Heroku manages the environment variables.

Heroku environment

En prod, nous n'aurons pas ce .env puisque ce dernier n'est pas versionné sous git… Côté Heroku, c'est dans les variables d'environnement que nous pourrons spécifier la valeurs process.env.*

Environment variables in Heroku are super easy to manage. We can find them in our application dashboard, under the Settings tab. You will find there a section called "Config Variables", with a hidden content. This content are our environment variables. If we show the content, we will find the following:

Our environment variable is already defined! This is because when we installed the MongoLab add-on, it defined the variable in our project.

If we deploy again the project, we will have deployed our first database with our own Mongo database. Now you can track, as many times as you want, the different places you visit all around the world :)

Considerations

As you see, we haven't paid any money to get our awesome deployment into Heroku. It's not as pretty as it seems. Heroku offers us a free service to deploy our apps that is active during 30 minutes. After 30 minutes of inactivity, the server will hibernate until the following request.

This free dynos are used during the development process of an application. Once the application is finished, if you want to launch it to production, we recommend you to update your Heroku plan to be able to attend your users requests appropriately.

Summary

In this lesson, we have learnt how to deploy an application to Heroku. We have created an account in Heroku, configured our Node app, and deployed it. Then, we have seen how our database can't be deployed in Heroku, so we have added the MongoLab add-on and configured our application to use the new configuration.

We have also learnt what are the environment variables and how to use them in our projects to separate production and development values that we want to use, and also to protect our sensitive data such as database username and password.

We have had to indicate our Credit Card credentials to be able to add add-ons on Heroku. Please, be careful while managing your Heroku dyno, some of the tools you can find there are very expensive!!

Extra Resources

• Managing Environment Variables in Node.js
• Mongo Lab
• Heroku