Create a Pipeline in Blue Ocean

This tutorial shows you how to use the Blue Ocean feature of Jenkins to create a Pipeline that orchestrates building a simple application.

Before you start this tutorial, be sure to run through at least one of the initial tutorials from the tutorials overview page. This will help you learn about CI/CD concepts, relevant to the technology stack you’re most familiar with, and how these concepts are implemented in Jenkins.

This tutorial uses the same application that the build a Node.js and React app with npm tutorial is based on. Therefore, you’re building the same application, but this time, completely through Blue Ocean. Since Blue Ocean provides a simplified Git-handling experience, you’ll be interacting directly with the repository on GitHub, as opposed to a local clone.

Duration: This tutorial takes 20-40 minutes to complete if you’ve already met the prerequisites below. The exact duration depends on the speed of your machine and whether or not you’ve already run Jenkins in Docker from another tutorial.

Blue Ocean status

Blue Ocean will not receive further functionality updates. Blue Ocean will continue to provide easy-to-use Pipeline visualization, but it will not be enhanced further. It will only receive selective updates for significant security issues or functional defects.

Alternative options for Pipeline visualization, such as the Pipeline: Stage View and Pipeline Graph View plugins, are available and offer some of the same functionality. While not complete replacements for Blue Ocean, contributions are encouraged from the community for continued development of these plugins.

The Pipeline syntax snippet generator assists users as they define Pipeline steps with their arguments. It is the preferred tool for Jenkins Pipeline creation, as it provides online help for the Pipeline steps available in your Jenkins controller. It uses the plugins installed on your Jenkins controller to generate the Pipeline syntax. Refer to the Pipeline steps reference page for information on all available Pipeline steps.

You can stop this tutorial at any point in time and continue from where you left off.

If you’ve already run though another tutorial, you can skip the prerequisites and run Jenkins in Docker sections below and proceed to forking the sample repository. If you need to restart Jenkins, follow the restart instructions in stopping and restarting Jenkins and then proceed.

Prerequisites

For this tutorial, you will require:

  • A macOS, Linux or Windows machine with:

    • 256 MB of RAM, although more than 2 GB is recommended.

    • 10 GB of drive space for Jenkins and your Docker images and containers.

  • The following software installed:

    • Docker - Read more about installing Docker in the Installing Docker section of the Installing Jenkins page.
      Note: If you use Linux, this tutorial assumes that you are not running Docker commands as the root user, but instead with a single user account that also has access to the other tools used throughout this tutorial.

Run Jenkins in Docker

In this tutorial, you’ll be running Jenkins as a Docker container from the jenkins/jenkins Docker image.

To run Jenkins in Docker, follow the relevant instructions below for either macOS and Linux or Windows.

You can read more about Docker container and image concepts in the Docker section of the Installing Jenkins page.

On macOS and Linux

  1. Open up a terminal window.

  2. Create a bridge network in Docker using the following docker network create command:

    docker network create jenkins

  3. In order to execute Docker commands inside Jenkins nodes, download and run the docker:dind Docker image using the following docker run command:

    docker run \
  --name jenkins-docker \(1)
  --rm \(2)
  --detach \(3)
  --privileged \(4)
  --network jenkins \(5)
  --network-alias docker \(6)
  --env DOCKER_TLS_CERTDIR=/certs \(7)
  --volume jenkins-docker-certs:/certs/client \(8)
  --volume jenkins-data:/var/jenkins_home \(9)
  --publish 2376:2376 \(10)
  --publish 3000:3000 --publish 5000:5000 \(11)
  docker:dind \(12)
  --storage-driver overlay2 (13)
    1 ( Optional ) Specifies the Docker container name to use for running the image. By default, Docker will generate a unique name for the container.
    2 ( Optional ) Automatically removes the Docker container (the instance of the Docker image) when it is shut down.
    3 ( Optional ) Runs the Docker container in the background. This instance can be stopped later by running docker stop jenkins-docker.
    4 Running Docker in Docker currently requires privileged access to function properly. This requirement may be relaxed with newer Linux kernel versions.
    5 This corresponds with the network created in the earlier step.
    6 Makes the Docker in Docker container available as the hostname docker within the jenkins network.
    7 Enables the use of TLS in the Docker server. Due to the use of a privileged container, this is recommended, though it requires the use of the shared volume described below. This environment variable controls the root directory where Docker TLS certificates are managed.
    8 Maps the /certs/client directory inside the container to a Docker volume named jenkins-docker-certs as created above.
    9 Maps the /var/jenkins_home directory inside the container to the Docker volume named jenkins-data. This will allow for other Docker containers controlled by this Docker container’s Docker daemon to mount data from Jenkins.
    10 ( Optional ) Exposes the Docker daemon port on the host machine. This is useful for executing docker commands on the host machine to control this inner Docker daemon.
    11 Exposes ports 3000 and 5000 from the docker in docker container, used by some of the tutorials.
    12 The docker:dind image itself. This image can be downloaded before running by using the command: docker image pull docker:dind.
    13 The storage driver for the Docker volume. See "Docker storage drivers" for supported options.

    Note: If copying and pasting the command snippet above does not work, try copying and pasting this annotation-free version here:

    docker run --name jenkins-docker --rm --detach \
  --privileged --network jenkins --network-alias docker \
  --env DOCKER_TLS_CERTDIR=/certs \
  --volume jenkins-docker-certs:/certs/client \
  --volume jenkins-data:/var/jenkins_home \
  --publish 3000:3000 --publish 5000:5000 --publish 2376:2376 \
  docker:dind --storage-driver overlay2

  4. Customise official Jenkins Docker image, by executing below two steps:

    1. Create Dockerfile with the following content:

      FROM jenkins/jenkins:2.387.1
