RedHatTraining/rht-labs-docs.git

donal

2018-04-17 b00f5ad11910420cd92f9d353981fccd74b94eb9

commit \| author \| age
2b8436	1	# Attack of the Pipelines
c951f7	2
2b8436	3	> In this lab we will explore the sample TODO List application and create a pipeline in Jenkins to build and deploy our code.
D	4
	5	![jenkins-time](../images/exercise2/jenkins-time.jpg)
	6
43f2f2	7	_____
c951f7	8
D	9	## Learning Outcomes
2b8436	10	As a learner by the end of this lesson you will be able to
D	11
	12	- Build and run the full stack of the TODO List application locally
	13	- Create an un-gated pipeline using the Jenkins UI for the backend and frontend
	14	- Add branching to the pipeline to target specific namespace
c951f7	15
D	16	## Tools and Frameworks
2b8436	17	> The following tools are used throughout this exercise. Familiarity with them is not required but knowing what they are may help!
c951f7	18
D	19	1. [Jenkins](https://jenkins.io/) - OpenSource build automation server; highly customisable through plugins
2b8436	20	1. [NodeJS](https://nodejs.org/en/) - Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine. Node.js uses an event-driven, non-blocking I/O model that makes it lightweight and efficient. Node.js' package ecosystem, npm, is the largest ecosystem of open source libraries in the world.
D	21	1. [MongoDB](https://www.mongodb.com/what-is-mongodb) - MongoDB stores data in flexible, JSON-like documents, meaning fields can vary from document to document and data structure can be changed over time
	22	1. [VueJS](https://vuejs.org/) - Vue (pronounced /vjuː/, like view) is a progressive framework for building user interfaces. It is designed from the ground up to be incrementally adoptable, and can easily scale between a library and a framework depending on different use cases. It consists of an approachable core library that focuses on the view layer only, and an ecosystem of supporting libraries that helps you tackle complexity in large Single-Page Applications.
c951f7	23
43f2f2	24	## Big Picture
2b8436	25	> From the previous exercise; we created some supporting tooling needed by our app/
43f2f2	26
D	27	_____
c951f7	28
D	29	## 10,000 Ft View
2b8436	30	> _This lab requires users to take the sample TODO app and create a build pipeline in Jenkins by clicking your way to success ending up with an app deployed to each of the namespaces created previously_
43f2f2	31
2b8436	32	2. Import the projects into your gitlab instance. See README of each for build instructions
43f2f2	33
2b8436	34	2. Deploy a `MongoDB` using the provided template to all project namespace.
D	35
	36	2. Create 2 pipline with three stages (`build`, `bake`, `deploy`) in jenkins for `develop` & `master` branches on the `todolist-fe` such that:
e919d0	37	* a `Build` job is responsible for compiling and packaging our code:
2b8436	38	1. Checkout from source code (`develop` for `<yourname>-dev` & `master` for `<yourname>-test`)
D	39	2. Install node dependencies and run a build / package
e919d0	40	3. Send the package to Nexus
D	41	4. Archive the workspace to persist the workspace in case of failure
	42	4. Tag the GitLab repository with the `${JOB_NAME}.${BUILD_NUMBER}` from Jenkins. This is our `${BUILD_TAG}` which will be used on downstream jobs.
	43	5. Trigger the `bake` job with the `${BUILD_TAG}` param
	44	* a `Bake` job should take the package and put it in a Linux Container
2b8436	45	1. Take an input of the previous jobs `${BUILD_TAG}` ie `${JOB_NAME}.${BUILD_NUMBER}`.
D	46	2. Checkout the binary from Nexus and unzip it's contents
e919d0	47	3. Run an oc start-build of the App's BuildConfig and tag it's imagestream with the provided `${BUILD_TAG}`
2b8436	48	4. Trigger a deploy job using the parameter `${BUILD_TAG}`
e919d0	49	* a `deploy` job should roll out the changes by updating the image tag in the DC:
2b8436	50	1. Take an input of the `${BUILD_TAG}`
D	51	2. Patch / set the DeploymentConfig to the image's `${BUILD_TAG}`
	52	3. Rollout the changes
	53	4. Verify the deployment
	54
	55	2. Repeat the above setup for the backend `todolist-fe`. TIP - use the copy config to speed things up!
	56
	57	2. Verify that both apps and the DB are talking to one another as expected.
c951f7	58
D	59	## Step by Step Instructions
7383de	60	> This is a fairly structured guide with references to exact filenames and sections of text to be added.
c951f7	61
f016b7	62	### Part 1 - Explore the Todo List App
7383de	63	> _In this part of the exercise we will explore the sample application, become familiar with it locally before building and deploying in OCP Land_
43f2f2	64
7383de	65	2. Git clone the `todolist-fe` project to somewhere sensible and checkout the `develop` branch.
D	66	```bash
	67	$ git clone https://github.com/springdo/todolist-fe.git
91cc51	68	$ cd todolist-fe
7383de	69	$ git checkout develop
c951f7	70	```
7383de	71
10416f	72	2. Open up Gitlab and login. Create a new project (internal) in GitLab called `todolist-fe` to host your clone of the project and copy it's remote address. ![new-gitlab-proj](../images/exercise2/new-gitlab-proj.png)
7383de	73
D	74	2. In your local clone of the `todolist-fe`, remove the origin and add the GitLab origin by replacing `<YOUR_GIT_LAB_PROJECT>`. Push your app to GitLab
	75	```bash
10416f	76	$ git remote set-url origin <YOUR_GIT_LAB_PROJECT>
A	77	# verify the origin has been updated
	78	$ git remote -v
7383de	79	$ git push -u origin --all
c951f7	80	```
7383de	81
D	82	2. To get the app running locally; first check you've got node and npm installed
	83	```bash
	84	$ node -v
	85	$ npm -v
	86	```
	87	<p class="tip" >
	88	NOTE - If you are missing these dependencies; install them with ease using the [Node Version Manager](https://github.com/creationix/nvm)
	89	</p>
	90	![node-version](../images/exercise2/node-version.png)
	91
	92	2. The `todolist-fe` has a package.json at the root of the project, this defines some configuration for the app including it's dependencies, dev dependencies, scripts and other configuration. Install the apps dependencies
	93	```bash
	94	$ npm install
	95	```
	96
76d54e	97	2. The `todolist-fe` has some scripts defined in the package.json at the root of the project. To run any of these scripts run `npm run <SCRIPT_NAME>`. Let's start by serving our application
7383de	98	![npm-scripts](../images/exercise2/npm-scripts.png)
D	99	```bash
	100	npm run serve
	101	```
	102
10416f	103	2. This will take sometime to execute; but once done it should open the browser for you displaying the homepage of the `todolist-fe` app.
7383de	104	![todo-list-app](../images/exercise2/todo-list-app.png)
10416f	105	* Click 'Todo' at the top of the home page to get to the above page.
7383de	106	* The server hosting it live reloads; so as you make changes to your code; the app will live update
D	107	* The Data you see in the screen is dummy / stubbed data. This is served up when there is no backend connection found
	108
d2e708	109	2. The app is a todolist manager built in Vue.js. Play around with the App. You will notice when you add todos they appear and clear as expected. If you refresh the page you'll loose all additions. This is because there is persistence
7383de	110
D	111	3. The structure of the `todolist-fe` is as follows.
	112	```bash
	113	todolist-fe
	114	├── jest.config.js
	115	├── jsconfig.json
	116	├── nightwatch.config.js
	117	├── node_modules
	118	├── package.json
	119	├── public
	120	│ ├── favicon.ico
	121	│ ├── img
	122	│ ├── index.html
	123	│ └── manifest.json
	124	├── src
	125	│ ├── App.vue
	126	│ ├── assets
	127	│ ├── components
10416f	128	│ │ └── *
7383de	129	│ ├── config
D	130	│ ├── main.js
	131	│ ├── registerServiceWorker.js
	132	│ ├── router.js
	133	│ ├── scss
	134	│ ├── services
	135	│ ├── store
10416f	136	│ │ └── *
7383de	137	│ └── views
10416f	138	│ └── *
7383de	139	├── tests
D	140	│ ├── e2e
	141	│ └── unit
	142	└── vue.config.js
	143	```
	144	where the following are the important things:
	145	* `./src` is the main collection of files needed by the app. The entrypoint is the `main.js` which is used to load the root `App.vue` file.
	146	* `./node_modules` is where the dependencies are stored
	147	* `./test` contains our end-to-end tests and unit tests. More covered on these in later labs.
10416f	148	* `./src/components` contains small, lightweight reusable components for our app. For example, the `NewTodo` component which encapsulates the styling, logic and data for adding a new todo to our list
7383de	149	* `./src/store` is the `vuex` files for managing application state and backend connectivity
D	150	* `./src/views` is the view containers; which are responsible for loading components and managing their interactions.
	151	* the `./src/router.js` controls routing logic. In our case the app only has one real endpoint.
	152	* `./src/scss` contains custom SCSS used in the application.
	153	* `./*.js` is mostly config files for running and managing the app and the tests
c951f7	154
456daa	155
d2e708	156	2. Now let's move on to the `todolist-api` and wire them together. As with the `todolist-fe` we need to clone the repo and add it to our GitLab in the cluster.
D	157	```bash
	158	$ git clone https://github.com/springdo/todolist-api.git
10416f	159	$ git cd todolist-api
d2e708	160	$ git checkout develop
D	161	```
	162
	163	2. Create a new project (internal) in GitLab called `todolist-api` to host your clone of the project and copy it's remote address.
	164
	165	2. In your local clone of the `todolist-api`, remove the origin and add the GitLab origin by replacing `<YOUR_GIT_LAB_PROJECT>`. Push your app to GitLab
	166	```bash
10416f	167	$ git remote set-url origin <YOUR_GIT_LAB_PROJECT>
d2e708	168	$ git push -u origin --all
D	169	```
	170
	171	2. Once pushed; explore the application. It is a NodeJS application with the Express.js framework and MongoDB for persistent storage. Same as before, the `package.json` defines most of the configuration etc. Install the dependencies
	172	```bash
10416f	173	# npm i === npm install
d2e708	174	$ npm i
D	175	```
	176
	177	2. While the dependencies are being installed; explore the project structure.
	178	```bash
	179	todolist-api
	180	├── Dockerfile
	181	├── Gruntfile.js
	182	├── README.md
	183	├── node_modules
	184	├── package-lock.json
	185	├── package.json
	186	├── server
	187	│ ├── api
	188	│ │ └── todo
	189	│ ├── app.js
	190	│ ├── components
	191	│ │ └── errors
	192	│ ├── config
	193	│ │ ├── environment
	194	│ │ ├── express.js
	195	│ │ ├── local.env.sample.js
	196	│ │ └── seed.js
	197	│ ├── mocks
	198	│ │ ├── mock-routes-config.json
	199	│ │ ├── mock-routes.js
	200	│ │ └── mock-routes.spec.js
	201	│ ├── routes.js
	202	│ └── views
	203	│ └── 404.html
	204	└── tasks
	205	└── perf-test.js
	206	```
	207	where the following are the important things:
	208	* `./server` is the main collection of files needed by the app. The entrypoint is the `app.js`
	209	* `./node_modules` is where the dependencies are stored
	210	* `./server/api` is where the api's controller, data model & unit test are stored.
	211	* `./server/mocks` is a mock server used for when there is no DB access
10416f	212	* `./server/config` stores our Express JS config, header information and other middleware.
A	213	* `./server/config/environment` stores enviromnent specific config; such as connectivity to backend services like MongoDB.
d2e708	214	* `./tasks` is a collection of additional `Grunt` tasks which will be used in later labs
10416f	215	* `Grunt` is a taskrunner for use with Node.JS projects
d2e708	216	* `package.json` contains the dependency list and a lot of very helpful scripts for managing the app lifecycle
D	217
	218	2. The npm scripts are shown below. There are application start scripts, build and test items which will be used in the build. The ones for MongoDB are just provided for convenience and require Docker installed to execute.
	219	```json
	220	"scripts": {
	221	"start": "node server/app.js",
	222	"dev": "./node_modules/.bin/grunt serve",
	223	"jshint": "./node_modules/.bin/grunt jshint",
	224	"jshint:ci": "./node_modules/.bin/grunt jshint:ci_server",
	225	"clean": "rm -rf reports package-contents*",
	226	"build": "mkdir -p package-contents && cp -vr server Dockerfile package.json package-contents",
	227	"package": "zip -r package-contents.zip package-contents",
	228	"test": "node_modules/.bin/nyc node_modules/.bin/mocha server/*/.spec.js --exit",
	229	"test:ci": "export MOCHA_FILE='reports/server/mocha/test-results.xml' && export NODE_ENV=ci && node_modules/.bin/nyc node_modules/.bin/mocha server/*/.spec.js -R mocha-junit-reporter --exit",
	230	"mongo" : "docker run -i -d --name mongo-local -p 27017:27017 mongo",
	231	"mongo:drop" : "npm run mongo:stop && docker rm mongo-local",
	232	"mongo:stop" : "docker stop mongo-local",
	233	"mongo:start" : "docker start mongo-local"
	234	},
456daa	235	```
A	236
60ff08	237	2. To prepare Nexus to host the binaries created by the frontend and backend builds we need to run a prepare-nexus script. Before we do this we need to export some variables.
456daa	238	```bash
60ff08	239	export NEXUS_SERVICE_HOST=nexus-<YOUR_NAME>-ci-cd.apps.somedomain.com
A	240	export NEXUS_SERVICE_PORT=80
	241	npm run prepare-nexus
d2e708	242	```
60ff08	243	<p class="tip">
A	244	NOTE - This step in a residency would be automated by a more complex nexus deployment in the ci-cd project
	245	</p>
d2e708	246
D	247	2. To run the application; start a new instance of the MongoDB by running.
	248	```bash
	249	$ npm run mongo
	250	```
	251	<p class="tip">
60ff08	252	NOTE - `npm run mongo:drop` is used to completely remove the running container. `npm run mongo:stop` & `npm run mongo:start` will preserve data in the container
d2e708	253	</p>
D	254
	255	2. Fire up the `todolist-api` by running.
	256	```bash
	257	$ npm run start
	258	```
	259	![node-app-started](../images/exercise2/node-app-started.png)
	260
10416f	261	2. Check things are up and running by testing the API with a `curl`. The API should return some seeded data (stored in `server/config/seed.js`)
d2e708	262	```bash
D	263	$ curl localhost:9000/api/todos
	264	```
	265	```json
	266	[{
	267	"_id": "5ac8ff1fdfafb02138698948",
	268	"title": "Learn some stuff about MongoDB",
	269	"completed": false,
	270	"__v": 0
	271	},
	272	{
	273	"_id": "5ac8ff1fdfafb02138698949",
	274	"title": "Play with NodeJS",
	275	"completed": true,
	276	"__v": 0
	277	}]
	278	```
	279
10416f	280	2. Now let's check out `todolist-fe` app by reloading the browser. We should now see our dummy front end data is replaced by the backend seed data. Adding new todos will add them in the backend, these will persist when the page is refreshed.
d2e708	281	![fullstack-app](../images/exercise2/fullstack-app.png)
D	282
	283
9fc88c	284	### Part 2 - Create a NodeJS Build slave
399baa	285	> _In this exercise; we will create a build configuration to generate a slave for Jenkins to use in it's builds_
9fc88c	286
399baa	287	3. In order for Jenkins to be able to run `npm` builds and installs as we have done locally, we must configure a `jenkins-build-slave` for Jenkins to use. This slave will be dynamically provisioned when we run a build. It needs to have NodeJS and npm installed in it. In your `enablement-cd-cd` repository, checkout the template and configuration. This will bring in the template, the params & the `Dockerfile`.
9fc88c	288	```bash
D	289	$ git checkout exercise2/jenkins-slave docker/ templates/ params/
	290	```
	291
	292	3. Open the `params/jenkins-slave-npm` file and update `<YOUR_ENABLEMENT_GIT_REPO>` accordingly. This set of parameters will clone from the enablement repo and run a docker build of the Dockerfile stored in `docker/jenkins-slave-npm`.
	293	```bash
	294	SOURCE_REPOSITORY_URL=<YOUR_ENABLEMENT_GIT_REPO>
	295	SOURCE_CONTEXT_DIR=docker/jenkins-slave-npm
	296	NAME=npm-jenkins-slave
	297	```
	298
f016b7	299	3. Create an item in the `inventory/group_vars/all.yml` under the `ci-cd-builds` object to run the template with. Don't forget to substitute `<YOUR_NAME>`
9fc88c	300	```yaml
D	301	- name: "jenkins-npm-slave"
	302	namespace: "<YOUR_NAME>-ci-cd"
	303	template: "{{ inventory_dir }}/../templates/jenkins-slave-generic-template.yml"
	304	params: "{{ inventory_dir }}/../params/jenkins-slave-npm"
	305	tags:
	306	- jenkins-slave
	307	```
	308	![jenkins-slave-ansible](../images/exercise2/jenkins-slave-ansible.png)
	309
	310	3. Run the OpenShift Applier to trigger a build of this jenkins slave image.
	311	```bash
	312	$ ansible-playbook roles/openshift-applier/playbooks/openshift-cluster-seed.yml \
	313	-i inventory/ \
	314	-e "filter_tags=jenkins-slave"
	315	```
	316
	317	3. Verify the build executed successfully by logging into the cluster and checking the `builds` tab of the `<YOUR_NAME>-ci-cd` project.
	318	![jenkins-slave-npm-build](../images/exercise2/jenkins-slave-npm-build.png)
	319
	320	3. You should now be able to apply the label `jenkins-slave-npm` to a build job to run a build on this newly created slave as we will see in the rest of this lab
	321	<p class="tip">
	322	NOTE - Jenkins may need to be restarted for the configuration to appear. To do this; navigate to your jenkins instance and add `/restart` to the url.
	323	</p>
	324
	325	### Part 3 - Add configs to cluster
f016b7	326	> _In this exercise; we will use the OpenShift Applier to drive the creation of cluster content required by the app such as MongoDB and the Apps Build / Deploy Config_
9fc88c	327
f016b7	328	4. On your terminal navigate to the root of the `todolist-fe` application. The app contains a hidden folder called `.openshift-applier`. Move `cd .openshift-applier` into this directory and you should see a familiar looking directory structure for an ansible playbook.
cdcafd	329	```
D	330	.openshift-applier
	331	├── README.md
	332	├── apply.yml
	333	├── inventory
	334	│ ├── group_vars
	335	│ │ └── all.yml
	336	│ └── hosts
	337	├── params
	338	│ ├── build
	339	│ ├── dev
	340	│ └── test
	341	├── requirements.yml
	342	└── templates
	343	├── todolist-api-build.yml
	344	└── todolist-api-deploy.yml
	345	```
	346	where the following
bc2216	347	* the `apply.yml` file is the entrypoint.
cdcafd	348	* the `inventory` contains the objects to populate the cluster with.
D	349	* the `params` contains the variables we'll apply to the `templates`
f016b7	350	* the `templates` required by the app. These include the Build, Deploy configs as well as the services, health checks, and other app definitions.
cdcafd	351
bc2216	352	4. There are a few updates to these manifests we need to make before applying the cluster content. In the `apply.yml` update the namespace `<YOUR_NAME>` variables accordingly.
cdcafd	353	```yaml
D	354	ci_cd_namespace: donal-ci-cd
	355	dev_namespace: donal-dev
	356	test_namespace: donal-test
	357	```
	358
bc2216	359	4. In the `params` folder update the `dev` and `test` files with the correct `<YOUR_NAME>` as you've done above. Example for the `dev` file:
cdcafd	360	```bash
D	361	PIPELINES_NAMESPACE=donal-ci-cd
c58300	362	NAME=todolist-fe
cdcafd	363	DEPLOYER_USER=jenkins
D	364	APP_TAG=latest
	365	NAMESPACE=donal-dev
	366	```
	367
f016b7	368	4. With those changes in place we can now run the playbook. First install the `openshift-applier` dependency and then run the playbook (from the `.openshift-applier` directory). This will populate the cluster with all the config needed for the front end app.
cdcafd	369	```bash
D	370	$ ansible-galaxy install -r requirements.yml --roles-path=roles
	371	$ ansible-playbook apply.yml -i inventory/
	372	```
071905	373	![ansible-success](../images/exercise2/ansible-success.png)
cdcafd	374
f016b7	375	4. Once successful, `commit` and `push` your changes to gitlab.
A	376
e90e9c	377	4. Back on your terminal navigate to the root of the `todolist-api` application. Open the `.openshift-applier` directory. The same layout as seen in `todolist-fe` should be visible with one noticeable difference; the api requires `MongoDB` to connect to at runtime.
c58300	378
D	379	4. In the `apply.yml` update the namespace `<YOUR_NAME>` variables accordingly. For example:
	380	```yaml
	381	ci_cd_namespace: donal-ci-cd
	382	dev_namespace: donal-dev
	383	test_namespace: donal-test
	384	```
	385
	386	4. In the `params` folder update the `dev` and `test` files with the correct `<YOUR_NAME>` as you've done above. Example for the `dev` file:
	387	```bash
	388	PIPELINES_NAMESPACE=donal-ci-cd
	389	NAME=todolist-api
	390	DEPLOYER_USER=jenkins
	391	APP_TAG=latest
	392	NAMESPACE=donal-dev
	393	```
	394
bfd54c	395	4. Finally; run the Openshift Applier and install its dependencies to run the content into the cluster
c58300	396	```bash
D	397	$ ansible-galaxy install -r requirements.yml --roles-path=roles
	398	$ ansible-playbook apply.yml -i inventory/
	399	```
9fc88c	400
e90e9c	401	4. Validate the build and deploy configs have been created in Openshift by checking `<YOUR_NAME> CI-CD builds` for the `BuildConfigs`
A	402
	403	4. Check `<YOUR_NAME>-dev` for the deployment ![ocp-app-deployment-overview](../images/exercise2/ocp-app-deployment-overview.jpeg)
	404
9fc88c	405	### Part 4 - Build > Bake > Deploy
0e648a	406	> _In this exercise; we take what we have working locally and get it working in OpenShift_
9fc88c	407
41217d	408	This exercise will involve creating three stages (or items) in our pipeline, each of these is detailed below at a very high level. Move on to the next step to begin implementation.
D	409	* a build job is responsible for compiling and packaging our code:
	410	1. Checkout from source code (`develop` for `<yourname>-dev` & `master` for `<yourname>-test`)
	411	2. Install node dependencies and run a build / package
	412	3. Send the package to Nexus
	413	4. Archive the workspace to persist the workspace in case of failure
	414	4. Tag the GitLab repository with the `${JOB_NAME}.${BUILD_NUMBER}` from Jenkins. This is our `${BUILD_TAG}` which will be used on downstream jobs.
	415	5. Trigger the `bake` job with the `${BUILD_TAG}` param
	416	* a bake job should take the package and put it in a Linux Container
	417	1. Take an input of the previous jobs `${BUILD_TAG}` ie `${JOB_NAME}.${BUILD_NUMBER}`.
	418	2. Checkout the binary from Nexus and unzip it's contents
	419	3. Run an oc start-build of the App's BuildConfig and tag it's imagestream with the provided `${BUILD_TAG}`
	420	4. Trigger a deploy job using the parameter `${BUILD_TAG}`
	421	* a deploy job should roll out the changes by updating the image tag in the DC:
	422	1. Take an input of the `${BUILD_TAG}`
	423	2. Patch / set the DeploymentConfig to the image's `${BUILD_TAG}`
	424	3. Rollout the changes
	425	4. Verify the deployment
76d54e	426	* We will now go through these steps in detail.
9fc88c	427
41217d	428	#### Part 4a - Build
9fc88c	429
c58300	430	5. With the BuildConfig and DeployConfig in place for both our apps (`-fe` & `-api`) from previous steps; Log into Jenkins and create a `New Item`. This is just jenkins speak for a new job configuration. ![new-item](../images/exercise2/new-item.png)
9fc88c	431
579436	432	5. Name this job `dev-todolist-fe-build` and select `Freestyle Job`. All our jobs will take the form of `<ENV>-<APP_NAME>-<JOB_PURPOSE>`. ![freestyle-job](../images/exercise2/freestyle-job.png)
9fc88c	433
1b285d	434	5. The page that loads is the Job Configuration page andi t can be returned to at anytime from Jenkins. Let's start configuring our job. To conserve space; we will make sure Jenkins only keeps the last builds artifacts. Tick the `Discard old builds` checkbox and set `Max # of builds to keep with artifacts` to 1 as below ![keep-artifacts](../images/exercise2/keep-artifacts.png)
43f2f2	435
579436	436	5. Our NodeJS build needs to be run on the `jenkins-slave-npm` we created earlier. Specify this in the box labelled `Restrict where this project can be run` ![label-jenkins-slave](../images/exercise2/label-jenkins-slave.png)
c951f7	437
1b285d	438	5. On the Source Code Management tab, select the Git radio button, specify the endpoint for our GitLab `todolist-fe` Project and specify your credentials from the dropdown box. Set the Branch Specifier to `develop`. ![git-scm](../images/exercise2/git-scm.png)
c951f7	439
579436	440	5. Scroll down to the Build Environment tab and select the `Color ANSI Console Output` checkbox ![ansi](../images/exercise2/ansi.png)
e919d0	441
76d54e	442	5. Move on to the Build section and select `Add build step`. From the dropdown select `Execute Shell`. On the box that appears; insert the following, to build package and deploy our app to Nexus:
e919d0	443	```bash
D	444	#!/bin/bash
	445	set -o xtrace
	446	scl enable rh-nodejs8 'npm install'
	447	scl enable rh-nodejs8 'npm run build:ci:dev'
	448	scl enable rh-nodejs8 'npm run package'
	449	scl enable rh-nodejs8 'npm run publish'
	450	```
	451	![build-step](../images/exercise2/build-step.png)
	452
579436	453	5. Scroll to the final section; the Post-build Actions. Add a new post-build action from the dropdown called `Archive the artifacts` and specify `**` in the box. This will zip the entire workspace and copy it back to Jenkins for inspection if needed. ![archive-artifacts](../images/exercise2/archive-artifacts.png)
e919d0	454
579436	455	5. On the Post-build Actions; Add another post-build action from the dropdown called `Git Publisher`. This is useful for tying the git check-in to the feature in your tracking tool to the built product.
e919d0	456	* Tick the box `Push Only If Build Succeeds`
D	457	* Add the Tag to push of
	458	```bash
	459	${JOB_NAME}.${BUILD_NUMBER}
	460	```
	461	* Specify the commit message to be
	462	```bash
	463	Automated commit by jenkins from ${JOB_NAME}.${BUILD_NUMBER}
	464	```
1b285d	465
A	466	* Check `Create New Tag` and set `Target remote name` to `origin`
e919d0	467	![git-publisher](../images/exercise2/git-publisher.png)
D	468
1b285d	469	5. Finally; add the trigger for the next job in the pipeline. This is to trigger the bake job with the current build tag. Add another post-build action from the dropdown called `Trigger parameterized build on other projects`.
e919d0	470	* Set the project to build to be `dev-todolist-fe-bake`
D	471	* Set the condition to be `Stable or unstable but not failed`.
	472	* Click Add Parameters dropdown and select Predefined parameters.
	473	* In the box, insert our BUILD_TAG as follows
	474	```bash
	475	BUILD_TAG=${JOB_NAME}.${BUILD_NUMBER}
	476	```
	477	![param-trigger](../images/exercise2/param-trigger.png)
	478	<p class="tip">
3b5f91	479	NOTE - Jenkins might say "No such project ‘dev-todolist-fe-bake’. Did you mean ...." at this point. Don't worry; it's because we have not created the next job yet.
e919d0	480	</p>
D	481
579436	482	5. Hit `save` which will take you to the job overview page - and that's it; our build phase is complete!
e919d0	483
41217d	484	#### Part 4b - Bake
D	485
579436	486	5. Next we will setup our bake phase; which is a little simpler. Go to Jenkins home and create another Freestyle Job (as before) called `dev-todolist-fe-bake`.
e919d0	487
1b285d	488	5. This job will take in the BUILD_TAG from the previous one so check the `This project is parameterized` box on the General tab.
3b5f91	489	* Add string parameter type
1b285d	490	* set the Name to `BUILD_TAG`. This will be available to the job as an Enviroment Variable.
3b5f91	491	* You can set `dev-todolist-fe-build.` as the default value for ease when triggering manually.
D	492	* The description is not required but a handy one for reference would be `${JOB_NAME}.${BUILD_NUMBER} of previous build eg dev-todolist-fe-build.1232`
	493	![param-trigger-bake](../images/exercise2/param-trigger-bake.png)
c951f7	494
579436	495	5. This time set the `Restrict where this project can be run` label to `master`.
3b5f91	496	<p class="tip">
1b285d	497	`Master` is the default node that jobs run on. We don't want jenkins to execute the bake on any other nodes if the `master` is busy so it is always safer to specify it here.
3b5f91	498	</p>
D	499
579436	500	5. There is no Git or SCM needed for this job so move down to the Build Environment and tick `Delete workspace before build starts`
3b5f91	501
579436	502	5. Scroll down to the Build Environment tab and select the `Color ANSI Console Output` checkbox ![delete-ansi](../images/exercise2/delete-ansi.png)
3b5f91	503
579436	504	5. Move on to the Build section and select `Add build step`. From the dropdown select `Execute Shell`. On the box the appears; insert the following, to pull the package from Nexus. We patch the BuildConfig with the Jenkins Tag to get traceablility from feature to source code to built item. Finally; the oc start-build command is run:
1b285d	505	Remember to replace `<YOUR_NAME>` accordingly.
3b5f91	506	```bash
D	507	#!/bin/bash
d00794	508	curl -v -f http://admin:admin123@${NEXUS_SERVICE_HOST}:${NEXUS_SERVICE_PORT}/repository/zip/com/redhat/todolist/${BUILD_TAG}/package-contents.zip -o package-contents.zip
3b5f91	509	unzip package-contents.zip
D	510	oc project <YOUR_NAME>-ci-cd # probs not needed
	511	NAME=todolist-fe
9adaf7	512	oc patch bc ${NAME} -p "{\"spec\":{\"output\":{\"to\":{\"kind\":\"ImageStreamTag\",\"name\":\"${NAME}:${BUILD_TAG}\"}}}}"
3b5f91	513	oc start-build ${NAME} --from-dir=package-contents/ --follow
D	514	```
	515	![bake-step](../images/exercise2/bake-step.png)
	516
579436	517	5. Finally; add the trigger for the next job in the pipeline. Add a post-build action from the dropdown called `Trigger parameterized build on other projects`.
3b5f91	518	* Set the project to build to be `dev-todolist-fe-deploy`
D	519	* Set the condition to be `Stable`.
	520	* Click Add Parameters dropdown and select Current build parameters. This will pass the ${BUILD_TAG} to the downstream job which we will create next.
	521	![downstream-trigger-deploy](../images/exercise2/downstream-trigger-deploy.png)
	522
579436	523	5. Hit save! That's our bake phase done! Finally; on to our deploy
3b5f91	524
41217d	525	#### Part 4c - Deploy
D	526
1b285d	527	5. Next we will setup our deploy phase. This job is very similar in setup to the bake phase so this time go to Jenkins home and create `dev-todolist-fe-deploy` Job but scroll to the bottom and Copy from `dev-todolist-fe-bake`.
579436	528	![copy-from](../images/exercise2/copy-from.png)
D	529
1b285d	530	5. The only two differences between these jobs is the Build Step and there are no Post Build Actions. First to the Build tab and add the following to the shell box. The process for running the deploy is to tag the image created previously for use in the `ci-cd` namespace for use in the dev project. Then update the DeploymentConfig to use the Jenkins Tag which kicked the process off. Once successful; the changes are rolled out. Remember to change `<YOUR_NAME>` accordingly.
579436	531	```bash
D	532	#!/bin/bash
	533	set -o xtrace
	534	# VARS
1b285d	535	PIPELINES_NAMESPACE=<YOUR_NAME>-ci-cd
A	536	NAMESPACE=<YOUR_NAME>-dev
579436	537	NAME=todolist-fe
D	538	oc project ${NAMESPACE}
	539	oc tag ${PIPELINES_NAMESPACE}/${NAME}:${BUILD_TAG} ${NAMESPACE}/${NAME}:${BUILD_TAG}
	540	oc set env dc ${NAME} NODE_ENV=dev
	541	oc set image dc/${NAME} ${NAME}=docker-registry.default.svc:5000/${NAMESPACE}/${NAME}:${BUILD_TAG}
	542	oc rollout latest dc/${NAME}
	543	```
	544	![deploy-step](../images/exercise2/deploy-step.png)
	545
1b285d	546	5. Secondly, add another build step called `Verify OpenShift Deployment` including the following:
579436	547	* Set the Project to your `<YOUR_NAME>-dev`
D	548	* Set the DeploymentConfig to your app's name `todolist-fe`
	549	* Set the replica count to `1`
	550	![verify-deployment](../images/exercise2/verify-deployment.png)
	551
	552	5. Finally; delete the Post Build Action to trigger another job (by hitting the red X). Save the configuration. We're almost ready to run the pipeline!
	553
41217d	554	#### Part 4d - Pipeline
D	555
1b285d	556	5. With our Jenkins setup in place; now move to our `todolist-fe` app. We need to add our configuration to the frontend to tell it where the API layer is hosted. Open in it your favourite editor and navigate to `src/config/dev.js`. Update `<YOUR_NAME>` accordingly with the root where the Todo List API will live. For example:
41217d	557	![fe-dev-config](../images/exercise2/fe-dev-config.png)
D	558
	559	5. Repeat this for `src/config/test.js` file. Once done; commit your chanages and push them to GitLab
	560	```bash
	561	$ git add .
	562	$ git commit -m "ADD config for api"
	563	$ git push
	564	```
	565
1b285d	566	5. Back on Jenkins; We can tie all the jobs in the pipeline together into a nice single view using the Build Pipeline view. Back on the Jenkins home screen Click the + beside the all tab on the top. Give the new view a sensible name like `dev-todolist-fe-pipeline`
579436	567	![add-view](../images/exercise2/add-view.png).
D	568
	569	5. Set the Pipeline Flow's Inital Job to `dev-todolist-fe-build` and save.
1b285d	570	TODO - change below sscreenshot
579436	571	![pipeline-flow](../images/exercise2/pipeline-flow.png)
D	572
1b285d	573	5. You should now see the pipeline view. Run the pipeline by hitting run (you can move onto the next part while it is running as it may take some time).
579436	574	![dev-pipeline-view](../images/exercise2/dev-pipeline-view.png)
D	575
	576	### Part 5 - Backend Pipeline
1b285d	577	> In this exercise we will use the Jobs created for the `todolist-fe` as a template to create a pipeline for the `todolist-api` app by copying the config.
579436	578
1b285d	579	6. On Jenkins home; create a new job for our backend build called `dev-todolist-api-build`. Use the `Copy from` section to copy all the configuration from the `dev-todolist-fe-build`.
d00794	580	![copy-fe-build](../images/exercise2/copy-fe-build.png)
579436	581
d00794	582	6. When this has loaded; find and replace both occurrences `-fe` with `-api` within the Job's configuration. Places to make sure you check are:
D	583	* The GitLab project URL
	584	* Projects to build on the Post Build Action
579436	585
1b285d	586	6. On the Build tab; remove the `:dev` from the `npm run build:ci:dev` so the line reads.
A	587	The rest of the instructions can be left as they are.
d00794	588	```bash
D	589	scl enable rh-nodejs8 'npm run build:ci'
	590	```
579436	591
d00794	592	6. Save the configuration for `dev-todolist-api-build`
579436	593
1b285d	594	6. On Jenkins home; create a new job for our backend bake called `dev-todolist-api-bake`. Use the Copy from section to copy all the configuration from the `dev-todolist-fe-bake` as you've just done.
d00794	595
D	596	6. When this has loaded; find and replace the occurrences `-fe` with `-api` within the Job's configuration. Places to make sure you check are:
	597	* The BUILD_TAG default value and description
	598	* NAME in the execute shell step
	599	* Projects to build on the Post Build Action
	600
	601	6. Save the configuration for `dev-todolist-api-build`
	602
	603	6. On Jenkins home; create a new job for our backend build called `dev-todolist-api-deploy`. Use the Copy from section to copy all the configuration from the `dev-todolist-fe-deploy` as you've just done.
	604
	605	6. When this has loaded; find and replace the occurrences `-fe` with `-api` within the Job's configuration. Places to make sure you check are:
	606	* The BUILD_TAG default value and description
	607	* NAME in the execute shell step
	608	* The name of the DeploymentConfig to validate in the Verify OpenShift Deployment
	609
	610	6. Save the configuration for `dev-todolist-api-build` and that's it for wiring together our `todolist-api` pipeline.
	611
456daa	612	6. Run the `dev-todolist-api-build` to trigger the backend pipeline. While this is building, check our front end app and see if it has deployed successfully. Check the deployment in OpenShift and load the url. If it has been a success we should see our dummyData. This is because there is no backend deployed.
d00794	613	![no-backend-app](../images/exercise2/no-backend-app.png)
D	614
456daa	615	6. When `dev-todolist-api-build` has completed we should see the sample data has changed on refresh.
d00794	616	![with-backend-app](../images/exercise2/with-backend-app.png)
c951f7	617
106095	618	### Part 6 - GitLab Webhooks
b00f5a	619	> _In this exercise we will link GitLab to Jenkins so that new build jobs are triggered on each push to the `develop` branch._
11b338	620
b00f5a	621	<p class="tip" >
D	622	NOTE - This section is optional! Git webhooks are useful but not needed for course completion.
	623	</p>
	624
	625	7. In order to allow GitLab trigger Jenkins (because of the OpenShift Auth Plugin), we need to allow the `Annoymous` user trigger builds. Head to your Jenkins Dashboard and click on `Manage Jenkins` on the left hand side. Then scroll down and click `Configure Global Security`. Alternatively, type in `https://jenkins-<YOUR_NAME>-ci-cd.apps.s8.core.rht-labs.com/configureSecurity/` . You should see a screen like so:
106095	626	![jenkins-global-security](../images/exercise2/jenkins-global-security.png)
A	627
	628	7. Scroll down to the `Authorization` section and allow `Anonymous` to create jobs. Do this by navigating through the matrix of checkboxes and check `Build` and `Cancel` under the Job heading. Leave all other user behaviour as is. Anonymous is the user that GitLab will act as so this allows the WebHook to trigger builds. (The screenshot has been cropped to bring Job further to the left.) Hit `Save` or `Apply`.
	629	![jenkins-anon-permissions](../images/exercise2/jenkins-anon-permissions.png)
	630
	631	7. Go to your `dev-todolist-fe-build` and head to the `configure` section (`https://jenkins-<YOUR_NAME>-ci-cd.apps.s8.core.rht-labs.com/job/dev-todolist-fe-build/configure`). Scroll down to the `Build Triggers` section and check the `Build when a change is pushed to GitLab` box. Leave all the other settings as they are but copy the `GitLab webhook URL`. `https://jenkins-<YOUR_NAME>-ci-cd.apps.s8.core.rht-labs.com/project/dev-todolist-fe-build`.
0c725b	632	![jenkins-build-triggers-gitlab](../images/exercise2/jenkins-build-triggers-gitlab.png)
11b338	633
0c725b	634	7. Switch over to GitLab and select your `todolist-fe` repository. On the left hand task bar hover over the settings cog and select `integrations`. (`https://gitlab-<YOUR_NAME>-ci-cd.apps.s8.core.rht-labs.com/<YOUR_NAME>/todolist-fe/settings/integrations`)
A	635	![gitlab-integrations](../images/exercise2/gitlab-integrations.png)
11b338	636
0c725b	637	7. Paste the `GitLab webhook URL` that we copied earlier into the `URL` field. Check Push events as the trigger, and make sure you `uncheck` the `SSL verification` checkbox. Click Add webhook at the bottom.
A	638	![gitlab-integrations-details](../images/exercise2/gitlab-integrations-details.png)
11b338	639
0c725b	640	7. Before we move on let's test the webhook. Select the Test drop down and click `Push events`. This will trigger the test and return a status code at the top of the page. If all goes well it should be a cool blue 200.
A	641	![gitlab-integrations-details](../images/exercise2/gitlab-webhook-test.png)
11b338	642
0c725b	643	7. We can now test this properly by heading into the `todolist-fe` repository through <YOUR_FAVOURITE_EDITOR>. Make a small change to your code, then commit and push it, ensuring you're on the develop branch. Then head over to Jenkins and wait until the `dev-todolist-fe-build` job has been triggered.
11b338	644
0c725b	645	7. All that's left to do is to repeat the same steps for `todolist-api`:
A	646	Create Build Trigger:
	647	`https://jenkins-<YOUR_NAME>-ci-cd.apps.s8.core.rht-labs.com/job/dev-todolist-api-build/configure`
	648	Create GitLab Integration:
	649	`https://gitlab-<YOUR_NAME>-ci-cd.apps.s8.core.rht-labs.com/donal/todolist-api/settings/integrations`
	650	Check your build status and you should see something like this. With `Started by Gitlab push by <YOUR_NAME>`:
	651	![jenkins-gitlab-webhook-success](../images/exercise2/jenkins-gitlab-webhook-success.png)
11b338	652
0c725b	653	7. We now have a working GitLab webhook so any time we push code it will automatically build! Next up we'll show you how to add tests to your pipeline.
b00f5a	654
43f2f2	655	_____
D	656
c951f7	657	## Extension Tasks
cf415b	658	> _Ideas for go-getters. Advanced topic for doers to get on with if they finish early. These will usually not have a solution available and are provided for additional scope._
c951f7	659
d00794	660	- Pipeline Tasks
456daa	661	* Add pipeline for `master` branch for each project. Use `test-` instead of `dev-` across all config and names in the pipeline
A	662	* Do the `.openshift-applier` steps as part of the pipeline for greater end to end automation.
e919d0	663	- Promote build
456daa	664	* Create a _promote-to-uat_ phase after the `master` branch deploy
cf415b	665	* Create a `uat` env using the OpenShift Applier as seen before
e919d0	666	* Tag and promote the image without rebuilding after the `test-**-deploy`
c58300	667	- MongoDB tasks
e919d0	668	* Add MongoDB Stateful set for the UAT environment (or test)
D	669	* Inject MongoDB config into the NodeJS app using config map & secrets.
cf415b	670	* Improve the security of the DB by making the user /passwords randomly generated
e919d0	671	- Setup Nexus as an `npm` mirror registry and use it in the builds to speed up the build time
c951f7	672
D	673	## Additional Reading
43f2f2	674	> List of links or other reading that might be of use / reference for the exercise
D	675
7383de	676	- What's in a package.json?
D	677
43f2f2	678	## Slide links
399baa	679	> link back to the deck for the supporting material