+++
title = "Pipeline Template Catalogs"
chapter = true
weight = 40
+++

# CloudBees CI - Pipeline Template Catalogs

[Instructor led video of lab.](https://youtu.be/YBoX-bE3YYQ)

## Import Pipeline Template Catalog
1. Navigate to the top-level of your Team Master and click on **Pipeline Template Catalogs** in the left menu<p><img src="../../images/Initial-template-click.png" width=800/>
2. Click on **Add catalog**<p><img src="../../images/Add-template-click.png" width=800/>
3. Fill out the **Catalog source control options**:
   1. **Branch or tag for this template catalog**: master
   2. Select **GitHub** under **Catalog source code repository location**
   3. **Credentials**: select the *username/password* credential you created for the CloudBees CI workshop - it will show up as - `[GitHub username]/****** (GitHub PAT from JCasC - username/password)`
   4. **Repository HTTPS URL**: The GitHub URL for your forked copy of the **pipeline-template-catalog** repository. In the example below the GitHub Organization being used is **bee-cd** so the *repository URL* would be `https://github.com/bee-cd/pipeline-template-catalog.git`. **NOTE:** You need to use the repository URL for the GitHub Organization you created for this workshop in the CloudBees CI workshop setup lab - so `bee-cd` would be replaced with your GitHub Organization.
   5. Next, click the **Validate** button to ensure your credentials and repository URL are set correctly. If the validation fails, please check that you selected the correct GitHub credentials and that the **Repository HTTPS URL** points to the fork of the **pipeline-template-catalog** repository in the GitHub Organization that you created for this workhsop.
   6. Finally, click the **Save** button <p><img src="../../images/add-catalog-save.png" width=800/>
4. Once the import is complete, click on the **CloudBees Days Workshop Catalog** link. <p><img src="../../images/catalog-link.png" width=800/>
5. The Pipeline Template Catalog you imported will have 4 templates to include the **VueJS** template which we will be using next. <p><img src="../../images/Succesful-template-import.png" width=800/>
6. On your Team Master navigate to the folder with the same name as your Team Master (you should see the `workshop-setup` Pipeline job) and then click on the **New Item** link in the left menu<p><img src="../../images/new-item-click.png" width=800/>
7. For the **item name** enter ***template-jobs***, select **Folder** and then click the **OK** button. <p><img src="../../images/new-folder-click.png" width=800/>
8.  Scroll to the bottom of the folder configuration and click on **Restrict the kind of children in this folder** - a [CloudBees Folders Plus](https://docs.cloudbees.com/docs/cloudbees-core/latest/cloud-secure-guide/folders-plus) feature - and then select **VueJS** and then hit the **Save** button. <p><img src="../../images/restricted-items-check.png" width=800/>
   
## Create vue.js Job from Pipeline Template Catalog
In this lab you will create a new Multibranch Pipeline job from the **VueJS** template provided by the Pipeline Template Catalog you added above - just by filling in a few parameters.

1. On your Team Master navigate into the **template-jobs** folder that you created in the previous lab.
2. Click on the ***New VueJS*** link in the left menu. <p><img src="../../images/template_link.png" width=800/>
3. **Enter an item name** as ***[GitHub username]-frontend***, select **VueJS**  and click the **OK** button. <p><img src="../../images/item_form.png" width=800/>
4. Fill out the template parameters:
   1. **Repository Owner**: the GitHub Organization your created for the CloudBees CI workshop
   2. **Repository**: The name of your forked repository, *microblog-frontend*
   3. **GitHub Credential ID**: select the *username/password* credential created for you by the **workshop-setup** job and CloudBees CI CasC - it will show up as - [GitHub username]/******
   4. Click the **Save** button<p><img src="../../images/template_parameters.png" width=800/>
5. After the initial scan you will see one Jenkins Pipeline job funder the **Pull Requests** tab of the Pipeline Mulitbranch project that was just created for your fork of the **microblog-frontend** repository - **PR-1**. <p><img src="../../images/one_job.png" width=800/>
6. Now, in **GitHub**, navigate to the **Add marker file** pull request (#1) in your fork of the **microblog-frontend** repository. <p><img src="../../images/pr-navigate.png" width=800/>
7. Click on the pull request, scroll down to the pull request checks and you will see the stage level status of the Pipeline. Here you see that the **VueJS Tests** `stage` has started. <p><img src="../../images/pr-stage-status-pending.png" width=800/>
8. Once the Pipeline finishes you will see that all the checks failed on the pull request in GitHub. Clicking on the **Details** link of the **ci/cloudbees/error** check will take you directly to the build logs with the error in your Team Master. <p><img src="../../images/pr-stage-status-failed.png" width=800/>
9. The logs show us that a test in `tests/unit/Posts.spec.js` failed - a typo where the word **function** was mis-typed as **funcion**. <p><img src="../../images/pr-failed-test-log.png" width=800/>
10. In GitHub, navigate back to the **Add marker file** pull request for your forked **microblog-frontend** repository, click on the **Files changed** tab and then click on the context menu for the `tests/unit/Posts.spec.js` file and select **Edit file**. <p><img src="../../images/pr-file-context-edit.png" width=800/>
11. In the GitHub editor for the `tests/unit/Posts.spec.js` file fix the typo changing **funcion** to **function**, and then click the **Commit changes** button to commit the changes to the **marker-file** branch of your forked **microblog-frontend** repository. <p><img src="../../images/pr-edit-fix-typo.png" width=800/>
12. Finally, on the pull request page for your **Add marker file** pull request click on the **Conversation** tab and scroll down to the pull request checks. After the **PR-1** pipeline job completes you will see that all the checks are now successful, scroll to the bottom and click the green **Merge pull request** button and then the **Confirm merge** button to merge the pull request to your **master** branch.<p><img src="../../images/pr-checks-success.png" width=800/>


**For instructor led workshops please returns to the [workshop slides](https://cloudbees-ci-aws-workshop.github.io/core-rollout-flow-workshop/core/#30).**

Otherwise, you may proceed to the next lab: [*CloudBees Pipeline Policies*](../01_labs/4_pipeline_policies.html) or choose another lab on the [Main Lab Page](../01_labs.html).