USER root
RUN apt-get update && apt-get install -y lsb-release
RUN curl -fsSLo /usr/share/keyrings/docker-archive-keyring.asc \
  https://download.docker.com/linux/debian/gpg
RUN echo "deb [arch=$(dpkg --print-architecture) \
  signed-by=/usr/share/keyrings/docker-archive-keyring.asc] \
  https://download.docker.com/linux/debian \
  $(lsb_release -cs) stable" > /etc/apt/sources.list.d/docker.list
RUN apt-get update && apt-get install -y docker-ce-cli
USER jenkins
RUN jenkins-plugin-cli --plugins "blueocean docker-workflow"

    2. Build a new docker image from this Dockerfile and assign the image a meaningful name, e.g. "myjenkins-blueocean:2.387.1-1":

      docker build -t myjenkins-blueocean:2.387.1-1 .

      Keep in mind that the process described above will automatically download the official Jenkins Docker image if this hasn’t been done before.

  5. Run your own myjenkins-blueocean:2.387.1-1 image as a container in Docker using the following docker run command:

    docker run \
  --name jenkins-blueocean \(1)
  --detach \(2)
  --network jenkins \(3)
  --env DOCKER_HOST=tcp://docker:2376 \(4)
  --env DOCKER_CERT_PATH=/certs/client \
  --env DOCKER_TLS_VERIFY=1 \
  --publish 8080:8080 \(5)
  --publish 50000:50000 \(6)
  --volume jenkins-data:/var/jenkins_home \(7)
  --volume jenkins-docker-certs:/certs/client:ro \(8)
  --volume "$HOME":/home \(9)
  --restart=on-failure \(10)
  --env JAVA_OPTS="-Dhudson.plugins.git.GitSCM.ALLOW_LOCAL_CHECKOUT=true" \(11)
  myjenkins-blueocean:2.387.1-1 (12)
    1 ( Optional ) Specifies the Docker container name for this instance of the Docker image.
    2 ( Optional ) Runs the current container in the background (i.e. "detached" mode) and outputs the container ID. If you do not specify this option, then the running Docker log for this container is output in the terminal window.
    3 Connects this container to the jenkins network defined in the earlier step. This makes the Docker daemon from the previous step available to this Jenkins container through the hostname docker.
    4 Specifies the environment variables used by docker, docker-compose, and other Docker tools to connect to the Docker daemon from the previous step.
    5 Maps (i.e. "publishes") port 8080 of the current container to port 8080 on the host machine. The first number represents the port on the host while the last represents the container’s port. Therefore, if you specified -p 49000:8080 for this option, you would be accessing Jenkins on your host machine through port 49000.
    6 ( Optional ) Maps port 50000 of the current container to port 50000 on the host machine. This is only necessary if you have set up one or more inbound Jenkins agents on other machines, which in turn interact with your jenkins-blueocean container (the Jenkins "controller"). Inbound Jenkins agents communicate with the Jenkins controller through TCP port 50000 by default. You can change this port number on your Jenkins controller through the Security page. If you were to change the TCP port for inbound Jenkins agents of your Jenkins controller to 51000 (for example), then you would need to re-run Jenkins (via this docker run …​ command) and specify this "publish" option with something like --publish 52000:51000, where the last value matches this changed value on the Jenkins controller and the first value is the port number on the machine hosting the Jenkins controller. Inbound Jenkins agents communicate with the Jenkins controller on that port (52000 in this example). Note that WebSocket agents do not need this configuration.
    7 Maps the /var/jenkins_home directory in the container to the Docker volume with the name jenkins-data. Instead of mapping the /var/jenkins_home directory to a Docker volume, you could also map this directory to one on your machine’s local file system. For example, specifying the option
    --volume $HOME/jenkins:/var/jenkins_home would map the container’s /var/jenkins_home directory to the jenkins subdirectory within the $HOME directory on your local machine, which would typically be /Users/<your-username>/jenkins or /home/<your-username>/jenkins. Note that if you change the source volume or directory for this, the volume from the docker:dind container above needs to be updated to match this.
    8 Maps the /certs/client directory to the previously created jenkins-docker-certs volume. This makes the client TLS certificates needed to connect to the Docker daemon available in the path specified by the DOCKER_CERT_PATH environment variable.
    9 Maps the $HOME directory on the host (i.e. your local) machine (usually the /Users/<your-username> directory) to the /home directory in the container. Used to access local changes to the tutorial repository.
    10 Configure the Docker container restart policy to restart on failure as described in the blog post.
    11 Allow local checkout for the tutorial. See SECURITY-2478 for the reasons why this argument should not be used on a production installation.
    12 The name of the Docker image, which you built in the previous step.

    Note: If copying and pasting the command snippet above does not work, try copying and pasting this annotation-free version here:

    docker run --name jenkins-blueocean --detach \
  --network jenkins --env DOCKER_HOST=tcp://docker:2376 \
  --env DOCKER_CERT_PATH=/certs/client --env DOCKER_TLS_VERIFY=1 \
  --publish 8080:8080 --publish 50000:50000 \
  --volume jenkins-data:/var/jenkins_home \
  --volume jenkins-docker-certs:/certs/client:ro \
  --volume "$HOME":/home \
  --restart=on-failure \
  --env JAVA_OPTS="-Dhudson.plugins.git.GitSCM.ALLOW_LOCAL_CHECKOUT=true" \
  myjenkins-blueocean:2.387.1-1

  6. Proceed to the Post-installation setup wizard.

