Use MongoDB with a Node.js Application on Heroku

Introduction

On this blog post I’ll use a JS MVC ToDo List to show you step by step how to deploy an application using Node.js with Express and Mongoose on Heroku. There are many ToDo app examples over there]. All of them are basically client side source code, which means you have to create a server file in order to deploy it to Heroku. A good news is this file is already created, and the another good new is that server file can be used in almost all ToDo apps listed there. This file gives you the flexiblity to use any JavaScript MVC from your choice. I’m gonna use the one built by AngularJS framework.

Based on this MVC AngularJS ToDo List, I created a new GitHub repository to be easier to deploy it on Heroku. If you’re unfamiliar with those technologies, now would be an excellent time to go through this great start. And for you, developer, who’s familiar with JavaScript, for sure it’ll not be hard. Go check it out!

Setting up a free account on Heroku and MongoLab

Before I get into the code and walk you through it, I wanted to talk about how to create your free account on Heroku and set it up: (i) first of all sign up, (ii) after that create your first app and (iii) then register and add a public SSH key to your account. You can check this guide out for further details about generating SSH keys.

The next step is to have a Mongo database running. It’s NOT required but it’s a necessary step to test it locally before deploying. To simplify let’s use a MongoDB as a Service using MongoLab. Feel free to sign up and create your own database.

Running the example locally

The source code is available on my GitHub, clone it with:

git clone git@github.com:igorlima/deploy-express-with-mongoose-on-heroku.git

To run it locally, install all dependencies needed with npm install. And set a new environment variable: MONGOLAB_URI. It should contain all the MongoDB connection information needed to connect to your database. You may also specify several more parameters in the uri depending on your environment. In this example, we are gonna use the following standard: mongodb://username:password@host:port/database

For Mac/Linux users, you can simply type:

export MONGOLAB_URI="mongodb://example:example@subdomain.mongolab.com:port/todolist"

For Windows users, do:

SET MONGOLAB_URI="mongodb://example:example@subdomain.mongolab.com:port/todolist"

After setting up this environment variable, run via terminal node server.js. It should be available at the port 5000, then open any browser and reach http://localhost:5000/.

Deploying on Heroku

You can easily use a git repo to deploy to Heroku, you just need to add a new remote git repository by using the git remote add command on the terminal. To know your app remote URL you have to go to your Dashboard, click on the app you have created in the session above, then click on Settings link. You’ll be able to see the Git URL, copy and use it in the command below:

git remote add heroku git@heroku.com:<your-heroku-app-name>.git

Now that we have everything in order, go ahead and push to Heroku!

git push heroku HEAD:master

Notice this example app has a file named Procfile. It’s a text file in the root directory to explicitly declare what command should be executed to start your app. The Procfile in this example app you deployed looks like this:

web: node server.js

Adding a MongoDB add-on

Now it’s time to add the MongoLab add-on. To do that you can simply go to your Dashboard, click on the app just created by you, open the Resources tab and then add a new add-on clicking on EDIT or PLUS button under Add-ons session.

There many MongoDB services, I choose MongoLab because one reason: it’s free. To find more add-ons, feel free to see all at this link.

The MongoLab add-on contributes one config variable to your Heroku environment: MONGOLAB_URI. This variable is a URI containing all the MongoDB connection information needed to connect to your database.

Most client libraries support using the URI directly. However, some will require pulling the components of the URI apart.

Happy browsing

We’re finally at the part that we’ve wanted this entire time. Go ahead and visit that in browser: http://<your-heroku-app-name>.heroku-app.com

It’s magic! We have our MVC ToDo List app in the browser just like we wanted.

Conclusion

That’s it folks. I hope you learned how simple and fun is to deploy an Express app with Mongoose on Heroku. In the meantime, go through the Heroku Node docs and drop a line if you’d like to see more blog posts about any other Heroku things or other services similar to Heroku. Thanks for reading!