Create a Jenkins CD Pipeline to build node.js and react application using npm

Create a Jenkins CD Pipeline to build node.js and react application using npm

This tutorial will show how to create a Jenkins Continuous Delivery Pipeline to build Node.js and React application using npm. Pipeline will be created using a Pipeline script which will be committed into a Github repository. This is the foundation of “Pipeline-as-Code”, which treats the continuous delivery pipeline as a part of the application to be versioned and reviewed like any other code. 

Also there will be separate Jenkins and Node containers running on Docker. The Node container becomes the agent that Jenkins uses to run the Pipeline project.

Prerequisites:– 

• Clone the Github repository in your local folder which contains the source code for building a Node.js and React Application.
• Install Jenkins on Docker container. Refer to this tutorial for step-by-step instructions.

Steps to create a Continuous Delivery Pipeline:

1. Login into Jenkins and click on New Item.

2. In the Enter an item name field, specify the name for your new Pipeline project “simple-node-js-react-npm-app”

3. Click to select Pipeline and click on OK.

4. Provide a brief description for your Pipeline in the Description field “An entry-level Pipeline demonstrating how to use Jenkins to build a simple Node.js and React application with npm”.

5. Click the Pipeline tab at the top of the page to scroll down to the Pipeline section.6. From the Definition field, choose the Pipeline script from SCM option. This option instructs Jenkins to obtain your Pipeline from Source Control Management (SCM), which will be your locally cloned Git repository.7. From the SCM field, choose Git.8. In the Repository URL field, enter the Github repository Url “https://github.com/patebija/simple-node-js-react-npm-app.git”

9. Click Save to save your new Pipeline project.

10. Using your favourite text editor or IDE, create and save new text file with the name JenkinsFile at the root of your local project.

11. Copy the following Declarative Pipeline code and paste it into your empty JenkinsFile:

12. Add, Commit and Push the changes into the Github repository.

13. Go back to Jenkins Dashboard.

14. Click on Open Blue Ocean.

15. Click on Run to start running your pipeline job.

16. Build stage which is defined in the Jenkinsfile contains the following steps:

• Downloads the Node Docker image and runs it in a container on Docker.
• Runs the Build stage on the Node container. During this time, npm downloads many dependencies necessary to run your Node.js and React application.

15. Test stage contains the following steps:

• Runs the test.sh script in non-interactive mode which tests that our simple node.js/react application renders correctly.

16. Deliver stage contains the following steps: 

• Runs the deliver.sh script which builds our node.js/react application for production in the local build directory and runs the application in development mode and makes the application available for web browsing.
• Run the kill.sh script which terminates the npm process using its PID.