On Windows

The Jenkins project provides a Linux container image, not a Windows container image. Be sure that your Docker for Windows installation is configured to run Linux Containers rather than Windows Containers. See the Docker documentation for instructions to switch to Linux containers. Once configured to run Linux Containers, the steps are:

  1. Open up a command prompt window and similar to the macOS and Linux instructions above do the following:

  2. Create a bridge network in Docker

    docker network create jenkins

  3. Run a docker:dind Docker image

    docker run --name jenkins-docker --detach ^
  --privileged --network jenkins --network-alias docker ^
  --env DOCKER_TLS_CERTDIR=/certs ^
  --volume jenkins-docker-certs:/certs/client ^
  --volume jenkins-data:/var/jenkins_home ^
  --publish 3000:3000 --publish 5000:5000 --publish 2376:2376 ^
  docker:dind

  4. Customise official Jenkins Docker image, by executing below two steps:

    1. Create Dockerfile with the following content:

      FROM jenkins/jenkins:2.387.1
USER root
RUN apt-get update && apt-get install -y lsb-release
RUN curl -fsSLo /usr/share/keyrings/docker-archive-keyring.asc \
  https://download.docker.com/linux/debian/gpg
RUN echo "deb [arch=$(dpkg --print-architecture) \
  signed-by=/usr/share/keyrings/docker-archive-keyring.asc] \
  https://download.docker.com/linux/debian \
  $(lsb_release -cs) stable" > /etc/apt/sources.list.d/docker.list
