Build Your First Node.js Website
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 firstname.lastname@example.org: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:
I’m gonna share my credential here. Feel free to use it while you’re learning. After that, create and use your own credential. Thanks.
For Mac/Linux users, you can simply type:
For Windows users, do:
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
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 email@example.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
I wanna take a moment and mention Heroku tool belt. A command line utility to access Heroku Platform API for creating/renaming apps, running one-off dynos, taking backups, and configuring add-ons. Check out this blog post to know all steps required to deploy to Heroku by using Heroku tool belt.
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. See images below:
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.
We’re finally at the part that we’ve wanted this entire time. Seeing the application in browser! Go ahead and visit that in browser:
It’s magic! We have our MVC ToDo List app in the browser just like we wanted.
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!