Hello good people, I recently worked on a personal E-Commerce project. I choose MERN stack as it would have been a good learning experience. In this article, I will describe how to deploy a MERN Stack Application to Heroku using GitHub Actions.
MERN Stack
MERN Stands for MongoDB, Express JS, React JS & Node.js, These technologies are used together to build web applications. Here Node.js and Express bind together to server the backend, MongoDB provides a NoSQL database to store the data and frontend is built using React whee user interact with. All these four technologies are open-source, cross-platform and JavaScript based.
As JavaScript is used throughout to build a Fullstack application, developers do not need to learn and change the context of using different programming languages to work on different aspects of a web application.
What is GitHub Actions ?
In my previous article on Deploying an Angular Application to Firebase using GitHub Actions i have explained about GitHub Actions in detailed. As a summary GitHub Actions makes it easy to automate all your software workflows now with world-class CI/CD. You can build, test and deploy your code right from your GitHub repository.
To learn more about GitHub Actions : https://github.com/features/actions
Wait, Are you a Student ??
In this project i have used MongoDB Atlas & Heroku Cloud. Both are not actually Free. (Yes, they have free tier too). There is way to get these stuffs for free. GitHub Education offers a Student Developer Pack where you will get hundreds of tools and platform access for free while you are a student.
GitHub Student Developer Pack helps you as a student to ship software like a pro. Ensure that you learn by doing, use these tools to improve your skills. Be creative, these tools would allow you to build and develop brilliant innovations and make the world better. Believe me, this pack helped me lots for my academic projects including my final year research. You just need to be enrolled in a University and having a University email.
To learn more about the pack : https://education.github.com/pack
Let's Deploy.....
I have two folders, one for backend and another one for frontend (as usual). I have decided not to deploy frontend & backend separately. Instead i am going to server the built react project as static files using Express.js.
We can serve the built react project without moving the build folder to the backend directory. But i am going to deploy only the backend folder to Heroku. So i just moved the build folder inside the backend directory. Or else you can set the custom path to build your react project too.
Next step is to match the route to serve the static files such as html, css, js and images. express.static built-in middleware function in express can be used to achieve this.
Now, whenever the server hits with the / route it will serve the built react application in node server.
app.js
const path = require("path");app.get("/", (req, res) => {
res.sendFile(path.join(__dirname, "build"));
});
Now it's time to create the application in Heroku. Go to your Heroku Dashboard and create a new application.
Next go to your Heroku Account settings and get your secret API Key.
 |
| Heroku Account API Key |
As a best practice we should not commit our .env config file to git. (It should be in our .gitignore). Heroku allows us to define the env vars on Heroku. We can do this using Heroku CLI or Heroku Dashboard. I am a kind of person who don't like to install all the CLIs on our PC. So i am going with Heroku dashboard to setup my config vars. Go to your project settings and configure your env vars as shows in the below image.
 |
| Configure Environment Variables in Heroku |
We all done with Heroku works and configured node server to serve the static site contents. Let's move to GitHub to setup our CI/CD Pipeline. As the first step, go to your GitHub Repository Settings and create a new secret and store your Heroku API Key. (You can refer my previous article for the screenshots)
Now go to the actions tab in your GitHub Repository and click set up a workflow yourself.
 |
| Create new GitHub Action |
Now modify your YAML file (.yml) as shown below.
We skipped creating the heroku config file called Procfile and configured that one in our GitHub Actions as in the last line.
Also you can setup custom branch deployment, deploy as containers, heroku health checks using the actions. To learn more about deploy-to-heroku action visit this link.
Alright, let's commit the file to the project now. Now as per my workflow code, every time you push to the main branch in the repository, the commands will fire off automatically and will deploy the application to the Heroku Cloud. Now go ahead and make some changes in your project, then push it to GitHub and watch the workflow performs in the Actions tab.
 |
| GitHub Actions Triggers |
Cheers..!
Live DEMO : https://mern-ecommerce-v1.herokuapp.com/
Cool
ReplyDeleteThanks aiya..!
DeleteThe live demo is not working. I have done an identical process, using solid-js instead of react, but i struggling to set up the access to the build directory from express.
ReplyDelete