🗞️Lab5 - Pipeline

Let's rewrite our development process using a 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.

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.

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.

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”.

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”.

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

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.

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”.

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

NOTE: In normal react projects, files will be stored in the build directory, and you don’t need to add this step.

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.

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

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

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

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

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

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!

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.

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

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.