End-to-End Multibranch Pipeline Project Creation

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 building-a-multibranch-pipeline-project 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 building-a-multibranch-pipeline-project 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):

Run the following commands to create these branches (from the contents of the master branch):

Check that these branches now exist by running the command git branch, which should give you:

  development
* master
  production

If the asterisk (indicating the current branch) does not appear next to master, run the command git checkout master to ensure that master is the current branch.

Go back to Jenkins and ensure you have accessed the Blue Ocean interface. To do this, make sure you:

In the Welcome to Jenkins box at the center of the Blue Ocean interface, click Create a new Pipeline to begin the Pipeline creation wizard.
Note: If you don’t see this box, click New Pipeline at the top right.

In Where do you store your code?, click Git (not GitHub).

In the Repository URL field (within Connect to a Git repository), specify the directory path of your locally cloned repository above, which is from your user account/home directory on your host machine, mapped to the /home directory of the Jenkins container - i.e.

Click Save to save your new Pipeline project.
Blue Ocean detects the presence of the Jenkinsfile "Pipeline stub" in each branch and proceeds to run each Pipeline against its respective branch, whose build results are shown on the Activity page of the main Blue Ocean interface.

Using your favorite text editor or IDE, open the existing Jenkinsfile at the root of your local building-a-multibranch-pipeline-project Git repository and clear its contents.
Note: Be sure you are performing this step on the master branch of your repository.

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

pipeline {
    agent {
        docker {
            image 'node:20.10.0-alpine3.19'
            args '-p 3000:3000 -p 5000:5000' (1)
        }
    }
    environment {
        CI = 'true'
    }
    stages {
        stage('Build') {
            steps {
                sh 'npm install'
            }
        }
        stage('Test') {
            steps {
                sh './jenkins/scripts/test.sh'
            }
        }
    }
}

Save your edited Jenkinsfile and commit it to your local building-a-multibranch-pipeline-project Git repository. E.g. Within the building-a-multibranch-pipeline-project directory, run the commands:
git stage .
then
git commit -m "Add initial Jenkinsfile with 'Test' stage"

Go back to Jenkins again, log in again if necessary and ensure you’ve accessed Jenkins’s Blue Ocean interface.

Click Branches at the top right to access the list of your Pipeline project’s branches.

Click the run icon of the master branch of your Pipeline project, then quickly click the OPEN link that appears briefly at the lower-right to see Jenkins building the master branch with the amended Jenkinsfile. If you weren’t able to click the OPEN link, click the top row on the Blue Ocean Activity page to access this feature.
Within a few minutes, the Blue Ocean interface turns green if Jenkins built your Node.js and React application successfully from your master branch.

Click the X at the top-right to return to the Activity page of the Blue Ocean interface.

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 for development') {
            when {
                branch 'development'
            }
            steps {
                sh './jenkins/scripts/deliver-for-development.sh'
                input message: 'Finished using the web site? (Click "Proceed" to continue)'
                sh './jenkins/scripts/kill.sh'
            }
        }
        stage('Deploy for production') {
            when {
                branch 'production'
            }
            steps {
                sh './jenkins/scripts/deploy-for-production.sh'
                input message: 'Finished using the web site? (Click "Proceed" to continue)'
                sh './jenkins/scripts/kill.sh'
            }
        }

pipeline {
    agent {
        docker {
            image 'node:20.10.0-alpine3.19'
            args '-p 3000:3000 -p 5000:5000'
        }
    }
    environment {
        CI = 'true'
    }
    stages {
        stage('Build') {
            steps {
                sh 'npm install'
            }
        }
        stage('Test') {
            steps {
                sh './jenkins/scripts/test.sh'
            }
        }
        stage('Deliver for development') {
            when {
                branch 'development' (1)
            }
            steps {
                sh './jenkins/scripts/deliver-for-development.sh'
                input message: 'Finished using the web site? (Click "Proceed" to continue)'
                sh './jenkins/scripts/kill.sh'
            }
        }
        stage('Deploy for production') {
            when {
                branch 'production'  (1)
            }
            steps {
                sh './jenkins/scripts/deploy-for-production.sh'
                input message: 'Finished using the web site? (Click "Proceed" to continue)'
                sh './jenkins/scripts/kill.sh'
            }
        }
    }
}

Save your edited Jenkinsfile and commit it to your local building-a-multibranch-pipeline-project Git repository. E.g. Within the building-a-multibranch-pipeline-project directory, run the commands:
git stage .
then
git commit -m "Add 'Deliver…​' and 'Deploy…​' stages"

