# Lab5 - Pipeline

So far we have learned how to plan a project and collaborate with others on a software development project. We also worked with version control systems such as `git` to keep track of the files. in the previous Lab we explored Docker and deployed our team portfolio project on a cloud provider.

{% hint style="info" %}
A pipeline is a set of automated processes that allow developers and DevOps professionals to reliably and efficiently compile, build, and deploy their code to their production compute platforms.
{% endhint %}

&#x20;

## Create your first CI Pipeline

Let's log in to <https://dev.azure.com/> and then head over to “Pipelines” where you can create your CI and CD pipelines.

<figure><img src="https://1117245002-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FAlkbozUljrP3jqwa7by9%2Fuploads%2FCfjV7qFUzSK0bFQ8lKAc%2Fimage.png?alt=media&#x26;token=89b67a49-419a-4ec0-9ada-7727719a5e6d" alt=""><figcaption></figcaption></figure>

Click on “Create Pipeline” and then use the classic editor to create a pipeline without YAML. Select your repository. In this case, it is Azure Repos Git and then the branch “main”.

&#x20;

<figure><img src="https://1117245002-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FAlkbozUljrP3jqwa7by9%2Fuploads%2Fz6FiIaOH6CtRGW0iTNNu%2Fimage.png?alt=media&#x26;token=16e8bfed-7488-4c6b-9da7-9de50d21f60c" alt="" width="375"><figcaption></figcaption></figure>

<figure><img src="https://1117245002-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FAlkbozUljrP3jqwa7by9%2Fuploads%2Fin572dMEmalUXt5nxyCy%2Fimage.png?alt=media&#x26;token=6d34141e-d095-4a46-b149-d05dc76caca3" alt="" width="336"><figcaption></figcaption></figure>

In the next step, we can choose a template or create an Empty pipeline and then add our jobs to it. Here choose to start with an “empty job”.

&#x20;

<figure><img src="https://1117245002-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FAlkbozUljrP3jqwa7by9%2Fuploads%2FwViEsMvJ7cA33bWZW0Pq%2Fimage.png?alt=media&#x26;token=2a3c09cf-5363-475c-874c-c786481b9952" alt=""><figcaption></figcaption></figure>

&#x20;

Create Agent job 1 and let’s add two npm tasks and publish artifacts task.

&#x20;

<figure><img src="https://1117245002-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FAlkbozUljrP3jqwa7by9%2Fuploads%2FPzM5KoAlLs5kmKOlkBHH%2Fimage.png?alt=media&#x26;token=13d71b44-62cb-4cec-8da9-aff36f4618dc" alt=""><figcaption></figcaption></figure>

We need to change `npm` install step according to the install command we use in the package.json. If you don’t remember it you can go back to the files in the repository and get the command from there.

<figure><img src="https://1117245002-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FAlkbozUljrP3jqwa7by9%2Fuploads%2FF7QkDULAeSBA0GWal0Ng%2Fimage.png?alt=media&#x26;token=563c2512-4228-4a33-9f53-a24585148a9a" alt=""><figcaption></figcaption></figure>

For the second step let’s rename the task npm run build under command choose from the dropdown “custom” and for the “command and argument” enter “run build”.

&#x20;

<figure><img src="https://1117245002-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FAlkbozUljrP3jqwa7by9%2Fuploads%2Fyz5g3vGqRZUNRAu0w56G%2Fimage.png?alt=media&#x26;token=bd3f86ea-5c71-4c3e-821f-f1a438a814a6" alt=""><figcaption></figcaption></figure>

Since we use the Gatsby framework in this project we need to copy files from the public directory after building the project.

&#x20;

{% hint style="warning" %}
NOTE: In normal react projects, files will be stored in the *build* directory, and you don’t need to add this step.
{% endhint %}

<figure><img src="https://1117245002-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FAlkbozUljrP3jqwa7by9%2Fuploads%2FakVX3OLUNx98Jr5E4jrZ%2Fimage.png?alt=media&#x26;token=e208982e-690b-4093-9e36-a261466f56a5" alt=""><figcaption></figcaption></figure>

The final step is to publish the build artifacts: Click on the plus sign look for “publish build artifacts” and set the “path to publish” to *build*, so that our release pipeline we will have access to the generated build.

&#x20;

<figure><img src="https://1117245002-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FAlkbozUljrP3jqwa7by9%2Fuploads%2Fzov6PCTz22RsqLw0D421%2Fimage.png?alt=media&#x26;token=e5165f61-30b2-4357-944c-94fe2d347ff3" alt=""><figcaption></figcaption></figure>