RUN apt-get update && apt-get install -y docker-ce-cli
USER jenkins
RUN jenkins-plugin-cli --plugins "blueocean docker-workflow"

    2. Build a new docker image from this Dockerfile and assign the image a meaningful name, e.g. "myjenkins-blueocean:2.387.1-1":

      docker build -t myjenkins-blueocean:2.387.1-1 .

      Keep in mind that the process described above will automatically download the official Jenkins Docker image if this hasn’t been done before.

  5. Run your own myjenkins-blueocean:2.387.1-1 image as a container in Docker using the following docker run command:

    docker run --name jenkins-blueocean --detach ^
  --network jenkins --env DOCKER_HOST=tcp://docker:2376 ^
  --env DOCKER_CERT_PATH=/certs/client --env DOCKER_TLS_VERIFY=1 ^
  --volume jenkins-data:/var/jenkins_home ^
  --volume jenkins-docker-certs:/certs/client:ro ^
  --volume "%HOMEDRIVE%%HOMEPATH%":/home ^
  --restart=on-failure ^
  --env JAVA_OPTS="-Dhudson.plugins.git.GitSCM.ALLOW_LOCAL_CHECKOUT=true" ^
  --publish 8080:8080 --publish 50000:50000 myjenkins-blueocean:2.387.1-1

  6. Proceed to the Setup wizard.

Accessing the Docker container

If you have some experience with Docker and you wish or need to access your Docker container through a terminal/command prompt using the docker exec command, you can add an option like --name jenkins-tutorial to the docker exec command. That will access the Jenkins Docker container named "jenkins-tutorial".

This means you could access your docker container (through a separate terminal/command prompt window) with a docker exec command like:

docker exec -it jenkins-blueocean bash

Accessing the Docker logs

There is a possibility you may need to access the Jenkins console log, for instance, when Unlocking Jenkins as part of the Post-installation setup wizard.

The Jenkins console log is easily accessible through the terminal/command prompt window from which you executed the docker run …​ command. In case if needed you can also access the Jenkins console log through the Docker logs of your container using the following command:

docker logs <docker-container-name>

Your <docker-container-name> can be obtained using the docker ps command.

Accessing the Jenkins home directory

There is a possibility you may need to access the Jenkins home directory, for instance, to check the details of a Jenkins build in the workspace subdirectory.

If you mapped the Jenkins home directory (/var/jenkins_home) to one on your machine’s local file system (i.e. in the docker run …​ command above), then you can access the contents of this directory through your machine’s usual terminal/command prompt.

Otherwise, if you specified the --volume jenkins-data:/var/jenkins_home option in the docker run …​ command, you can access the contents of the Jenkins home directory through your container’s terminal/command prompt using the docker container exec command:

docker container exec -it <docker-container-name> bash

As mentioned above, your <docker-container-name> can be obtained using the docker container ls command. If you specified the
--name jenkins-blueocean option in the docker container run …​ command above (see also Accessing the Jenkins/Blue Ocean Docker container), you can simply use the docker container exec command:

docker container exec -it jenkins-blueocean bash

Setup wizard

Before you can access Jenkins, there are a few quick "one-off" steps you’ll need to perform.

Unlocking Jenkins

When you first access a new Jenkins instance, you are asked to unlock it using an automatically-generated password.

  1. After the 2 sets of asterisks appear in the terminal/command prompt window, browse to http://localhost:8080 and wait until the Unlock Jenkins page appears.

    Unlock Jenkins page

  2. Display the Jenkins console log with the command:

    docker logs jenkins-blueocean

  3. From your terminal/command prompt window again, copy the automatically-generated alphanumeric password (between the 2 sets of asterisks).

    Copying initial admin password

  4. On the Unlock Jenkins page, paste this password into the Administrator password field and click Continue.

Customizing Jenkins with plugins

After unlocking Jenkins, the Customize Jenkins page appears.

On this page, click Install suggested plugins.

The setup wizard shows the progression of Jenkins being configured and the suggested plugins being installed. This process may take a few minutes.

Creating the first administrator user

Finally, Jenkins asks you to create your first administrator user.

  1. When the Create First Admin User page appears, specify your details in the respective fields and click Save and Finish.

  2. When the Jenkins is ready page appears, click Start using Jenkins.
    Notes:

    • This page may indicate Jenkins is almost ready! instead and if so, click Restart.

    • If the page doesn’t automatically refresh after a minute, use your web browser to refresh the page manually.

  3. If required, log in to Jenkins with the credentials of the user you just created and you’re ready to start using Jenkins!

