DEV Community

NJOKU SAMSON EBERE
NJOKU SAMSON EBERE

Posted on • Edited on

Hosting a Nodejs and MongoDB App on Heroku

This tutorial is meant to make it easy for anyone who is hosting a nodejs application that uses the mongoDB database. If you have already checked out my other heroku tutorial using postgresql, then this tutorial will just be a piece of cake.

In any case, I will assume that you are here for the first time, so I will run you through a beginner process. We will be hosting the authentication app we completed in the last tutorial.

  1. Clone the project here.
  2. Delete the .git file that may have come with it. Another .git file will be created for you in the process of you pushing to GitHub.

So without further ado, let's get our hands dirty.

let's get our hands dirty

Uploading to GitHub

Uploading or pushing to GitHub is as easy as taking your favorite meal. Please checkout any of the following links to get directed on just how to push your project from you local machine to GitHub

  1. Adding an existing project to GitHub using the command line

  2. Adding an existing project to GitHub using the command line

Deploying to Heroku

I am going to make this process so easy that you will just smile throughout.

  • Let's begin by creating an account on Heroku

If you have created an account, you may have been prompted to create an app (i.e. a folder where your app will be housed). Create it. Mine is named nodejs-mongodb-auth-app

  • Go to your app's dashboard

Alt Text

  • Select the GitHub Deployment method

Alt Text

  • Search and select a repo
  • Click on connect

Alt Text

  • Select the branch you want to deploy (In my own case, it is the master branch)

Alt Text

  • Enable automatic deployment by clicking Enable automatic deployment button as in the image above.

  • Click on the Deploy button in the manual deploy

Alt Text

We will not have to do all these for subsequent deployment

  • Now you have a button telling you to "view site" after build is completed. Click it. (This will open your app in a new tab)

Alt Text

OHHH NOOOO!!!! A BUG? APPLICATION ERROR?

Tired

Well, it just a small issue. Something you should never forget to do while making deployments. Most hosting service will require it

Fixing Heroku Application Error

Get back to the root directory of your project

  • Create a file and name it Procfile (It has no extension)
  • In the file, enter the following
web: node index.js
Enter fullscreen mode Exit fullscreen mode

Alt Text

This directs Heroku to the server file (index.js) which is the entry point of the application. If your server is in a different file, please modify as required

  • Save the file
  • Push the new changes to GitHub
  • Wait 2 to 5 minutes for Heroku to automatically detect changes in your github repo and effect the changes on the app.
  • You can now refresh that error page and see your hard work paying off

Alt Text

Adding MongoDB

You must have noticed that other routes are not functional. Yes, it is because we have not included our database.

Remember that the URL to our database is in our .env file. But our .env file is not included in our project on github after we pushed it. So we have to directly add the mongoDB URL into our heroku app.

Let's do that...

  • Navigate to the settings of your app https://dashboard.heroku.com/apps/<your_app_name>/settings

Alt Text

  • Scroll down to the Config Vars section
  • Add the key and value of your database

Alt Text

That is all!!! Your App should be working fine now...

Testing

The easiest way to test if it is working is to try the login endpoint

Alt Text

Mine Worked!

Conclusion

We started out by cloning a the project from our last tutorial. Next, I pointed you to how to push a project to github. We then created a heroku app where we hosted out project from github with ease. Finally, we added our database URL to the app and our app works perfectly like it worked locally.

I hope you have enjoined every bit of this tutorial as I have enjoyed while creating it.

See you in my next tutorial.

Top comments (18)

Collapse
 
mirandaftiago profile image
Tiago Miranda

Hi Samson,

I'm getting some issue with the backend and the configuration of Heroku, which I can't figure out what's going on.

On the localhost testing, everything works fine.
Any clue?

Image description

Collapse
 
ebereplenty profile image
NJOKU SAMSON EBERE

Hi Tiago,

Please check if your configurations are correct. It could be because the database isn't connected.

Collapse
 
mirandaftiago profile image
Tiago Miranda

I've followed your instructions step by step, and have check and re-check it.
Would be too much to ask one "eyes-on" from your side and maybe you spot something I haven't?

If you wish, I can send the heroku credentials to you. by email, I guess?

Thread Thread
 
kon5ky profile image
Kon5ky

By chance did you find a solution and would mind sharing? I'm stuck on the same step, somehow the database is not properly connected, but followed every step on tutorial.

Thread Thread
 
mirandaftiago profile image
Tiago Miranda

Sorry I haven't. Kinda opted out for another solution...

Collapse
 
codemight profile image
Kevin B

Hello Njoku,

Correct me if I'm wrong, but I believe the link on step one "Clone the project here" directs to the server-tutorial repo on Github when it should direct to the auth-backend repo.

The auth-backend repo is the Node.js server that has correct db setup for MongoDB

I happened to find out by browsing your repos on Github.

Correct link is: github.com/EBEREGIT/auth-backend/b...

Collapse
 
ebereplenty profile image
NJOKU SAMSON EBERE

Thank you for that observation. You are really detailed 😊

Collapse
 
aroramahima89 profile image
aroramahima89

I am still getting that application error even after creating procfile..Can someone please help me out

Collapse
 
ebereplenty profile image
NJOKU SAMSON EBERE

Please ensure that your Procfile is pointing to the right file

Collapse
 
aroramahima89 profile image
aroramahima89

Yes it is pointing to right file

Thread Thread
 
ebereplenty profile image
NJOKU SAMSON EBERE

In that case, I will suggest that you go through your application from the beginning. You may have missed a thing or 2

Collapse
 
minhhunghuynh1106 profile image
igdev

github.com/igdev116/facebook-clone...
I can't push my server to Heroku. It's always "Application Error"
Can you help me? Thanks a lot!!

Collapse
 
ebereplenty profile image
NJOKU SAMSON EBERE

Do you have procfile already created at the root directory?

The procfile is meant to direct heroku to the entry point of your application. Without it, Heroku will be confused and throw Application Error

Collapse
 
bajahranks profile image
Ravi Lamontagne

This was very helpful. Thanks

Collapse
 
ebereplenty profile image
NJOKU SAMSON EBERE

This is good news. I am happy to learn this

Collapse
 
germoedlp profile image
GermoEDLP

That Procfile file save me!!! I love you so much..... Thank you.

Collapse
 
ebereplenty profile image
NJOKU SAMSON EBERE

Wow... I am happy I could be of help. Welcome

Thank you for reading

Collapse
 
hafizjunaid971 profile image
Hafizjunaid971

Still i m facing these erro plase help me
github.com/Hafizjunaid971/fleet git repo

Some comments have been hidden by the post's author - find out more