Head over to the Triggers tab and select Enable Continuous Integration. You can leave everything else at default.

&#x20;

<figure><img src="https://1117245002-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FAlkbozUljrP3jqwa7by9%2Fuploads%2F9lH4LtFa2LX68R2SM2e3%2Fimage.png?alt=media&#x26;token=b8f94181-999b-4b74-a503-28d768545783" alt=""><figcaption></figcaption></figure>

At the top select Pipeline and change the agent specification to ubuntu-last

&#x20;

<figure><img src="https://1117245002-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FAlkbozUljrP3jqwa7by9%2Fuploads%2FEgWTUXbUOejpYe6LnYJd%2Fimage.png?alt=media&#x26;token=9ae0ad84-99d3-4812-b6b3-a76701bd9616" alt=""><figcaption></figcaption></figure>

Finally, click Save & Queue and again hit Save & Queue.

&#x20;

On the Run pipeline modal, leave everything at default and hit Save and run.

<figure><img src="https://1117245002-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FAlkbozUljrP3jqwa7by9%2Fuploads%2FxLN3enjIYCiukHJGR4nO%2Fimage.png?alt=media&#x26;token=3075dc16-39e5-4988-8386-ae9061fb9a3b" alt="" width="272"><figcaption></figcaption></figure>

After a few minutes, the pipeline will finish running successfully. You can check under the Pipelines tab to verify it.

<figure><img src="https://1117245002-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FAlkbozUljrP3jqwa7by9%2Fuploads%2F7tVfZ4rUt0Wd6JHx2z96%2Fimage.png?alt=media&#x26;token=2738fe65-15af-4668-80b7-ff32c612d931" alt=""><figcaption></figcaption></figure>

&#x20;

## Test the CI Pipeline

The only thing you need to do is change something in the code and commit to your master branch. But if you remember this is not how we do the changes!

First, you need to create a work item. For example, add the dockerfile to the project (if you have not done that otherwise do some random change in the read me file). Then create a branch for that and commit your changes in that branch. Finally, you can merge it to your master branch after getting approval from the reviewer!

<figure><img src="https://1117245002-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FAlkbozUljrP3jqwa7by9%2Fuploads%2FXJ9K3pqDaVA2yb0np9Rg%2Fimage.png?alt=media&#x26;token=c9809a07-990f-4c52-8ca6-c6d6f0b9085b" alt=""><figcaption></figcaption></figure>

{% hint style="warning" %}
NOTE: Do not add *package-lock.json* to your project. If you added this accidentally, go to the repository and remove it manually otherwise you will get some errors at `npm` build step.
{% endhint %}

<figure><img src="https://1117245002-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FAlkbozUljrP3jqwa7by9%2Fuploads%2F2XiRPnM9DlWGlay8gdas%2Fimage.png?alt=media&#x26;token=416a8e23-57bc-4f97-9d76-4549558c9cc1" alt=""><figcaption></figcaption></figure>

&#x20;

<figure><img src="https://1117245002-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FAlkbozUljrP3jqwa7by9%2Fuploads%2FVpd0gmwz9aPUmByztHKS%2Fimage.png?alt=media&#x26;token=7590ddc2-7078-4171-ae39-3709df3351a0" alt=""><figcaption></figcaption></figure>

Before doing the `git push -u origin` You will need to do `git pull`

<figure><img src="https://1117245002-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FAlkbozUljrP3jqwa7by9%2Fuploads%2FjlR8IKPY5dMhRf5UpLzF%2Fimage.png?alt=media&#x26;token=93092849-8cb2-4326-aa48-78a1a6665373" alt=""><figcaption></figcaption></figure>

Now you can go back to the Pipeline and see what is happening! Yes the CI pipeline is triggered itself and going into the steps one by one!

If you click on the link you can see the generated artifacts.

<figure><img src="https://1117245002-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FAlkbozUljrP3jqwa7by9%2Fuploads%2FGDpvlWomEYmJsAOJGEts%2Fimage.png?alt=media&#x26;token=d6356b69-4bfd-44b3-af10-563d53fd63f8" alt=""><figcaption></figcaption></figure>

&#x20;

<figure><img src="https://1117245002-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FAlkbozUljrP3jqwa7by9%2Fuploads%2FONbpZk0hsR268sfVjQOV%2Fimage.png?alt=media&#x26;token=8149b054-0ec0-43de-a4d4-dfda7884c12c" alt=""><figcaption></figcaption></figure>

&#x20;
