Build a Node.js and React app with npm

Ensure you are signed in to your GitHub account. If you don’t yet have a GitHub account, sign up for a free one on the GitHub website.

Fork the simple-node-js-react-npm-app on GitHub into your local GitHub account. If you need help with this process, refer to the Fork A Repo documentation on the GitHub website for more information.

Clone your forked simple-node-js-react-npm-app repository (on GitHub) locally to your machine. To begin this process, do either of the following (where <your-username> is the name of your user account on your operating system):

Obtain the latest Jenkins instance, customized for this tutorial, by cloning the quickstart-tutorials repository.

After cloning, navigate to the quickstart-tutorials directory and execute the command

docker compose --profile node up -d

Once the containers are running successfully (you can verify this with docker compose ps), the controller can be accessed at http://localhost:8080.

In Jenkins, select New Item under Dashboard > at the top left.

Enter your new Pipeline project name, such as simple-node-js-react-npm-app, in Enter an item name.

Scroll down if necessary and select Pipeline, then select OK at the end of the page.

(Optional) Enter a Pipeline Description.

Select Pipeline on the left pane.

Select Definition and then choose the Pipeline script from SCM option. This option instructs Jenkins to obtain your Pipeline from the source control management (SCM), which is your forked Git repository.

Choose Git from the options in SCM.

Enter the URL of your repository in Repositories/Repository URL. This URL can be found when selecting the green Code button in the main page of your GitHub repo.

Select Save at the end of the page. You’re now ready to create a Jenkinsfile to check into your locally cloned Git repository.

Using your favorite text editor or IDE, create and save new text file with the name Jenkinsfile at the root of your local simple-node-js-react-npm-app Git repository.

Copy the following Declarative Pipeline code and paste it into your empty Jenkinsfile:

pipeline {
    agent any
    stages {
        stage('Build') { (1)
            steps {
                sh 'npm install' (2)
            }
        }
    }
}

Save your edited Jenkinsfile and commit it to your local simple-node-js-react-npm-app Git repository. Within the simple-node-js-react-npm-app directory, run the commands:
git add .
then
git commit -m "Add initial Jenkinsfile"
and finally
git push to push your changes to your forked repository on GitHub, so it can be picked up by Jenkins.

Now select Build Now on the left pane of your Pipeline project in Jenkins. After making a clone of your local simple-node-js-react-npm-app Git repository itself, Jenkins:

Initially queues the project to be run on the agent.

Runs the Build stage defined in the Jenkinsfile on the agent.

Go back to your text editor/IDE and ensure your Jenkinsfile is open.

Copy and paste the following Declarative Pipeline syntax immediately under the Build stage:

        stage('Test') {
            steps {
                sh './jenkins/scripts/test.sh'
            }
        }

pipeline {
    agent any
    stages {
        stage('Build') {
            steps {
                sh 'npm install'
            }
        }
        stage('Test') { (1)
            steps {
                sh './jenkins/scripts/test.sh' (2)
            }
        }
    }
}

Save your edited Jenkinsfile and commit it to your local simple-node-js-react-npm-app Git repository. E.g. Within the simple-node-js-react-npm-app directory, run the commands:
git add .
then
git commit -m "Add 'Test' stage"
and finally
git push to push your changes to your forked repository on GitHub, so it can be picked up by Jenkins.

In Jenkins, go back to Dashboard if necessary, then simple-node-js-react-npm-app and launch another build thanks to Build Now.

After a while, a new column Test appear in the Stage View.

You can select*#2* or on the number representing your last build on the left, under Build History. You will then see the details of the build.

Go back to your text editor/IDE and ensure your Jenkinsfile is open.

Copy and paste the following Declarative Pipeline syntax immediately under the Test stage of your Jenkinsfile:

        stage('Deliver') {
            steps {
                sh './jenkins/scripts/deliver.sh'
                input message: 'Finished using the web site? (Click "Proceed" to continue)'
                sh './jenkins/scripts/kill.sh'
            }
        }

pipeline {
    agent any
    stages {
        stage('Build') {
            steps {
                sh 'npm install'
            }
        }
        stage('Test') {
            steps {
                sh './jenkins/scripts/test.sh'
            }
        }
        stage('Deliver') { (1)
            steps {
                sh './jenkins/scripts/deliver.sh' (2)
                input message: 'Finished using the web site? (Click "Proceed" to continue)' (3)
                sh './jenkins/scripts/kill.sh' (4)
            }
        }
    }
}

Save your edited Jenkinsfile and commit it to your local simple-node-js-react-npm-app Git repository. E.g. Within the simple-node-js-react-npm-app directory, run the commands:
git add .
then
git commit -m "Add 'Deliver' stage"
and finally
git push to push your changes to your forked repository on GitHub, so it can be picked up by Jenkins.

In Jenkins, sign in if necessary, go back to the Dashboard and then navigate to simple-node-js-react-npm-app. Alternatively, you can go directly to simple-node-js-react-npm-app depending on where you’re starting from.

Select Build Now on the left. You should see after a while a new column Deliver appear in the Stage View.

Select the Deliver stage.+ You will then see a green part displaying ./jenkins/scripts/deliver.sh, which represents the successful execution of the deliver.sh script.

Ensure you are viewing the "Deliver" stage (click it if necessary), then click the green ./jenkins/scripts/deliver.sh step to expand its content and scroll down until you see the http://localhost:3000 link.

Click the http://localhost:3000 link to view your Node.js and React application running (in development mode) in a new web browser tab. You should see a page/site with the title Welcome to React on it.

When you are finished viewing the page/site, select the #3 link at the top of the page, or the number that represents your last build. On the left, look for Paused for Input. You should see two buttons, Proceed and Abort. Select the Process link to complete the Pipeline’s execution.