Build And Deploy App using Yaml pipeline

Step 1: Start New Pipeline: Create pipeline

Note: Instead of using classic editor first pipeline choose azure repos git

Step 1(a): Select your repository.

Step 2. Configure your Pipeline: Configure your pipeline with the template uh on the bottom of the page there are two options starter pipeline or existing Azure pipeline Yaml file Choose Starter pipeline Okay click.

Step 3: Over there and it will generate a basic pipeline structure for you such as

trigger tool steps and script now let's see how we can add further steps to it

Structure of a YAML PIPELINE

• A trigger tells a Pipeline to run. It could be CI or Scheduled, manual(if not specified), or after another build finishes.

• A pipeline is made up of one or more stages. A pipeline can deploy to one or more environments.

• A stage organizes jobs in a pipeline, and each stage can have one or more jobs.

• Each job runs on one agent, such as Ubuntu, Windows, macOS, etc. A job can also be agentless.

• Each agent runs a job that contains one or more steps.

• A step can be a task or script and is the smallest building block of a pipeline.

• A task is a pre-packaged script that performs an action, such as invoking a REST API or publishing a build artifact.

• An artifact is a collection of files or packages published by a run.

Yaml Code

Note: Go to vs code and select the language yaml we wrote a basic structure of pipeline in VS code.

we have built stage and we have deploy stage and we have built and deploy jobs inside that we need to add steps to run npm built , npm install publish artifact and deploy artifact copy this and go back to pipeline

So at the pool level Steps and then colon press enter Then hyphen (-) okay now keep your cursor over here okay keep your cursor over here and now we have to add the nbm build step.

step (1): So what will do is we go to the right where it says show assistance click over there and now it will show you some steps that were prebuilt for you and you just have to enter details and it will populate some values for you so let's see how it works.

Step(2): Search for npm Okay select the step and use the command install working folder let's keep it default because we would because our package.json is in the same folder and rest everything is default and click over add.

Step(3): Now once you do that you see there is a task generated for you an npm task so you copy that or cut that and you paste it over here inside the steps and intend it properly Tab that was the first task

Step(3): The next task is npm build so you can do the same inside the same step copy it enter paste and now this time the command should be run build so the build is completed now the next one should be hit enter okay and now again select the task can select the task as publish artifact publish build artifact over here okay now the directory path to publish was build artifact name was drop this default hit add once you do that there'll be a task created for you for publish build artifacts as well and with all the details populated now it's been published now the next step is deploy so again keep your cursor over here add the pool level and then add steps enter and then again search for for a task this time it should be web app