Deploy ReactJS and NodeJS App on Server with Jenkins

Today in this article, we shall discuss how to build and deploy ReactJS and NodeJS applications on the server using Jenkins. More and more businesses these days are relying upon Jenkins because of the exclusive advantages that this famous continuous Integration tool brings.

For those who don’t know what Jenkin means, then allow us to enlighten you up on that first.

What is Jenkins

It is an open-source automation tool crafted in Java via plugins made for continuous integration purposes. This tool is used for building and testing the software projects so that it becomes easy for the developers to accommodate the changes to the project, and making it simple for the users to collect a fresh build.

Using Jenkins helps in the continuous delivery of software by combining it with a wide range of testing and deployment technologies. We will cover ReactJS and NodeJS in this article.

Advantages of Jenkins

Jenkins is a great tool because of the exclusive advantages that it serves. Let’s have a look at a few of them:

• The tool is open-source and has an extensive development community.

• It is easy to install and get started with Jenkins.

• Jenkins has more than 1000 plugins to simplify your work. If you are not able to find a plugin to fulfill your need, then you can code and share the same with the community.

• Jenkins is free of cost.

• It is portable to other major platforms because of the fact that it is written in Java.

Now, you can check out the integration setup process.

Let’s Deploy

We have provided a step-by-step guide here for an easy understanding of the concept. We shall build Node application, React application, and host it on Server.

STEP-1: Setup an Ubuntu server and render a static IP address

So first, we will host the application on Server. You will understand it better through this below-shared diagram:

You will have to install a ubuntu server in the system. For this purpose, make an entry in, etc/Netplan/.yaml as shown below:

Once you are done, then just save the file and apply the changes by executing the following command:

sudo netplan apply

After setting up the static IP, you will have to do the port forwarding so that we can access our application through public IP outside the local network.

STEP-2: Install Jenkins

We shall need the Java runtime environment to execute Jenkins. You can check for the same below:

sudo apt-get update

sudo apt-get install OpenJDK-8-JDK

java -version

Once you are done with setting up the Java runtime environment, then you can install Jenkins as shown below:

wget -q -O - https://pkg.jenkins.io/debian-stable/jenkins.io.key | sudo apt-key add -

sudo sh -c 'echo deb http://pkg.jenkins-ci.org/debian binary/ > /etc/apt/sources.list.d/jenkins.list'

sudo apt-get install Jenkins

sudo systemctl start Jenkins

After the installation process is done, Jenkins shall launch automatically and we can visit the domain-name:8080 to access the same.

STEP-3: Install NodeJS on Ubuntu Server

We can start with installing the latest version of Node.js with Long-Term Support with the help of files in the NodeSource package.

First, you will have to install NodeSource PPA to access its content but ensure at the same time that it falls in your home directory, and use curl to collect the installation script for the Node.js 10.x files as shown below:

curl -sL https://deb.nodesource.com/setup_10.x -o nodesource_setup.sh

You will be able to verify the content of such script with nano or your favorite text editor as shown below:

nano nodesource_setup.sh

Once you are done with inspecting the script, then you can run it under sudo as follows:

sudo bash nodesource_setup.sh

The personal package archive shall be included in our configuration. The local package cache will also get automatically updated. After running the Nodesource configuration script, we will be able to install the Node.js package as follows

sudo apt install nodejs

If you want to check which version of Node.js has been installed after executing the initial steps, then simply type:

nodejs -v

You should be able to observe that the package nodejs consist of the binary of nodejs, as well as npm, and a package manager for Node modules. Hence, there is no need to install npm separately.

The npm makes use of a configuration file in our home directory to record the status of the updates. It will be created the first time you run npm. You can simply run this command to check that npm has been installed and then create the configuration file as shown below:

STEP-4: Install the PM2 Process Manager

Now at this step, we will have to install the PM2, which is a process manager for Node.js applications. With the help of PM2, it would become possible to force the apps to run as a daemon so that they can run in the background as a service.

You can use npm to install the latest version of PM2 on your server:

sudo npm install pm2@latest -g

STEP-5: Complete the GitHub configuration

We will be required to trigger a new build whenever a new push would be done to the repository and hence, it will become compulsory to configure Webhook in the first place.

We can set up the hook at the repository, so that whenever a push has been done the Github shall notify the same Jenkins server, sending a POST request. After that, you can click on settings and then Webhooks.

Now, we can add the Jenkins Webhook, but we will need the Jenkins Server IP, for configuring the same.

http://192.168.1.4:8080/github-webhook/

Now simply hit Add and then save it. We are now almost done. But we still have to create the deployment job at Jenkins and test the same.

STEP-6: Creating a Jenkins freestyle job

Hit the New Item in the main menu because that would be the first step for creating Jenkins freestyle job. On the next page, you can enter an item name like GitHub Project_Back-end and select the Freestyle project.

Once you have clicked on OK, the configuration page shall appear, where you will have to set up:

General:

Source Code Management:

If you have decided to construct a project from a private repository, then you will be required to add the credentials and then hit Add on the right. After that, select username as well as password. The username will be the username of GitHub and the password will be the GitHub password.

Triggers:

Build:

Now after reaching the final step, we will have to inform Jenkins to install the dependencies.

Final Output:

Conclusion

We have finally completed the deployment and we are all set up. With the Jenkins server and the application server up, every new push shall trigger a new deployment into our server. It is as easy as that. Once done, then you will be able to bag the merits of this amazing tool and see them in the action.