Build a Node.js and React app with npm within Jenkins Pipeline

1. Fork the sample repository on GitHub

Jenkins Setup (Linux Machine)

1. Create a bridge network in Docker

docker network create jenkins

2. Create the following volumes

docker volume create jenkins-docker-certs
docker volume create jenkins-data

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

docker container 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 \
--volume "$HOME":/home \
--publish 3000:3000 docker:dind

4. Run the jenkinsci/blueocean image as a container in Docker using the following docker container run command

docker container run --name jenkins-tutorial --rm --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 "$HOME":/home --publish 8080:8080 jenkinsci/blueocean

5. Open up following URL in browser localhost:8080 Setup wizard

6. Creating the first administrator user

7. Instance Configuration

8. Start using Jenkins

9. Create new jobs

10. Enter an item name field, specify the name for your new Pipeline project

11. Add pipeline description and choose Pipeline script from SCM option.

12. Open Blue Ocean | click Run, then quickly click the OPEN link which appears briefly at the lower-right to see Jenkins building your Pipeline project

13. The Blue Ocean interface turns green if Jenkins built your Node.js and React application successfully.

14. Added test stage to Pipeline

15. Added a final deliver stage to Pipeline

16. React app running on localhost:3000

17. Onclick the Proceed button to complete the Pipeline’s execution.