Stopping and restarting Jenkins

Throughout the remainder of this tutorial, you can stop your Docker container by running:

docker stop jenkins-blueocean jenkins-docker

To restart your Docker container:

  1. Run the same docker run …​ commands you ran for macOS, Linux or Windows above.

  2. Browse to http://localhost:8080.

  3. Wait until the log in page appears and log in.

Fork the sample repository on GitHub

Fork the simple "Welcome to React" Node.js and React application on GitHub into your own GitHub account.

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

  2. Fork the creating-a-pipeline-in-blue-ocean repository 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.

This is a different repository than the one used in the build a Node.js and React app with npm tutorial. Although these repositories contain the same application code, ensure you fork and use the correct one before continuing.

Create your Pipeline project in Blue Ocean

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

    • browsed to http://localhost:8080/blue and are logged in.

    • browsed to http://localhost:8080/, are logged in, and have selected Open Blue Ocean on the left side of the screen.

  2. In the Welcome to Jenkins box at the center of the Blue Ocean interface, select Create a new Pipeline to start the Pipeline creation wizard. If you don’t see this box, select New Pipeline in the upper right.

  3. In Where do you store your code?, select GitHub.

  4. In Connect to GitHub, select Create an access key here. This opens GitHub in a new browser tab.

    If you previously configured Blue Ocean to connect to GitHub using a personal access token, Blue Ocean takes you directly to step 9 below.

  5. In the new tab, sign in to your GitHub account if necessary. On the GitHub New Personal Access Token page, specify a brief Token description for your GitHub access token, for example Blue Ocean.

    An access token is usually an alphanumeric string that represents your GitHub account, along with permissions to access various GitHub features and areas through your account. This access token has the appropriate permissions pre-selected that Blue Ocean requires to access and interact with your GitHub account.

  6. Scroll down to the end of the page, while leaving all other Select scopes options with their default settings, and select Generate token.

  7. On the Personal access tokens page, copy your newly-generated access token.

  8. Back in Blue Ocean, paste the access token into the Your GitHub access token field, and select Connect.

    Connecting to GitHub

    Jenkins now has access to your GitHub account, using your access token.

  9. In Which organization does the repository belong to?, select your GitHub account where you forked the repository above.

  10. In Choose a repository, select your forked repository creating-a-pipeline-in-blue-ocean.

  11. Select Create Pipeline.

    • Blue Ocean detects that there is no Jenkinsfile at the root level of the repository’s master branch and helps you create one. You must select Create Pipeline again at the end of the page to proceed.

Under the hood, a Pipeline project created through Blue Ocean is actually a "multibranch Pipeline". Therefore, Jenkins looks for the presence of at least one Jenkinsfile in any branch of your repository.

Create your initial Pipeline

  1. Following on from creating your Pipeline project above, in the Pipeline editor, select Docker from the Agent dropdown in the Pipeline Settings panel on the right side of the page.

    Initial to GitHub

  2. In the Image and Args fields that appear, specify node:lts-alpine and -p 3000:3000 respectively.

    Configuring the agent

    For an explanation of these values, refer to annotations 1 and 2 of the Declarative Pipeline in the "Create your initial Pipeline…​" section of the build a Node.js and React app tutorial.

  3. In the main Pipeline editor, select the + icon, to open the new stage panel on the right side of the icon.

    Add 'Build' stage

  4. In this panel, enter Build in the Name your stage field, and then select the Add Step button below. The Choose step type panel opens.

    Adding the Build stage

  5. In this panel, select Shell Script near the top of the list to configure that step type, which opens the Build / Shell Script panel. Here you can enter this step’s values.

    Choosing a step type

    The most commonly used step types appear closest to the top of this list. To find other steps further down this list, you can filter this list using the Find steps by name option.

  6. In the Build / Shell Script panel, specify npm install.

    Specifying a shell step value

    For an explanation of this step, refer to annotation 4 of the Declarative Pipeline in the "Create your initial Pipeline…​" section of the build a Node.js and React app tutorial.

  7. ( Optional ) Select the back arrow icon Return from step icon in the upper left to return to the main Pipeline editor.

  8. Select Save in the upper right side of the screen to begin saving your new Pipeline with its "Build" stage.

  9. In the Save Pipeline dialog box, enter the commit message in the Description field, for example Add initial Pipeline (Jenkinsfile).

    Save Pipeline dialog box

  10. Leave all other options set to their default, and then select Save & run. Jenkins proceeds to build your Pipeline.

  11. When the main Blue Ocean interface appears, select the row to see Jenkins build your Pipeline project. You’ll need to wait for this first run to complete before proceeding. During this time, Jenkins does the following:

    1. Commits your Pipeline as a Jenkinsfile to the only branch of your repository.

    2. Initially queues the project to be built on the agent.

    3. Downloads the Node Docker image and runs it in a container on Docker.

    4. Executes the Build stage defined in the Jenkinsfile on the Node container.

      During this time, npm downloads the dependencies necessary to run your Node.js and React application, which will be stored in the local node_modules directory in the Jenkins home directory.

      Downloading 'npm' dependencies The Blue Ocean interface turns green if Jenkins built your application successfully.

      Initial Pipeline runs successfully

  12. Select the X in the upper right corner to return to the main Blue Ocean interface.

    Main Blue Ocean interface

