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 .
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 gitlab.com which has free options.
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:
When we are done installing create-react-app, we can create our new app by running :
We can then run our project in development mode by running the following commands inside the project folder:
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.
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.