How to deploy your Node.js (MongoDB) app to the web, using Heroku

Here in this lesson I will be driving you through the complete process of deploying your node.js app to web that you have made with hours of hard work!

After reading this you will be create your own herokuapp.com link and share your node.js app with all your friends, instead of just having it on your localhost. So lets get started!

First make your own app.js file:

So this is the first step that you should do. You should have npm and node.js installed in your laptop. Now you can make a directory and then create a file called app.js in it. Use “npm init” so as to get the package.json file, now all that you install using npm will be shown in the JSON file! Then try installing express in it by using “npm install express — save” that will help you with node modules. — save will help you push this install info into the package.json file.

Connecting to database (Mongo):

See that you have included all the var elements like mongoose,express,body-parser’ etc. Also now use mongoose.connect to connect this app to a database that you like, as you cant connect your local database because people would be using your app on their systems! So for this you have to create your MongoDB account, and then go to New Project. Under this you can name your project anything.Now create a new cluster (will take a few minutes) and then click on “collections”, where you can create your database and also the collections in it.

Here restful_blog_app is my DB name and it has 3 collections

Once this is done, go to overview and click on “CONNECT”. In the setup connection security, type in your username and password (remember this because you will need it). In whitelist connection, you can select the option of “available everywhere”.

Further in choose your connection select the option of connect your application. Select Driver — Node.js and Version-3.6 or later. In add your connection string you copy the string given and paste it in your mongoose.connect() in app.j by replacing <password> with your password and <dbname> with your database name that you created (in my case restful_blog_app). Congrats your database connection is successful!!

Port connection in app.js:

Now we must look for your app.listen() line in app.js file. As you were running the file on your localhost your app.js would have a line like app.listen(3000,function{}), but here as we are connecting to heroku, it provides their own localhost which we don’t know!

So add one more port by creating variable PORT, such that var PORT = process.env.PORT || 3000, so that this runs on laptop as well. Then write app.listen(PORT, function{}).

Install heroku for your deployment:

Now in the same directory in which you have the project type in the terminal npm install heroku. After it is done you can type heroku login, and it will ask you to create a heroku account. Once you are in click on NEW>create new app. Write your app name that would appear in your website link ( https://(app name).herokuapp.com). Click on create app.

Your app will be created but still there is a problem! What is it now? Your app doesn't know how to start. Initially on your localhost:3000, we used to view the app, by typing in node app.js, and then the app worked!

So now to solve this we have 2 ways!

2. Another way is by creating a file called “Procfile”(with no extensions like .txt), in this file just type “ web: node app.js”, and save it. Heroku will search for this file if it finds nothing in the script tag.

Final deployment:

Now you are good to go. Once again type heroku login and this time it will ask you to press any key to login and then it will redirect you to browser where you have to press login.

Once this is done clone the repository in heroku to your local drive. Type in terminal

Instead of my-project type your heroku app name, here git-hub1 is my app name

Now add your files to this,by typing -

This will add your files to repository and push it to heroku master

After this you will be provided with a heroku link which you can open! Congratulations! you have successfully deployed your app to web!, now you can share this app with anyone you want.

In case you get APPLICATION ERROR, then type into the terminal “heroku logs — tails, and you can then google the errors to find out the meaning! If nothing seems to work type in “heroku restart”.

Cheers!

Frontend Web Developer and Competitive Coder!