Steps to Build React App in Jenkins

Step 1: Configure Jenkins Tools

Go to your Jenkins dashboard and click on the Manage Jenkins Option:

Next, click on Tools:

Scroll to the bottom of the tools page to the NodeJS section as follow and click on Add NodeJS option:

This will open a new form. Make sure your inputs match exactly as in the picture given below as the Name should be the same as in the Jenkinsfile.

After this click on save and proceed back to the Manage Jenkins page.

Step 2: Install the NodeJS Plugins

On the Manage Jenkins Page, click on the option Plugins:

Now head to the available plugins options on the sidebar:

Type “NodeJS” in the search bar and click on install:

After the installation is complete, click on Go back to top page:

This will take you to your Jenkins Dashboard where we will create our react job.

Step 3: Create your First Job

On the Jenkins Dashboard, click on the create Job option:

Next, enter a name for your project and select ‘Pipeline’ and click on OK:

Step 4: Configure your Job

After you have created the Job, you will automatically be taken to the configuration page:

You can optionally enter a description for your project:

Go to your project page in GitHub and copy the public URL to your project:

After this head back to the Jenkins configuration page. Leave leave all settings as they are and Head over to the ‘Pipeline’ section and edit the settings as follows:

Specify the name of your branch and the Script path which is the path to the Jenkinsfile we have created in our project as follows and click on save:

Now are configuration is complete and we will see our build in action.

Step 5: Run build Job

Go the home page of your job and click on build now:

Then wait for a while as it will take some time to pull the npm modules. Monitor the stage view for the Deliver stage. When the deliver stage is paused, it means that the react application is running:

When you see this, open a browser tab on your computer and visit http://localhost:3000.You should see your application up and running:

Remember that you build is still not complete. After you view this, head back to your Jenkins job page.

Jenkins is a popular tool for Continuous Integration. Using Jenkins, we can externalize the build process for our code. It allows teams to collaborate more efficiently and deliver software in shorter cycles. In this article, we will learn how to build a react app in Jenkins.