# Setup a CI/CD pipeline for React App  with Jenkins and Gitlab

### Introduction

This article helps you to automate the deployment of your React application using Jenkins and Gitlab pipeline on a remote web server.

### Prerequisites

* React application created and pushed in Gitlab repository.
    
* Gitlab user credentials used to push and pull the code.
    
* Running Jenkins instance on Ubuntu server with a valid domain or public IP (not localhost). Use this [article](https://amiitn.hashnode.dev/how-to-install-jenkins-using-docker-container-in-ubuntu) to install Jenkins on an Ubuntu server using the Docker container.
    
* Remote Ubuntu web server where we want to deploy an application. Nginx is already set up to serve this React application.
    

### Generate Gitlab Access Token

To use GitLab with Jenkins, we’ll need to generate an access token in GitLab, which you can do in **User Settings > Access tokens.**

Give the token name Jenkins, select all scopes and click on Create personal access token button to create a token.

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1681295786617/9609b9c5-4818-4466-a4bf-c3dd6e686cb0.png align="center")

### Add Gitlab Connection in Jenkins

In Jenkins, go to **Manage Jenkins > Configure system** and find the GitLab section.

To add a token that you previously generated, click on **Add** by the Credentials input and choose Jenkins. In the credentials dialogue, choose **GitLab API token** in the *Kind* input and paste your token from GitLab into the API token input field.

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1681299545888/a7687f9a-c311-4d3b-bef5-a7e5ef89a2ba.png align="center")

Give the connection name as Gitlab connection and type [https://gitlab.com](https://gitlab.com) as the host URL in *Gitlab host URL* input field.

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1681299943202/203aad26-0089-4283-8690-9b2ba1229c1b.png align="center")

Test this new connection by clicking on the *Test Connection* button you will get a success message. Finally, click the *save* button.

### Configure NodeJSInstaller

To run NPM scripts in the Jenkins instance, it is necessary to configure NodeJsInstaller.

Go to **Manage Jenkins > Global Tool Configuration > NodeJS**

Enter the name *Node Js Installer* in the Name input field and select the NodeJs version you wish to want to install. React app needs yarn npm package as a global dependency, so enter *yarn in Global npm packages to install* field. Click on the *save* button to finish the configuration.

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1681390275546/0a7ed8e8-022e-47ca-9c80-444066113e51.png align="center")

### Create CI pipeline

First, we will create CI pipeline to pull code from GitLab when the code is pushed to the GitLab repository and then create a build of the project.

To create a pipeline in Jenkins click on *New Item* in the dashboard

Enter the name of the pipeline in the input box and select *Freestyle project*

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1682079150273/21426b1a-f254-45f9-9157-8d40823a4894.png align="center")

Choose the GitLab connection that we have just created in the Gitlab Connection section

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1682079659307/f66f649a-f56c-418f-81ae-c96c162674e5.png align="center")

Choose Git as Source Code Management. Enter Gitlab repository URL. Add new credentials with Gitlab credentials username and password. These credentials will be used to clone the project in the Jenkins instance.

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1682081000384/371583f2-609f-46bc-aef3-983ca0f9476d.png align="center")

Enter the Gitlab branch name from where the code will be pulled from the repository.

See the below screenshot for the final configuration for the Source Code Management section. Here I have given *newChanges* a branch name.

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1682081369273/dc1be8a8-d062-4bdb-b7be-05596b0f08f9.png align="center")

Next, we have to configure *Build Triggers.* Here we will select which GitLab event the project build should get triggered.

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1682083877224/d84b0644-d0e0-492e-879c-c32c035b40c6.png align="center")

Here we have selected *Push Events.* That means when the code is pushed to the repository, the build should be triggered.

Now we have to add a webhook in GitLab that will trigger this build. Go back to Gitlab to add webhook. Go to **Settings** --> **Webhooks**. Copy the URL provided by Jenkins and paste it into URL input field of the form. Disable SSL verification if Jenkins is not on SSL and finally click on *Add Webhook* button

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1682590452646/9d77ed22-5ad7-48be-96a0-89754a8483eb.png align="center")

Next is the *Build Environment* configuration. Provide the configured NodeJsInstaller in the global configuration to be able to run npm commands.

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1683356000781/02069f14-2195-4bb1-9d31-a0a8cf3ce813.png align="center")

Next in the *Build Steps* section select **Execute shell** in **Add build step.** Add commands one by one to install react packages and to build app using Yarn. Here we have used environments to build stage to environment

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1683356725357/3a99b33b-e48a-4cb4-9a80-b9368230f877.png align="center")

Now our build is ready till this step. The next step is to deploy this build on a remote server. For this, we will use ***Publish Over SSH*** plugin. For an installation for this plugin navigate to Dashboard > Manage Jenkins > Manage Plugin section. Locate this plugin by searching for *publish-over-ssh*. Check the checkbox and click on the button *Download now and install after restart.*

Now we will add our remote server, for that navigate to **Dashboard > Manage Jenkins > Configure System** and locate *SSH Servers section* then click on *Add* button\*.\*

Enter the server name, hostname (IP address) and user name in the form. Open the advanced options section by clicking the *Advanced* button. Check the checkbox of *Use password authentication, or use a different key* option. Enter the server password in the input box of the *Passphrase / Password* field. Save these changes by clicking the save button.

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1683371333745/ed17bc55-f0a2-41d1-8421-a6327b57f0fd.png align="center")

Now move back to CI CD pipeline and go to *Post-build Actions* section. Click on *Add post-build action* and select *Send build artifacts over SSH.*

In opened section select the server earlier we added. In transfers enter the following information in respective fields

Source files: build/\*\*/\*

Remove prefix: /build/

Remote directory: /test\_react\_app\_cicd/ (Directory, where build, should be copied)

Exec command: Print some message with echo command to confirm the success of this operation.

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1683436406794/c50afeba-5ac2-48f9-8ec0-dfb7b6a9f48c.png align="center")

Finally, our CI CD pipeline is ready click on the *save* button to save the changes.

To test this pipeline commit the code in Gitlab on a specific branch which is been configured for CICD. To know the working of the pipeline navigate to ci cd project just we created from the dashboard. Check the build history from *Build History* section which is at the left bottom. You will see the build number with # with the running label. Hover on that build number you will see a down arrow, click on it to see options under that arrow. Locate the *Console Output* and click on that option. It will show the output of each step we configured earlier. At this point, everything should work and at the end of the output you should see *Finished: SUCCESS* message.

Following are the some results of the pipeline steps you will see in the console output

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1683441142181/9fd49c6e-d7b5-43d6-8d23-c99b36602e10.png align="center")

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1683441162718/f88a4b1b-5427-4575-ab94-b3be5aea9050.png align="center")

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1683441243548/c74c3b2f-f13a-49b6-98d8-582391d287e7.png align="center")

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1683441758501/4b9a7129-e76b-4de9-aee3-988ef1fb5ea2.png align="center")

### Conclusion

We have successfully created and executed CI CD pipeline in Jenkins to automate the deployment of React App from Gitlab to a remote server.