How to Deploy Your MERN Stack Application on Heroku

Easily deploying a web app made with React, Node.js, Express, and MongoDB on Heroku by using a post-build script and connecting it with GitHub for automatic deployment of the app.

Small Introduction to the MERN Stack and Heroku

MERN is an acronym for a JavaScript web app made using: React (for the frontend UI part), Node.js and Express (for the backend, managing APIs for the app), MongoDB (for storing the data). Right now, it is a very famous web stack for making full-stack projects because of its ease to develop a full-fledged application.

Heroku is a PaaS(Platform As A Service) software used to deploy applications. Now it supports various programming languages like Java, Node.js, Scala, Clojure, Python, PHP, and Go.

Requirements before moving ahead:

1. Any IDE of your choice like(VSCode, etc.)
2. Web-app made using MERN stack.
3. Heroku account.
4. GitHub repository. (It’s optional but it is preferred to make a code repository).

Firstly install Heroku CLI which will help us in executing commands from our command-line tool. Check the installation by executing the following command:

heroku -v

Sign In to your heroku account using command:

heroku login

Arranging code-base for deployment

Now we have to arrange our code in a way that it could be uploaded to Heroku and it should work after uploading.

Important: Carefully see the directory structure and arrange yours accordingly.

• Your React application should be inside a directory named client/frontend inside the Node.js project.

Main_Project_dir
    - Controller
    - frontend #contains all the code for our frontend(React).
    - Model
    - node_modules
    - Routes
    - .env
    - .gitignore
    - app.js
    - server.js
    - package.json 
    - package-lock.json

2. Making our routes in a such a way that when routes that are not API ones are hit, then our website (frontend) should be returned.

Go to your main file of Node (like app.js) and add a route that will return our frontend when the API endpoint is not hit (means everything other than the API route our frontend will be returned).

My React project is named frontend and we will use a post-build script to build our react application when we deploy. Add the following piece of code at the end of the main file like- app.js or index.js.

// server static assets if in production
if(process.env.NODE_ENV === 'production'){    
    app.use(express.static('frontend/build'))  // set static folder 
    //returning frontend for any route other than api 
    app.get('*',(req,res)=>{     
        res.sendFile (path.resolve(__dirname,'frontend','build',         
                      'index.html' ));    
    });
}

3. Writing scripts in package.json file for our app to work.

Open your package.json file and write the following script to start the server and build process whenever we deploy our app.

• To start node server write the following code :

“scripts":{
    “start”:"nodemon server.js",
}

• Post build script for our frontend to install the npm libraries needed and building the app (if your React project name is client, then use client instead of frontend).

“scripts":{
     "heroku-postbuild":"NPM_CONFIG_PRODUCTION=false npm install      --prefix frontend && npm run build --prefix frontend"
}

Making Heroku app and deploying the project.

• Go to Heroku’s dashboard and make an app. https://dashboard.heroku.com/
• Add the Heroku app’s remote to our repository using command(replace projectname with your project name):

heroku git:remote -a projectname

Important: Make sure all the files are there and .gitignore files are important too and don’t upload .env file.

Make the env variable by going to settings of the app.

• Now write the following commands to deploy the app:

1) $ git add .  // this will stage the code 
2) $ git commit -am "your commit message here"
3) $ git push heroku master // this will push code to heroku

Hurray! You have deployed the app😎😚👾

Now you can check your app by going into the settings and there you will find the url of the app like this: https://yourappname.heroku.com

Tip: Connect your Github repository for automatic deployment by going into the deploy tab and then connect the Github repo. Now you just have to push the code to GitHub and then your app will be automatically deployed.

Got stuck?😢🤔🤯

If you find any errors, check the logs carefully and Google it out. I am sure there will be an answer to your question on StackOverflow. If you are not able to solve the issue, comment it down or connect with me using my portfolio website: https://www.umangagrawal.codes/

If this article helped you or solved your problem, don’t hesitate in buying me a coffee.☕😅😋

More content at plainenglish.io