Automating ReactJS app deployment using Gitlab

Let’s deploy our app

Pixabay & Canva

Gitlab created gitlab-runner which helps us run jobs automatically from gitlab and watch results in gitlab dashboard.

Let’s use gitlab-runner to automatically deploy a ReactJS app to a Linux server.

We need these things to successfully automate our application deployment.

1. A Linux server with gitlab-runner installed.
2. Register the installed gitlab-runner with gitlab.com.
3. .gitlab-ci.yml file with configuration about deployment.

So just to key everything things DRY here is the official guide to install gilab-runner into your linux server.

If you want to install gitlab-runner on any other OS than linux checkout github-runner official docs

Once everything setup let’s jump to registering our gitlab-runner with gitlab.

You will need a token that associates with your project in order to register your runner.

To obtain the token go to

1. Your Project > Settings > CI/CD

Your Project > Settings > CI/CD

2. Then click on Expand in front of Runners

Then click on Expand in front of Runners

3. You can see the token in the 3 item where it says Use the following registration token during setup

4. Copy this and save it you will need this for registration.

Once you have this token head over to your server.

1. Run the following command to start registering your runner

sudo gitlab-runner register

2. Enter https://gitlab.com

Please enter the gitlab-ci coordinator URL (e.g. https://gitlab.com )

3. Enter the token we obtained above

Please enter the gitlab-ci token for this runner
xxx

4. Add some description for your gitlab runner.

Please enter the gitlab-ci description for this runner
[hostname] my-runner

5. If you wants to tag your runner you can add tags here

Please enter the gitlab-ci tags for this runner (comma separated):
my-tag,another-tag

6. So this is important type shell by choosing shell we ensure that gitlab-runner will run our commands inside a shell

Please enter the executor: ssh, docker+machine, docker-ssh+machine, kubernetes, docker, parallels, virtualbox, docker-ssh, shell:
shell

If you using any other OS than linux checkout github-runner official docs for registering your gitlab-runner

Once this is done you are all set to write your .gitlab-ci.yml

Let’s create a .gitlab-ci.yml in our project root

touch .gitlab-ci.yml

Let’s start by defining our different stages

So for this automatic deployment, we will define two stages build and deploy

As the name suggests build will be used to build the project and then deploy stage will be used to deploy the project to our server

Once these defined now we have to define our jobs which will be responsible for actually executing the code on our Linux server.

Let’s start by defining a build job

We associated the build job with the build stage. Also please provide the tags you added while registering the token this will associate this job with the correct runner.

Now the next section is script which contains the commands which will be executed on our Linux server while this job run

Firstly we echo “Building deploy package” to indicate that we have started the build process.

We install all the dependencies on the project root by doing yarn install (you can use npm install depending on which package manager you are using)

Then we build the package using yarn build and in the end, we echo “Build successful” if build command is successful.

You don’t have to worry if any of this fails because if anything fails the pipeline will fail and the status will be shown in your gitlab dashboard.

Another thing we need is to cache the build folder because different jobs execute on a new fresh cloned repo. So what actually happens when the build job is completed gitlab-runner will remove everything and clone the repo again to execute our deploy job and with everything our build folder will also be removed which we need in deploy job.

For caching the build folder we have to define artifacts

we define the path we want to cache in paths property which in our case is build and we also define for how much time we want gitlab to cache this path in expire_in property.

Now let’s write our deploy job

We are going to name this job deploy_production

We are going to associate this job with deploy stage.

Just like the build job we are going to associate this job without gitlab runner by specifying the tags.

Now the most exciting part where we define the script

Firstly we echo “Deploying to server” to indicate that we have started the deploying process.

then we copy the build folder from our repo to the webserver folder from where we can add configuration to access our React app from a domain.

After success, we echo “Deployed”

In the end, we define the environment which in our case is production and the url where our website will be deployed. You can set this to your domain or IP where website will be deployed.

We also defined that we will only run this job on master

And that’s pretty much it. Now we are all set to automatically deploy our app React app.

Once you are done with these changes push your code and the pipeline will automatically start.

You can check the pipeline status at CI/CD > Pipelines.

keep sharing 😃 and clapping 👏

Here are more articles for you.

So I Built my own React Native Button

Building a React component as a NPM module

Publishing a React Component as an NPM module

Hi, My name is Manoj Singh Negi. I am a Javascript Developer and writer follows me on Twitter or Medium.

I am available to give a public talk or for a meet up hit me up at justanothermanoj@gmail.com if you want to meet me.

Really loved this article?

Please subscribe to my blog. You will receive articles like this one directly in your inbox frequently.

Peace.