How to deploy MERN application on Heroku(Easiest way!!)

As a beginner, when we first start building our projects, we always think of deploying our application and show it to our friends or family or share around on our social media. But there are so many portals out there and so many resources, we often get confused. I, myself, when I first started to deploy, got myself bombarded with the resources online.
After reading and watching many articles, documentation and tutorials, I finally deployed my first project. But as I was following the resources, I faced many issues and often have to look out for more resources to fix them.
At the end of all of that, I got an idea to write out a blog which will act as a guide to deploy the project in the most easiest way possible to help my fellow coders who have just started with their joruney.

So, to make your journey a little less painful,here are the instructions to follow. Let’s start....

Firstly, make sure that your Project structure looks like this.

Step 1

Initialise git directory in the root of your project by running the following command in cli

Note: Make sure you are in the root directory in cli too :)

git init

Step 2

To deploy an application on Heroku one needs to have a Heroku account. Click on the link and create one.

After that, download Heroku CLI and confirm the installation. To confirm the installation, run the following command in cli

heroku version

Step 3

After that Login in to your Heroku account with the following command

heroku login

This will prompt you to enter email and password and after successfully logging in, it will lead you to the chrome webpage of Heroku.

Step 4

Next, to deploy the app we need a production build of the frontend/client side of the project.To create a production build, run the following command in the client/frontend directory.

npm run build

Note: Make sure your client/frontend directory has build command under scripts section in package.json

After successful build, there must be a new directory under the root directory of client/frontend by the name of “build”.

Step 5

Now, add the following code at the end of server/index.js (the main/entry file of the root directory)

const path = require("path");

// This command will import the client build folder to the server.

app.use(express.static(path.resolve(__dirname, "./client/build")));

/* This command will redirect all request to index.html in build directory.*/

app.get("*", function (request, response) {
  response.sendFile(path.resolve(__dirname, "./client/build", "index.html"));
});

Step 6

After that modify the package.json file in the root directory of your project by adding the following command under scripts section.

“heroku-postbuild”: “cd client && npm install && npm run build”

Step 7 (Optional)

Now, the next step will be creating a proc file. In the root directory make a new file with the name of Procfile and add the following code

web:npm start

Step 8

After successfully doing the above steps, its time to create the Heroku app. Run the following command

heroku create app-name

Note – Make sure that you run the above command in the root directory of your project.

Also, make sure that your app name is unique, otherwise, it will keep giving errors.

Step 9

Now, in the end run the following commands in order

git add . // add files in git directory

git commit -m “your message” // commit the changes made to the branch

git push heroku main // push the code to the main branch

After executing the last line, the app will be deployed and the url for the same will be logged in the cli.
If you want you can also open the application using cli by running the command

heroku open 

You can also access the deployed projects from the dashboard on Heroku web.

(This might happen to most of you, but not everyone)

But wait, if you click on the url, the app is not working. Why’s that?

Do you have a .env file in your project?
If yes, then go ahead and follow few steps to fix the issue.

Step 1: Go to your dashboard and click on the application name of the project you are currently working on.

Step 2: After that click on settings and go down to the config vars section

Step 3: Click on reveal config vars and you’ll get the section to enter all the details from .env in that

Enter the details and make sure to save at the end! :)

And….there you go!! The application is now deployed and should be running just perfect.

Twitter – karan_346
Github – JavaKaran