Configuring a GitLab CI/CD pipeline in your react app.

CI/CD pipeline process flow

In addition to hosting a code repository, GitLab is an open source collaboration tool with many other useful features. In addition to tracking bugs, hosting packages and registries, managing Wikis, and setting up CI and CD pipelines, you can also do other things. The majority of us concur that the fundamentals of devops are Continuous Integration (CI), Continuous Delivery (CD), cloud infrastructure, test automation, and configuration management. Depending on the size of your project, CI/CD setup and implementation may be a burden. But here are some reasons why it is unquestionably vital;

In an Agile environment, requirements change frequently over time, making it essential to have a set of automated tests and integrate code continually in order to deliver products that are bug-free. Having a suitable CI/CD system gives you the assurance to experiment, put new features into practise, and release changes promptly.

In this tutorial, I am going to go through the steps of configuring a GitLab CI/CD in your react project. I’ll assume you already have a repository for your project in GitLab.

First step is to add a .gitlab-ci.yml file to the root of your project.

cd my-react-project
touch .gitlab-ci.yml

This will generate a .gitlab-ci.yml file in your project root. The yaml file hold all the steps for gitlab to trigger a pipeline job and stages.

Next, I’ll add some basic stage instructions to the gitlab file. The stages will be test, build and deploy stages. The installation and test stages will install all project dependencies and run the unit tests. The build stage builds the project and the deploy stage deploys the project to the specified deployment environment.

default:
  image: node:14.17.6
stages:
  - installation
  - test
  - build
  - deploy
installation:
  stage: install_dependencies
  script:
    - npm install
build:
  stage: build
  script:
    - npm run build
test:
  stage: test
  script:
    - npm run test
  artifacts:
    reports:
      junit:
        - junit.xml
deploy:
  stage: deploy
  ...

The configuration above shows the basic stages in CI/CD jobs. The image specifies a node version image to be pulled to provide a node environment to carry out the stages. The stages specifies all the stages the pipeline will go through. When you push to the gitlab repository with this file in the repository, the CI pipeline jobs will start execution automatically. You could also specify the branches that should only trigger the CI executions as well.