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 command to create the development branch (from the contents of the master branch):

git checkout development

Push the development branch and set it to track the remote branch:

git push -u origin development

Run the following command to create the production branch (from the contents of the master branch):

git checkout production

Push the production branch and set it to track the remote branch:

git push -u origin production

Get back to the master branch:

git checkout master

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

  development
* master
  production

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 multi 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.

Go back to Jenkins and ensure you are logged in http://localhost:8080/ and have clicked New Item on the left.

In the Enter an item name box, type building-a-multibranch-pipeline-project, select Multibranch Pipeline and click OK.

In the Display Name field, type Building a Multibranch Pipeline Project.

In the Branch Sources section, click Add source and select GitHub.

In the GitHub section, there is a field labeled Repository HTTPS URL. Enter https://github.com/YOUR-GITHUB-ACCOUNT-NAME/building-a-multibranch-pipeline-project.git, and click Validate.

You can now click on Save to save your new Pipeline project.

Jenkins will now scan your remote repository for branches and create a Pipeline for each branch that contains a Jenkinsfile.

Jenkins has found your three branches, and no pull requests for the time being.

You can now scroll up and click on Building a Multibranch Pipeline Project to access the main page of your new Multibranch Pipeline project.

Jenkins found a Jenkinsfile in each branch, and it has already built each branch.

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 any
    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 add Jenkinsfile
then
git commit -m "Add initial Jenkinsfile with 'Test' stage"
and finally
git push to push your changes to your forked repository on GitHub, so it can be picked up by Jenkins.

Go back to Jenkins again, log in again if necessary, click on the Building a Multibranch Pipeline Project link if it is visible, or on Dashboard and then on the Building a Multibranch Pipeline Project link.

You should see the list of branches detected on the previous steps. Look at the row containing master. There is a green triangle on the right side of this row (the run icon). Click on it.

Click on master to see a new Pipeline being built.

Click on #2 or on the latest build number to see the details of the build.

Click on Pipeline Overview on the left to see the stages of the Pipeline.

Click on Test and then on the green part to see the details of the test stage.

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 any
    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 add .
then
git commit -m "Add 'Deliver…​' and 'Deploy…​' stages"
and finally
git push to push your changes to your forked repository on GitHub, so it can be picked up by Jenkins.

Go back to Jenkins again, log in again if necessary and go to the Dashboard.

Click Building a Multibranch Pipeline Project to access the main page of your Multibranch Pipeline project.

Click the run icon of the master branch of your Pipeline project.

Click on master to see a new Pipeline being built.

Click on #3 or on the latest build number to see the details of the build.

Click on Pipeline Overview on the left to see the stages of the Pipeline.

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.

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, navigate to the dashboard, and select Building a Multibranch Pipeline Project.

Click the Run icon of the development branch of your Pipeline project on the far right to see Jenkins building the development branch with the amended Jenkinsfile.

Select development to see a new Pipeline being built.

Select #2 (or the latest build number) on the left, and then Pipeline Overview on the left.

Select the Deliver for development stage and then the top green Shell Script step to expand its contents and scroll down until you see the http://localhost:3000 link.

Note: Since you are building the application on a different branch, the npm install step might require a few minutes for npm to download the many dependencies required to run your Node.js and React application (stored in a local node_modules directory within the Jenkins home directory). These dependencies are downloaded again because this Jenkins build would be the first time you are running your Pipeline project on the development branch and each branch has its own workspace directory (containing its own node_modules directory) within the Jenkins home directory.

Ctrl-Click or Cmd-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, go back to the Jenkins tab and select #2 (or the last number of your build), and then Paused for Input on the left hand side.

Select the Proceed button to complete the Pipeline’s execution.

Once more, select the #2 on top of the screen (or the last number of your build) and then Pipeline Overview on the left hand side to see the stages of the Pipeline.

Notice how the Deliver for development stage was executed but the Deploy for production stage was not.

Go back to Jenkins again, log in again if necessary, navigate to the dashboard, and select Building a Multibranch Pipeline Project.

Click the Run icon of the production branch of your Pipeline project on the far right to see Jenkins building the production branch with the amended Jenkinsfile.

Select production to see a new Pipeline being built.

Select #2 (or the latest build number) on the left, and then Pipeline Overview on the left.
i

Select the Deploy for production stage and then the top green Shell Script step to expand its contents and scroll down until you see the http://localhost:5000 link.

Ctrl-Click or Cmd-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). Once 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, go back to the Jenkins tab and select #2 (or the last number of your build), and then Paused for Input on the left hand side.

Select the Proceed button to complete the Pipeline’s execution.

Once more, select the #2 on top of the screen (or the last number of your build) and then Pipeline Overview on the left hand side to see the stages of the Pipeline.

The Deploy for production stage 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. 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 logo from './logo.svg';
import './App.css';

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>
          Edit <code>src/App.js</code> and save to reload.
        </p>
        <a
          className="App-link"
          href="https://reactjs.org"
          target="_blank"
          rel="noopener noreferrer"
        >
          Learn React<br/>
          This is a new line I added.
        </a>
      </header>
    </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 add src/App.js
then
git commit -m "Update 'App.js'" and finally
git push to push your changes to your forked repository on GitHub, so it can be picked up by Jenkins.

Back in Jenkins, 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 merge your change into the production branch (via the master branch):

Back in Jenkins, 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:

Enter the following into your browser’s URL field:
about:serviceworkers

Locate the "Registered Service Worker" entry for http://localhost:5000

Click its Unregister button.