Deploying Node App with MongoDB to Heroku

After creating your node app, and testing it locally, you might want to deploy your app to the public servers for everyone to be able to use it, which is the ultimate goal of every web developer.

In this tutorial, it is being assumed that you have already deployed your MongoDB to the NoSQL based servers such as MongoDB Atlas. If not, head over to this MongoDB setup guide.

Step 1:

Go to your project folder and create a .gitignore file, and write there, the names of the files or folders which you don’t want to be pushed to git.

A basic .gitignore file looks like,

/node_modules
npm-debug.log
.DS_Store
/*.env

Step 2:

Create a .env file and put the server credentials there and modify app.js (In this tutorial, we are considering app.js file as the file where you have put all of your app’s logic.)

The .env file with two variables looks like:

N1_KEY="your username on mongo cloud"
N1_SECRET="your password on mongo cloud"

Step 3:

Modify your app.js to require dotenv and set variables to match env variables and change your code to use these variables. Install dotenv package (npm install dotenv). Modify app.js for listening port of heroku servers.

For installing dotenv node module, enter the following command into your project terminal

$ npm install dotenv

app.js changes for env variables

require("dotenv").config(); 
const srvr = process.env.N1_KEY; 
const srvrCred = process.env.N1_SECRET; 
const mongoDB = "mongodb+srv://" + srvr + ":" + srvrCred + "@uniqueClusterID.mongodb.net/dbName";

Changes for listening port

app.listen(process.env.PORT || 3000, function () { 
console.log("Server started.");
});

Step 4:

Update package.json for your version of node.

In your terminal, type node –version. Then, in package.json, after line “license” add your node version. (if you don’t have a package.json file then run git init (See step 6 for this)).

"license": "ISC", 
"engines":
{ 
"node": "node-version" 
},

Step 5:

Heroku requires a file named Procfile for starting the app.

This needs to exist in the root directory of your project to explicitly declare what command should be executed to start your app. So, create file named Procfile (no extension).

Content of file is:

web: node app.js

Step 6:

Initializing git into your project folder.

Enter the following command into the project folder terminal.

$ git init

This will create a package.json file. Check it to make sure that all you expect to be in there is in there. This initializes an empty Git repo locally.

Step 7:

Adding project files to the git staging area.

Enter the following command:

$ git add .

Step 8:

Now, we need to commit the files to the local git repository.

Enter the following command:

$ git commit -m "Initial Commit"

Step 9:

Now, we need to add the Heroku git remote to our local git repository.

Enter the following commands:

$ heroku login

It will ask you for the email id and password of your heroku account. For newer versions of heroku, it also provides a browser login support.

$ heroku create

This will create an app on heroku and also a remote git copy on heroku (which is NOT a replacement for GitHub). Make a note of the app URL, which is the URL which you would share with the world 😛

Step 10:

Finally enter the following command,

$ git push heroku main

If, you are shown some errors, Heroku log will show log file in case something goes wrong. See Note 1 below.

Step 11:

We created a .env file to store confidential data but we have added that .env file to .gitignore so that it is not copied to our local repo when we do git commit.

So, when you PUSH to Github or Heroku, your confidential information is not there for public viewing. But since the code now needs the environment variables, how is it supposed to work on Heroku without the .env file?

Heroku allows you to set up Config Vars. These are the same as environment vars, but by setting these up (identical names to what you use in your .env file), these are secure on heroku site.

Login to Heroku, click on your app, then, Settings and click Reveal Config Vars. If you haven’t set them up, then you can add these here. Your code will look for environment variables. Config vars work as environment (env) variables.

Congrats, you have successfully made your app live on the World Wide Web.

Note 1:

After you run git init, does it have (master) at the end of the command prompt? If it does, you should consider (strongly consider) RENAMING the default local Git branch from master to main. You can do this by running this command:

git branch -m main

Or, better run the following command which will set the default branch to main globally so you wont have to remember to rename every time you create a git repo. Set it once, globally, by running this command:

git config --global init.defaultBranch main

Why is this important? Because the default branch on Github is main and you can run into issues with heroku if its not main also. See this article for more information Master vs Main