Before continuing on, verify that Jenkins has created a Jenkinsfile for you at the root of your forked GitHub repository, in the repository’s sole master branch.

Add a test stage to your Pipeline

  1. From the main Blue Ocean interface, select Branches in the upper right to access your repository’s branches page, where you can access the master branch.

    Repository branches page

  2. Select the master branch’s "Edit Pipeline" icon Edit Pipeline on branch to open the Pipeline editor for this branch.

  3. In the main Pipeline editor, select the + icon to the right of the Build stage you created above to open the new stage panel on the right.

    Add 'Test' stage

  4. In this panel, enter Test in the Name your stage field, and then select the Add Step button below to open the Choose step type panel.

  5. In this panel, select Shell Script near the top of the list.

  6. In the resulting Test / Shell Script panel, specify ./jenkins/scripts/test.sh and then select the back arrow icon Return from step icon in the upper left to return to the Pipeline stage editor.

  7. At the lower right of the panel, select Settings to reveal this section of the panel.

  8. Select the + icon at the right of the Environment heading where you’ll configure an environment directive.

  9. In the Name and Value fields that appear, specify CI and true, respectively.

    Environment directive

    For an explanation of this directive and its step, refer to annotations 1 and 3 of the Declarative Pipeline in the "Add a test stage…​" section of the Build a Node.js and React app tutorial.

  10. ( Optional ) Select the back arrow icon Return from step icon in the upper left to return to the main Pipeline editor.

  11. Select Save in the top-right corner to begin saving your Pipeline with with its new "Test" stage.

  12. In the Save Pipeline dialog box, specify the commit message in the Description field, for example Add 'Test' stage.

  13. Leave all other options set to their default, and then select Save & run. Jenkins proceeds to build your amended Pipeline.

  14. When the main Blue Ocean interface appears, select the top row to see Jenkins build your Pipeline project.

    • If your amended Pipeline ran successfully, here’s what the Blue Ocean interface should look like, notice the additional "Test" stage. You can select the previous "Build" stage circle to access the output from that stage.

      Test stage runs successfully (with output)

      You’ll notice during this run that Jenkins no longer needs to download the Node Docker image. Instead, Jenkins only needs to run a new container from the Node image downloaded previously. Subsequent runs of your Pipeline should be much faster.

  15. Select the X at the top-right corner to return to the main Blue Ocean interface.

