Setting up Gitlab-CI pipeline

So I recently had to set setup up a gitlab CI pipeline for a small React JS project I’m currently working on. In this post I will go through the steps I took in setting it up .

Install Gitlab

The first thing to do is to setup gitlab. I installed git lab using digital ocean’s one click install and deploy. It is fairly straight forward and only requires following the setup wizard steps. Another alternative is to use an instance hosted on which has free options.

Create Repo

Once gitlab was up and running I created a React JS repo using Create React App. Create React App is a tool that let’s you start building your React JS app fast without having to worry much about the configurations.

To start using it, we first need to install it globally:

npm install -g create-react-app

When we are done installing create-react-app, we can create our new app by running :

create-react-app new-app

We can then run our project in development mode by running the following commands inside the project folder:

npm start

To verify that all is fine, our project should be accessible on http://localhost:3000

Create CI pipeline

The first step in creating a gitlab Continuous Integration pipeline is to add .gitlab-ci.yml file and save it in the root of the project directory.

The .gitlab-ci.yml file defines what the CI does with the project. In the example gitlab-ci.yml file below we have one job which is testing.

  - 'which ssh-agent || ( apt-get update -y && apt-get install openssh-client -y )'
  - eval $(ssh-agent -s)
  - ssh-add <(echo "$SSH_PRIVATE_KEY")
  - mkdir -p ~/.ssh
  - '[[ -f /.dockerenv ]] && echo -e "Host *\n\tStrictHostKeyChecking no\n\n" > ~/.ssh/config'

  stage: test
    - npm install
    - npm test
    - npm run build
    - scp  -r build/*  root@example:/var/www/new-app
    - node_modules/

The second step is to create a runner. A gitlab runner executes the commands defined in the .gitlab-ci.yml file. It could be a docker container, a virtual machine, or a bare metal machine. If the runner is successfully setup it should be visible on the runners page.