Go back to Jenkins again, log in again if necessary and ensure you’ve accessed Jenkins’s Blue Ocean interface.

Click Branches at the top right to access the list of your Pipeline project’s branches.

Click the run icon of the master branch of your Pipeline project, then quickly click the OPEN link that appears briefly at the lower-right to see Jenkins building the master branch with the amended Jenkinsfile. If you weren’t able to click the OPEN link, click the top row on the Blue Ocean Activity page to access this feature.
Notice how Jenkins skips the last two stages you added, since the branch you are running the build from (master) does not meet the when directives' branch conditions in these stages.

Click the X at the top-right to return to the Activity page of the Blue Ocean interface.

Run the following commands to pull changes from master to development:

Also run the following commands to pull changes from master to production:

Go back to Jenkins again, log in again if necessary and ensure you’ve accessed Jenkins’s Blue Ocean interface.

Click Branches at the top right to access the list of your Pipeline project’s branches.

Click the run icon of the development branch of your Pipeline project, then quickly click the OPEN link that appears briefly at the lower-right to see Jenkins building the development branch with the amended Jenkinsfile. If you weren’t able to click the OPEN link, click the top row on the Blue Ocean Activity page to access this feature.

Within a few minutes and when the build pauses, ensure you are viewing the Deliver for development stage (click it if necessary), then click the top green Shell Script step to expand its contents 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 (with the npm start command) 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, click the Proceed button in Blue Ocean to complete the Pipeline’s execution.
The Blue Ocean interface turns green if Jenkins built your Node.js and React application successfully from your development branch. Notice how the Deliver for development stage was executed but the Deploy for production stage was not.

Click the X at the top-right to return to the Activity page of the Blue Ocean interface.

Click Branches at the top right to access the list of your Pipeline project’s branches.

Click the run icon of the production branch of your Pipeline project, then quickly click the OPEN link that appears briefly at the lower-right to see Jenkins building the production branch with the amended Jenkinsfile. If you weren’t able to click the OPEN link, click the top row on the Blue Ocean Activity page to access this feature.

Within a few minutes and when the build pauses, ensure you are viewing the Deploy for production stage (click it if necessary), then click the top green Shell Script step to expand its contents and scroll down until you see the http://localhost:5000 link.

Click the http://localhost:5000 link to view your Node.js and React application in a new web browser tab. This will be running in production mode from a production build of your source code (generated using the npm run build command). Again, you should see a page/site with the title Welcome to React on it. However, this time, the application’s contents are served by the npm serve module and are also likely to continue running in the background in your browser.

When you are finished viewing the page/site, click the Proceed button in Blue Ocean to complete the Pipeline’s execution.
The Blue Ocean interface turns green if Jenkins built your Node.js and React application successfully from your production branch. Notice how the Deploy for production stage was executed but the Deliver for development stage was skipped.

Click the X at the top-right to return to the Activity page of the Blue Ocean interface.
Note: Since your browser is likely to continue running the application’s content served by the npm serve module, your browser will still show the content you viewed at http://localhost:5000 long after Jenkins has killed off the serve process. Read more about how to clear the application and its content from your browser below.

Within your local repository’s building-a-multibranch-pipeline-project directory, run the command git checkout development to change to the development branch.

Go back to your text editor/IDE and open the App.js file in the src directory of your local building-a-multibranch-pipeline-project Git repository.

Copy and paste the following HTML syntax immediately under the To get started…​ line of your App.js file:

          <br/>
          This is a new line I added.

import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';

class App extends Component {
  render() {
    return (
      <div className="App">
        <header className="App-header">
          <img src={logo} className="App-logo" alt="logo" />
          <h1 className="App-title">Welcome to React</h1>
        </header>
        <p className="App-intro">
          To get started, edit <code>src/App.js</code> and save to reload.
          <br/>
          This is a new line I added.
        </p>
      </div>
    );
  }
}

export default App;

Save the edited App.js file and commit it to your local building-a-multibranch-pipeline-project Git repository. E.g. Within the building-a-multibranch-pipeline-project directory, run the commands:
git stage .
then
git commit -m "Update 'App.js'"

Back in Blue Ocean, run your Pipeline on the development branch (as you did above) and check the results through http://localhost:3000 to see your new line added.

Assuming you’re happy with the change, then within your local repository’s building-a-multibranch-pipeline-project directory, run the following set of commands to pull your change into the production branch (via the master branch):

Back in Blue Ocean, run your Pipeline on the production branch this time (as you did above) and check the results through http://localhost:5000 to see your new line added.
Notes: