Hosting a Nodejs and MongoDB App on Heroku
Tags: node, mongodb, heroku, tutorial
Published: 2020-10-18 14:46:22

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](https://dev.to/ebereplenty/pushing-to-github-and-hosting-on-heroku-for-free-kch), 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](https://dev.to/ebereplenty/authentication-with-nodejs-and-mongodb-part-4-4p37).

1. Clone the project [here](https://github.com/EBEREGIT/auth-backend).
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](https://media.giphy.com/media/bAplZhiLAsNnG/giphy.gif)

<a name="1"></a>
## 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](https://help.github.com/en/github/importing-your-projects-to-github/adding-an-existing-project-to-github-using-the-command-line)

2. [Adding an existing project to GitHub using the command line](https://www.softwarelab.it/2018/10/12/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](https://heroku.com/)

*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](https://dev-to-uploads.s3.amazonaws.com/i/msnum8scqj031dw53j27.JPG)

* Select the ``GitHub`` Deployment method

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/5edwt90cpy75b3uyqgvy.JPG)

* Search and select a repo
* Click on ``connect``

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/6rpr4heuqqa9gn4qy1rt.JPG)

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

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/4ka9c6781vft1gio7p0k.JPG)

* 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](https://dev-to-uploads.s3.amazonaws.com/i/7ksrclnfyjzzvn2nr4gc.JPG)

*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](https://dev-to-uploads.s3.amazonaws.com/i/pa4ohxetzg4o6a9ek53n.jpg)

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

![Tired](https://media.giphy.com/media/jAe22Ec5iICCk/giphy.gif)

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

<a name="8"></a>
### 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

```javascript
web: node index.js
```
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/k655prvq8m34jsbs3p37.JPG)

*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](https://dev-to-uploads.s3.amazonaws.com/i/cfdmvfquj0jsoxf4npeg.JPG)

## 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](https://dev-to-uploads.s3.amazonaws.com/i/ojmvtebcl4dg6hhbsme5.JPG)

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

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/jo0nlhdf81aeu5cw26n3.JPG)

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](https://dev-to-uploads.s3.amazonaws.com/i/op98eomewsw8n96hibbe.JPG)

Mine Worked!

## Conclusion
We started out by cloning a the project from our [last tutorial](https://dev.to/ebereplenty/authentication-with-nodejs-and-mongodb-part-4-4p37). 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.