Writing your first pipeline using GitLab CI/CD

4 min readJan 8, 2020

GitLab includes utilities that allows us to create pipelines that can be used for CI (Continuous Integration) and CD (Continuous Delivery)

We will be creating a pipeline for a react project created using create-react-app. The pipeline will do 3 functions.

Building the project
Running the unit tests
Deploying our file

First, we will start by creating our react app by running the following command

npx create-react-app my-app

Then we will go over to GitLab and login then create a repository and upload our project files using the following commands

cd my-app
git remote rename origin old-origin
git remote add origin YOUR_REPOSITORY_URL
git push -u origin --all
git push -u origin --tags

Now we have the repository pushed to GitLab, It’s time to create our CI/CD file.

Create a new file called “.gitlab-ci.yml” in the root of the repository. The gitlab-ci file is a yaml file that contains the scripts that will be executed by the GitLab Runner. Our pipeline will run under docker containers.

Let’s start by defining the docker image that will be used by the pipeline

image: node:latest

This means that all jobs which do not have an image provided will run under the node image.

Now lets define the 3 stages that the pipeline will do; Build, Test and Deploy.

image: node:latest
stages:
 - build
 - test
 - deploy

This means that we can now assign jobs to one of the stages above.The ordering of elements in stages defines the ordering of jobs’ execution. We will start by defining 3 jobs, build, test and deploy and we will give each their own stage in the pipeline.

image: node:latest
stages:
 - build
 - test
 - deploybuild:
  stage: build
  script:
    - test:
  stage: test
  script:
    - deploy:
  stage: deploy
  script:
    - 
    -

Next, we will define what happens in every job in the script key, we will start by the build script. In case of React, we will run 2 commands to build the project. npm install to install dependencies and npm run build to build the project. We will add an artifact that can be downloaded. Job artifacts are uploaded to GitLab and are downloadable as a single archive using the GitLab UI or the GitLab API.

build:
  stage: build
  script:
    - npm install
    - npm run build
  artifacts:
    paths:
     - build/

For testing the project, we will run npm test.

test:
  stage: test
  script:
    - npm test

For the deploy part, we will be deploying to Amazon’s S3 bucket therefore we need to do some extra changes to be able to use the aws cli for the upload. We will start by overriding the base image and using a docker image that has the aws cli installed. Then we will use the following command to upload our files from the build stage.

deploy:
  stage: deploy
  image: tstrohmeier/awscli
  script:
    - aws s3 cp build/ s3://react-cicd-test/ --recursive

As we do not want to automatically deploy, we will add a manual flag in the deploy job. Now for the deployment, a button click will be needed for the deployment.

deploy:
  stage: deploy
  image: tstrohmeier/awscli
  script:
    - aws s3 cp build/ s3://react-cicd-test/ --recursive 
  when: manual

Now the file should look like this

image: node:lateststages:
 - build
 - test
 - deploy
build:
  stage: build
  script:
    - npm install
    - npm run build
  artifacts:
    paths:
     - build/test:
  stage: test
  script:
    - npm testdeploy:
  stage: deploy
  image: tstrohmeier/awscli
  script:
    - aws s3 cp build/ s3://react-cicd-test/ --recursive 
  when: manual

At this point, the pipeline should run and be able to deploy our react project onto the S3 bucket, however the aws cli needs credentials to be able to upload the files on to our bucket.

So we need to add some environment variables on to the repository. On GitLab we will go to our repository then navigate to Settings -> CI/CD -> Variables

Add description