Configuring CI/CD for Testing and Deployment

Our application is finally ready to go to production and meet its first users. We have built its features and implemented all the required checks, such as linting, testing, and so on, which will give us the confidence that the application code is working correctly.

However, currently, all those checks must be executed on our local machine. Whenever we want to push a new feature to production, we need to run all the scripts and then redeploy the application manually, which is a very tedious process.

In this chapter, we will learn what CI/CD is. Then, we will learn what GitHub Actions is and what are the main parts of a GitHub Actions pipeline. We will then learn how to create a CI/CD pipeline that will automate the verification and deployment of the application to Vercel.

In this chapter, we will cover the following topics:

• What is CI/CD?
• Using GitHub Actions
• Configuring the pipeline for testing
• Configuring the...

Technical requirements

Before we get started, we need to set up our project. To be able to develop our project, we will need the following things installed on our computer:

• Node.js version 16 or above and npm version 8 or above.
• There are multiple ways to install Node.js and npm. Here is a great article that goes into more detail: https://www.nodejsdesignpatterns.com/blog/5-ways-to-install-node-js.
• VSCode (optional) is currently the most popular editor/IDE for JavaScript/TypeScript, so we will be using it. It is open source, has great integration with TypeScript, and we can extend its features via extensions. It can be downloaded from https://code.visualstudio.com/.

The code files for this chapter can be found here: https://github.com/PacktPublishing/React-Application-Architecture-for-Production.

The repository can be cloned locally with the following command:

git clone https://github.com/PacktPublishing/React-Application-Architecture-for-Production.git...

What is CI/CD?

Continuous integration/continuous deployment (CI/CD) is a method of delivering application changes to its users in an automated way. CI/CD should usually consist of the following parts:

• Continuous Integration is the automated process of verifying that the code has been built, tested, and merged into a repository
• Continuous Delivery means delivering changes to the repository
• Continuous Deployment means publishing the changes to the production server, where the changes are made available to the users

Now, let’s think about how we could implement CI/CD for our application. We already have all the parts – we just need to put them together. The process would work like this:

• Run all code checks for the application (unit and integration testing, linting, type checking, format checking, and so on)
• Build the application and run end-to-end tests
• If both processes finish successfully, we can deploy our application

Here...

Using GitHub Actions

GitHub Actions is a CI/CD tool that allows us to automate, build, test, and deploy pipelines. We can create workflows that run on a specific event in the repository.

To understand how it works, let’s have a look at some of its components in the following sections.

Workflows

A workflow is a process that can run one or more jobs. We can define them in YAML format within the .github/workflows folder. Workflows can be run when a specified event is triggered. We can also re-run workflows manually directly from GitHub. A repository can have as many workflows as we want.

Events

An event, when fired, will cause the workflow to run. GitHub activities can trigger events, such as pushing to the repository or creating a pull request. Besides that, they can also be started on a schedule or via HTTP POST requests.

Jobs

A job defines a series of steps that will be executed in a workflow. A step can be either an action or a script that can be executed...

Configuring the pipeline for testing

Our testing pipeline will consist of two jobs that should do the following:

• Run all code checks such as linting, type checking, unit and integration testing, and so on
• Build the application and run end-to-end tests

Code checks job

The code checks job should work as shown in the following diagram:

Figure 9.2 – Code checks job overview

As we can see, the job should be straightforward:

1. First, we need to provide environment variables to the application.
2. Then, we need to install the dependencies.
3. Next, we must run unit and integration tests.
4. Then, we must run linting.
5. After, we must check the code format.
6. Finally, we must run type checking.

Within jobs, let’s add the job that runs these tasks:

jobs:
  code-checks:
    name: Code Checks
    runs-on: ubuntu-latest
    steps:
  ...

Configuring the pipeline for deploying to Vercel

When our testing jobs finish, we want to deploy the application to Vercel. To start deploying to Vercel from GitHub Actions, we need to do a couple of things:

• Have a Vercel account
• Disable GitHub integration for Vercel
• Link the project to Vercel
• Provide environment variables to GitHub Actions
• Create the job that will deploy the application

Having a Vercel account

Vercel is straightforward to get started with. Visit https://vercel.com/signup and create an account if you don’t have one.

Disabling GitHub integration for Vercel

Vercel is a platform that has excellent integration with GitHub out of the box. This means that whenever we push changes to the repository, a new version of the application will be deployed to Vercel automatically. However, in our case, we want to verify that our application works as expected before the deployment step so that we can perform this task from the CI/CD pipeline...

Summary

In this chapter, we learned that a CI/CD pipeline is a process that allows the automation of code changes and delivery. We also got introduced to GitHub Actions and the parts that allow us to create the CI/CD pipeline to automate testing and deploying our application.

After that, we defined three jobs for the workflow. With these jobs, we automated the process of running all the required checks, tests, and deployments. Finally, we learned how to deploy to Vercel from the CI/CD pipeline and deliver the application to the users.

This concludes the MVP version of our application. In the next chapter, we will cover some of the potential features and improvements we can make to the application.