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 Github repos. Then search for your repo. In my case, I have a repo named “simple-node-server” in my Github at https://github.com/niruhan/simple-node-server. You can take a fork of this and follow along with the tutorial. Don’t forget to change the MongoDB URL to your MongoDB Atlas URL in the index.js file. You can read about how to do that in my previous blog at https://niruhan.medium.com/creating-a-simple-mern-fullstack-application-2cbcfbdf3940.
Click on “connect” and you should see a view as follows.
Click on “Deploy Branch” in the “Manual deploy” section. It will pull the code from your repo, build it, and deploy it. You will see an output as follows after successful deployment.
The view button at the bottom will have the link to your backend server URL. In my case it is https://simple-node-server-niru.herokuapp.com/. Now let’s deploy the frontend.
Deploying React App using Netlify
Navigate to https://app.netlify.com/. You will need to create an account if you do not have one already. You will see a page similar to the following after you log in.
Click on the “New site from Git” green coloured button and you will be redirected to the following page.
Click on Github and you will need to provide Github credentials to authenticate Netlify to access Github repositories. You can select the repository that contains your react app as shown below.
I have my React app hosted at https://github.com/niruhan/simple-react-app. You can take a fork of the repository and follow the tutorial if you do not have a React app yet.
Since our backend is at https://simple-node-server-niru.herokuapp.com/ we need to update the backend URL in our simple-react-app . Open up the project in your desired IDE and open the src/App.js file in the simple-react-app project. Modify the URL in the callAPI function as follows.
import './App.css';
function App() {
return (
<div className="App">
<header className="App-header">
<button onClick={callApi}>Call API</button>
</header>
</div>
);
}
function callApi() {
fetch('https://simple-node-server-niru.herokuapp.com/', { method: 'GET' })
.then(data => data.json())
.then(json => alert(JSON.stringify(json)))
}
export default App;After doing the URL change commit the changes to your GitHub repo.
In Netlify, after granting permission, you will see a screen as follows.
After selecting simple-react-app you will see the following deploy config page.
Select the branch to deploy as main and type the build command as npm run build . Click on deploy site. Once Netlify successfully builds and deploys you will see the following “Published” green colour message next to your build.
The URL to which Netlify has deployed your website will be shown as above. In my case it is https://mystifying-johnson-d35d1f.netlify.app/. Visit the link in your browser and you will see the website as below.
Click on the Call API button and you will see an output as follows. The React app calls the Node server which fetches data from MongoDB and returns to frontend. This data is then shown in the alert message.
