Member-only story
Deploying MERN Fullstack Application on the Web for Free with Netlify and Heroku
A full-stack application consists of a frontend application, a backend server, and a database. MERN stack means that we use MongoDB, Express JS, React JS, and Node JS. You can follow my earlier tutorial at Creating a Simple MERN Fullstack Application to create a simple MERN application.
We need to host three separate entities. The frontend web app, the backend server, and the database. For MongoDB, we can easily use MongoDB Atlas to host it. I have explained the steps for creating a cloud instance of MongoDB using MongoDB Atlas in my previous blog linked above. In this blog, we will see how we can host the other two entities.
For the frontend React app, we will use a service called Netlify to host the web app. For the node server, we will use another service called Heroku. While it is possible to use a single service to host both the frontend and backend we have decided to use these two separate services due to the level of ease. Each platform is optimized for the two use cases. In addition, both offer generous free tiers for small-scale projects.
Deploying Node Server using Heroku
Navigate to https://id.heroku.com/login. You will need to create a new account if you do not have one already. After signing in, you will see a page similar to below.
Click on “new” button on the top right and select “Create new app”
You will see a page as follows.
Give a desired app name and click “Create app” at the bottom. You will be redirected to a page as follows.
Click on GitHub in the “Deployment method” section. You will need to provide authorization for Heroku app on Github so that it can gain access to…
