Automate MERN App Deployment with GitHub Actions CI/CD
As you continue to develop your software, you must also continue to integrate it with previous code and deploy it to servers. Manually doing this is a time-consuming process that can occasionally result in errors. So we need to do this in a continuous and automated manner, which is what you will learn in this article.
Let's Get Started
Consider our productivity app. There are numerous steps we must complete, from building the application to pushing it to the docker hub. First, we must run tests with a command to determine whether all tests are passed or not; if all tests are passed, we build docker images and then push those images to Docker Hub. If your application is extremely complex, you may need to take additional steps. Now, we're doing everything manually, which takes time and can lead to mistakes.
To address this problem, we can create a CI/CD Pipeline. So, whenever you add a feature or fix a bug, this pipeline is triggered, which automatically performs all of the steps from testing to deploying.
What is CI/CD and Why it's Important?
Continuous Integration and Continuous Deployment is a series of steps performed to automate software integration and deployment. CI/CD is the heart of DevOps.
From development to deployment, our MERN app goes through four major stages: testing, building docker images, pushing to a registry, and deploying to a cloud provider. All of this is done manually by running various commands. This must be done every time a new feature is added or a bug is fixed. However, this will significantly reduce developer productivity, which is why CI/CD is required to automate this process. (In this article, we will cover till pushing to the registry.)
What is "GitHub Actions"?
A CI/CD server is required to run a CI/CD pipeline; this is where all of the steps written in a pipeline run. There are numerous services available on the market, including Jenkins, Travis CI, Circle CI, GitLab CI/CD, AWS CodePipeline, Azure DevOps, and Google Cloud Build. I chose GitHub Actions because it is natively integrated with Git, works well with GitHub, and is extremely simple to use. It is also sufﬁcient for small/medium-sized applications such as ours. For more complex applications, you can use any of the other services listed above.
How do GitHub Actions work?
GitHub actions is not a CI/CD platform, CI/CD is one of its use cases.
Workflows are triggered by events such as pull requests, pushed, PR merged, the issue created, and a few others. For example, you can trigger a workflow running a bot that says "Thanks for opening the issue, our maintainers will review it." whenever an issue is created.
Workflows are YAML files that contain all of the instructions that are executed after an event is triggered. Workflow files are typically kept in the
Jobs is a group set of steps called a job. Each workflow must include at least one job. A job is a set of steps that must be executed in a virtual environment.
This is my favorite feature of GitHub Actions. Runners are virtual environments where jobs are carried out. You can either use GitHub-hosted runners that contains pre-installed packages or host your own.
Adding a CI/CD Pipeline to the MERN App
- Get source code from here if haven't followed previous tutorials in this series.
- Read previous articles in this series so that you won't get confused.
- Basic YAML understanding.
- GitHub account.
To begin, we must define pipeline configurations in a YAML file. Where should I save this YAML file? - If you're familiar with GitHub, you've probably heard of the
.github directory, which is a special directory used for GitHub-specific items such as issue templates, pull request templates, workflow files, and so on. So we must place our pipeline file in the
workflows folder, which is located in the
Go ahead and create a YAML file and name it something like
pipeline.yaml. Your folder structure should now look like this:
First, we have to mention the name of the workflow.
Then, mention a trigger - on commit/on push/on pull request, etc.., along with branches.
Since our application uses some environment variables while running tests, we have to set environment variables in the YAML file that will be used by workflow steps.
But, first, let's add environment variables in the GitHub repository. To do so, go to repository Settings -> expand Secrets and variables -> Actions.
Click on New repository secret and add the following secrets.
Now in the YAML file, you can access them like this:
Let's get to the interesting part! These are the only steps we have to perform with GitHub Actions. As simple as that.
Start by adding jobs, let's add a job called
Adding Continuous Integration
In this job, let's add steps to pull code from the repo and run some tests.
name- You can provide a name for each step.
uses- Set which action to use.
checkoutis a pre-defined action provided by GitHub that checks out a repo
working-directory- Set working directory. This is where all the commands mentioned in that step will run.
run- Run commands. You can run multiple commands by putting
|(pipe). Learn more about YAML in this YouTube tutorial.
Now if you push these changes to GitHub. It will automatically run your workflow. You can see the running workflow in the Actions tab of your GitHub repository.
Click on the commit and then the job to see the running steps.
Adding Continuous Deployment
Now it's time to build docker images and push them to the docker hub.
- Before pushing to the docker hub we need to log into the hub. That's why there's a step before pushing images. With
withwe can use secrets directly without setting them in the environment.
github.run_number- This is because it's a good practice to give a unique identifier for every image on the hub. And this environment variable (
run_number) will be generated automatically by GitHub Actions.
Here's the complete YAML file.
Learn more about CI/CD and GitHub Actions.
- GitHub Actions 101 written series by Victoria Lo.
- Introduction to GitHub Actions CI/CD by Kunal Kushwaha.
- CI/CD Tutorials YouTube playlist by TechWorld with Nana.
In the next article, we will learn how to deploy to a cloud service provider (Generally the last step in a CI/CD pipeline).
Build strong pipelines. Don't be like this 💀 - https://youtu.be/M_jjG9K5KEo
Subscribe to the newsletter for more, seriously!
LEAVE A COMMENT OR START A DISCUSSION
5 min read
Hiring Angular Developers in 2023: Insider Tips & Strategies
Does your company struggle to create a modern, high-performance, cross-platform web app? Do you desire cost-effective development without compromising future software quality? Many web development teams utilize Angular to build complicated single-page apps. Hiring Angular programmers is difficult.
8 min read
How Feature Flags Can Help You Ship Faster and Smarter?
Are you tired of long development cycles and hesitant to push new features to production? Feature flags may be the solution you're looking for. In this blog post, we'll explore how feature flags can streamline your development process, reduce the risk of errors, and give you more control over the features you release to your users. From testing new features to rolling out changes to a select group of users, feature flags can help you do it all. Keep reading to learn how you can start using feature flags in your development workflow today.