├── .gitattributes ├── .github └── dependabot.yml ├── .gitignore ├── Jenkinsfile ├── README.md ├── jenkins ├── Jenkinsfile └── scripts │ ├── deliver-for-development.sh │ ├── deploy-for-production.sh │ ├── kill.sh │ └── test.sh ├── package.json ├── public ├── favicon.ico ├── index.html ├── logo192.png ├── logo512.png ├── manifest.json └── robots.txt └── src ├── App.css ├── App.js ├── App.test.js ├── index.css ├── index.js ├── logo.svg ├── reportWebVitals.js └── setupTests.js /.gitattributes: -------------------------------------------------------------------------------- 1 | # Auto detect text files and perform LF normalization 2 | * text=auto -------------------------------------------------------------------------------- /.github/dependabot.yml: -------------------------------------------------------------------------------- 1 | # https://docs.github.com/github/administering-a-repository/configuration-options-for-dependency-updates 2 | 3 | version: 2 4 | updates: 5 | - package-ecosystem: "npm" 6 | directory: "/" # Location of package manifests 7 | schedule: 8 | interval: "weekly" 9 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | # Logs 3 | logs 4 | *.log 5 | npm-debug.log* 6 | yarn-debug.log* 7 | yarn-error.log* 8 | 9 | # Runtime data 10 | pids 11 | *.pid 12 | *.seed 13 | *.pid.lock 14 | 15 | # Directory for instrumented libs generated by jscoverage/JSCover 16 | lib-cov 17 | 18 | # Coverage directory used by tools like istanbul 19 | coverage 20 | 21 | # nyc test coverage 22 | .nyc_output 23 | 24 | # Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files) 25 | .grunt 26 | 27 | # Bower dependency directory (https://bower.io/) 28 | bower_components 29 | 30 | # node-waf configuration 31 | .lock-wscript 32 | 33 | # Compiled binary addons (http://nodejs.org/api/addons.html) 34 | build/Release 35 | 36 | # Dependency directories 37 | node_modules/ 38 | jspm_packages/ 39 | 40 | # Typescript v1 declaration files 41 | typings/ 42 | 43 | # Optional npm cache directory 44 | .npm 45 | 46 | # Optional eslint cache 47 | .eslintcache 48 | 49 | # Optional REPL history 50 | .node_repl_history 51 | 52 | # Output of 'npm pack' 53 | *.tgz 54 | 55 | # Yarn Integrity file 56 | .yarn-integrity 57 | 58 | # dotenv environment variables file 59 | .env 60 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 61 | 62 | # dependencies 63 | /node_modules 64 | /.pnp 65 | .pnp.js 66 | 67 | # testing 68 | /coverage 69 | 70 | # production 71 | /build 72 | 73 | # misc 74 | .DS_Store 75 | .env.local 76 | .env.development.local 77 | .env.test.local 78 | .env.production.local 79 | 80 | npm-debug.log* 81 | yarn-debug.log* 82 | yarn-error.log* 83 | 84 | .idea 85 | -------------------------------------------------------------------------------- /Jenkinsfile: -------------------------------------------------------------------------------- 1 | pipeline { 2 | agent any 3 | stages { 4 | stage('Build') { 5 | steps { 6 | echo 'Hello world!' 7 | } 8 | } 9 | } 10 | } 11 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Building a multibranch Pipeline project 2 | 3 | This repository is for the 4 | [Build a multibranch Pipeline project](https://jenkins.io/doc/tutorials/build-a-multibranch-pipeline-project/) 5 | tutorial in the [Jenkins User Documentation](https://jenkins.io/doc/). 6 | 7 | This tutorial uses the same application that the 8 | [Build a Node.js and React app with npm](https://jenkins.io/doc/tutorials/build-a-node-js-and-react-app-with-npm/) 9 | tutorial is based on. Therefore, you'll be building and testing the same 10 | application but this time, its delivery will be different depending on the Git 11 | branch that Jenkins builds from. That is, the branch being built determines 12 | which delivery stage of your Pipeline is executed. 13 | 14 | The `jenkins` directory contains an example of the `Jenkinsfile` (i.e. Pipeline) 15 | you'll be creating yourself during the tutorial and the `scripts` subdirectory 16 | contains shell scripts with commands that are executed when Jenkins processes 17 | either the "Deliver for development" or "Deploy for production" stages of your 18 | Pipeline (depending on the branch that Jenkins builds from). 19 | 20 | # Getting Started with Create React App ([npx create-react-app tutorial](https://create-react-app.dev/docs/getting-started/)) 21 | 22 | This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app). 23 | 24 | ## Available Scripts 25 | 26 | In the project directory, you can run: 27 | 28 | ### `npm start` 29 | 30 | Runs the app in the development mode.\ 31 | Open [http://localhost:3000](http://localhost:3000) to view it in your browser. 32 | 33 | The page will reload when you make changes.\ 34 | You may also see any lint errors in the console. 35 | 36 | ### `npm test` 37 | 38 | Launches the test runner in the interactive watch mode.\ 39 | See the section about [running tests](https://facebook.github.io/create-react-app/docs/running-tests) for more information. 40 | 41 | ### `npm run build` 42 | 43 | Builds the app for production to the `build` folder.\ 44 | It correctly bundles React in production mode and optimizes the build for the best performance. 45 | 46 | The build is minified and the filenames include the hashes.\ 47 | Your app is ready to be deployed! 48 | 49 | See the section about [deployment](https://facebook.github.io/create-react-app/docs/deployment) for more information. 50 | 51 | ### `npm run eject` 52 | 53 | **Note: this is a one-way operation. Once you `eject`, you can't go back!** 54 | 55 | If you aren't satisfied with the build tool and configuration choices, you can `eject` at any time. This command will remove the single build dependency from your project. 56 | 57 | Instead, it will copy all the configuration files and the transitive dependencies (webpack, Babel, ESLint, etc) right into your project so you have full control over them. All of the commands except `eject` will still work, but they will point to the copied scripts so you can tweak them. At this point you're on your own. 58 | 59 | You don't have to ever use `eject`. The curated feature set is suitable for small and middle deployments, and you shouldn't feel obligated to use this feature. However we understand that this tool wouldn't be useful if you couldn't customize it when you are ready for it. 60 | 61 | ## Learn More 62 | 63 | You can learn more in the [Create React App documentation](https://facebook.github.io/create-react-app/docs/getting-started). 64 | 65 | To learn React, check out the [React documentation](https://reactjs.org/). 66 | 67 | ### Code Splitting 68 | 69 | This section has moved here: [https://facebook.github.io/create-react-app/docs/code-splitting](https://facebook.github.io/create-react-app/docs/code-splitting) 70 | 71 | ### Analyzing the Bundle Size 72 | 73 | This section has moved here: [https://facebook.github.io/create-react-app/docs/analyzing-the-bundle-size](https://facebook.github.io/create-react-app/docs/analyzing-the-bundle-size) 74 | 75 | ### Making a Progressive Web App 76 | 77 | This section has moved here: [https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app](https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app) 78 | 79 | ### Advanced Configuration 80 | 81 | This section has moved here: [https://facebook.github.io/create-react-app/docs/advanced-configuration](https://facebook.github.io/create-react-app/docs/advanced-configuration) 82 | 83 | ### Deployment 84 | 85 | This section has moved here: [https://facebook.github.io/create-react-app/docs/deployment](https://facebook.github.io/create-react-app/docs/deployment) 86 | 87 | ### `npm run build` fails to minify 88 | 89 | This section has moved here: [https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify](https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify) 90 | -------------------------------------------------------------------------------- /jenkins/Jenkinsfile: -------------------------------------------------------------------------------- 1 | pipeline { 2 | agent { 3 | docker { 4 | image 'node:lts-alpine' 5 | args '-p 3000:3000 -p 5000:5000' 6 | } 7 | } 8 | environment { 9 | CI = 'true' 10 | } 11 | stages { 12 | stage('Build') { 13 | steps { 14 | sh 'npm install' 15 | } 16 | } 17 | stage('Test') { 18 | steps { 19 | sh './jenkins/scripts/test.sh' 20 | } 21 | } 22 | stage('Deliver for development') { 23 | when { 24 | branch 'development' 25 | } 26 | steps { 27 | sh './jenkins/scripts/deliver-for-development.sh' 28 | input message: 'Finished using the web site? (Click "Proceed" to continue)' 29 | sh './jenkins/scripts/kill.sh' 30 | } 31 | } 32 | stage('Deploy for production') { 33 | when { 34 | branch 'production' 35 | } 36 | steps { 37 | sh './jenkins/scripts/deploy-for-production.sh' 38 | input message: 'Finished using the web site? (Click "Proceed" to continue)' 39 | sh './jenkins/scripts/kill.sh' 40 | } 41 | } 42 | } 43 | } 44 | -------------------------------------------------------------------------------- /jenkins/scripts/deliver-for-development.sh: -------------------------------------------------------------------------------- 1 | #!/usr/bin/env sh 2 | 3 | echo 'The following "npm" command runs your Node.js/React application in' 4 | echo 'development mode and makes the application available for web browsing.' 5 | echo 'The "npm start" command has a trailing ampersand so that the command runs' 6 | echo 'as a background process (i.e. asynchronously). Otherwise, this command' 7 | echo 'can pause running builds of CI/CD applications indefinitely. "npm start"' 8 | echo 'is followed by another command that retrieves the process ID (PID) value' 9 | echo 'of the previously run process (i.e. "npm start") and writes this value to' 10 | echo 'the file ".pidfile".' 11 | set -x 12 | npm start & 13 | echo $! > .pidfile 14 | set +x 15 | 16 | echo 'Now...' 17 | echo 'Visit http://localhost:3000 to see your Node.js/React application in action.' 18 | echo '(This is why you specified the "args ''-p 3000:3000''" parameter when you' 19 | echo 'created your initial Pipeline as a Jenkinsfile.)' 20 | -------------------------------------------------------------------------------- /jenkins/scripts/deploy-for-production.sh: -------------------------------------------------------------------------------- 1 | #!/usr/bin/env sh 2 | 3 | echo 'The following "npm" command builds your Node.js/React application for' 4 | echo 'production in the local "build" directory (i.e. within the appropriate' 5 | echo 'subdirectory of "/var/jenkins_home/workspace/"), correctly bundles React' 6 | echo 'in production mode and optimizes the build for the best performance.' 7 | set -x 8 | npm run build 9 | set +x 10 | 11 | echo 'The following "npm" command downloads and installs the npm serve module' 12 | echo '(for serving static sites in production environments) to the local' 13 | echo '"node_modules" directory (i.e. within the appropriate subdirectory of' 14 | echo '"/var/jenkins_home/workspace/"), which means that this module should not' 15 | echo 'need to be downloaded after this Pipeline''s initial run for a given' 16 | echo 'branch.' 17 | set -x 18 | npm install serve 19 | set +x 20 | 21 | echo 'The following "serve" command runs the npm serve module (downloaded' 22 | echo 'above) deploys your Node.js/React application (built above in production' 23 | echo 'mode) for production and makes the application available for web browsing.' 24 | echo 'The "serve" command has a trailing ampersand so that the command runs' 25 | echo 'as a background process (asynchronously). Otherwise, this command' 26 | echo 'can pause running builds of CI/CD applications indefinitely. "serve"' 27 | echo 'is followed by another command that retrieves the process ID (PID) value' 28 | echo 'of the previously run process (i.e. "serve") and writes this value to' 29 | echo 'the file ".pidfile".' 30 | set -x 31 | # serve -s build -l 5000 & 32 | ./node_modules/serve/build/main.js -s build -l 5000 & 33 | echo $! > .pidfile 34 | set +x 35 | 36 | echo 'Now...' 37 | echo 'Visit http://localhost:5000 to see your Node.js/React application in action.' 38 | echo '(This is why you specified the "args ''-p 5000:5000''" parameter when you' 39 | echo 'created your initial Pipeline as a Jenkinsfile.)' 40 | -------------------------------------------------------------------------------- /jenkins/scripts/kill.sh: -------------------------------------------------------------------------------- 1 | #!/usr/bin/env sh 2 | 3 | echo 'The following command terminates the "npm start" process using its PID' 4 | echo '(written to ".pidfile"), all of which were created when either' 5 | echo '"deliver-for-development.sh" or "deliver-for-development.sh" was executed.' 6 | set -x 7 | kill $(cat .pidfile) 8 | pkill npm 9 | exit 0 10 | -------------------------------------------------------------------------------- /jenkins/scripts/test.sh: -------------------------------------------------------------------------------- 1 | #!/usr/bin/env sh 2 | 3 | echo 'The following "npm" command (if executed) installs the "cross-env"' 4 | echo 'dependency into the local "node_modules" directory, which will ultimately' 5 | echo 'be stored in the Jenkins home directory. As described in' 6 | echo 'https://docs.npmjs.com/cli/install, the "--save-dev" flag causes the' 7 | echo '"cross-env" dependency to be installed as "devDependencies". For the' 8 | echo 'purposes of this tutorial, this flag is not important. However, when' 9 | echo 'installing this dependency, it would typically be done so using this' 10 | echo 'flag. For a comprehensive explanation about "devDependencies", see' 11 | echo 'https://stackoverflow.com/questions/18875674/whats-the-difference-between-dependencies-devdependencies-and-peerdependencies.' 12 | set -x 13 | # npm install --save-dev cross-env 14 | set +x 15 | 16 | echo 'The following "npm" command tests that your simple Node.js/React' 17 | echo 'application renders satisfactorily. This command actually invokes the test' 18 | echo 'runner Jest (https://facebook.github.io/jest/).' 19 | set -x 20 | npm test 21 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "building-a-multibranch-pipeline-project", 3 | "version": "0.1.0", 4 | "private": true, 5 | "dependencies": { 6 | "@testing-library/jest-dom": "6.9.1", 7 | "@testing-library/react": "16.3.0", 8 | "@testing-library/user-event": "14.6.1", 9 | "react": "19.2.1", 10 | "react-dom": "19.2.1", 11 | "react-scripts": "^5.0.1", 12 | "web-vitals": "5.1.0" 13 | }, 14 | "scripts": { 15 | "start": "react-scripts start", 16 | "build": "react-scripts build", 17 | "test": "react-scripts test", 18 | "eject": "react-scripts eject" 19 | }, 20 | "eslintConfig": { 21 | "extends": [ 22 | "react-app", 23 | "react-app/jest" 24 | ] 25 | }, 26 | "browserslist": { 27 | "production": [ 28 | ">0.2%", 29 | "not dead", 30 | "not op_mini all" 31 | ], 32 | "development": [ 33 | "last 1 chrome version", 34 | "last 1 firefox version", 35 | "last 1 safari version" 36 | ] 37 | }, 38 | "packageManager": "npm@9.6.1" 39 | } 40 | -------------------------------------------------------------------------------- /public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jenkins-docs/building-a-multibranch-pipeline-project/HEAD/public/favicon.ico -------------------------------------------------------------------------------- /public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 |
4 | 5 | 6 | 7 | 8 | 12 | 13 | 17 | 18 | 27 |
10 | Edit src/App.js and save to reload.
11 |