Add a final deliver stage to your Pipeline

  1. From the main Blue Ocean interface, select Branches in the upper right to access your repository’s master branch.

  2. Select the master branch’s "Edit Pipeline" icon Edit Pipeline on branch to open the Pipeline editor for this branch.

  3. In the main Pipeline editor, select the + icon to the right of the Test stage you created above to open the new stage panel.

    Add 'Deliver' stage

  4. In this panel, enter Deliver in the Name your stage field, and then select Add Step below to open the Choose step type panel.

  5. In this panel, select Shell Script.

  6. In the resulting Deliver / Shell Script panel, specify ./jenkins/scripts/deliver.sh, and then select the back arrow icon Return from step icon to return to the Pipeline stage editor.

    Add next step

    For an explanation of this step, refer to the deliver.sh file itself located in the jenkins/scripts of your forked repository on GitHub.

  7. Select Add Step again.

  8. In the Choose step type panel, enter input in the Find steps by name field. Choosing the input step type

  9. Select the filtered Wait for interactive input step type.

  10. In the resulting Deliver / Wait for interactive input panel, enter Finished using the web site? (Select "Proceed" to continue) in the Message field, and then select the back arrow icon Return from step icon to return to the Pipeline stage editor.

    Specifying input step message value

    For an explanation of this step, refer to annotation 4 of the Declarative Pipeline in the "Add a final deliver stage…​" section of the Build a Node.js and React app tutorial.

  11. Select Add Step.

  12. Select Shell Script.

  13. In the resulting Deliver / Shell Script panel, specify ./jenkins/scripts/kill.sh.

    For an explanation of this step, refer to the kill.sh file itself located in the jenkins/scripts of your forked repository on GitHub.

  14. ( Optional ) Select the back arrow icon Return from step icon to return to the main Pipeline editor.

  15. Select Save in the top-right corner to begin saving your Pipeline with with its new "Deliver" stage.

  16. In the Save Pipeline dialog box, enter the commit message in the Description field, for example Add 'Deliver' stage.

  17. Leave all other options set to their default, and then select Save & run. Jenkins proceeds to build your amended Pipeline.

  18. When the main Blue Ocean interface appears, select the top row to see Jenkins build your Pipeline project.

    • If your amended Pipeline ran successfully, here’s what the Blue Ocean interface should look like. Notice the additional "Deliver" stage. Selecting the previous "Test" and "Build" stage circles provides access to the outputs from those stages.

      Deliver stage pauses for user input

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

    Deliver stage output only

  20. Select 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.

  21. When you are finished viewing the page/site, select Proceed to complete the Pipeline’s execution.

    Deliver stage runs successfully

  22. Select the X in the top-right corner to return to the main Blue Ocean interface, which lists your previous Pipeline runs in reverse chronological order.

    Main Blue Ocean interface with all previous runs displayed

Follow up (optional)

If you check the contents of the Jenkinsfile that Blue Ocean created at the root of your forked creating-a-pipeline-in-blue-ocean repository, note the location of the environment directive. This directive’s location within the "Test" stage means that the environment variable CI, with its value of true, is only available within the scope of this "Test" stage.

You can set this directive in Blue Ocean, so that its environment variable is available globally throughout Pipeline. This is also configured in the build a Node.js and React app with npm tutorial.

To do this:

  1. From the main Blue Ocean interface, select Branches in the upper right to access your repository’s master branch.

  2. Select the master branch’s "Edit Pipeline" icon Edit Pipeline on branch to open the Pipeline editor for this branch.

  3. In the main Pipeline editor, select the Test stage you created above to begin editing it.

  4. In the stage panel, select Settings to reveal this section of the panel.

  5. Select the minus (-) icon associated with the CI environment directive you created earlier to delete it.

  6. Select the back arrow icon Return from step icon to return to the main Pipeline editor.

  7. In the Pipeline Settings panel, select the + icon to the right side of the Environment heading. Here, you’ll configure a global environment directive.

  8. In the Name and Value fields, specify CI and true, respectively.

  9. Select the Save button to begin saving your Pipeline with with its relocated environment directive.

  10. In the Save Pipeline dialog box, enter the commit message in the Description field, for example Make environment directive global.

  11. Leave all other options set to their default, and then select Save & run. Jenkins proceeds to build your amended Pipeline.

  12. When the main Blue Ocean interface appears, select the top row to see Jenkins build your Pipeline project. This starts the same build process as when you completed adding the final deliver stage above. However, when you inspect the Jenkinsfile again, you’ll notice that the environment directive is now a sibling of the agent section.

Wrapping up

Well done! You’ve used the Blue Ocean feature of Jenkins to build a simple Node.js and React application with npm.

The "Build," "Test," and "Deliver" stages you created are the basis for building other applications in Jenkins with any technology stack, including more complex applications and ones that combine multiple technology stacks.

Because Jenkins is extremely extensible, it can be modified and configured to handle almost any aspect of build orchestration and automation.

To learn more about what Jenkins can do, check out:

Was this page helpful?

Please submit your feedback about this page through this quick form.

Alternatively, if you don't wish to complete the quick form, you can simply indicate if you found this page helpful?

    


See existing feedback here.