> For the complete documentation index, see [llms.txt](https://devworkshops.gitbook.io/masteringvuejs/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://devworkshops.gitbook.io/masteringvuejs/packaging-and-deploying/overview.md).

# Continuous Integration

In the presentation, we've mentioned a lot CI and CD tools available, but for this demo we're going to use [Azure DevOps](https://azure.microsoft.com/en-au/services/devops/) formally known as **VSTS** or **Visual Studio Online**. It's an awesome tool not only for your CI and CD pipelines, but to keep track of your work, host your repositories and more.

They have a great UI for you to create your pipelines, but we're going use YAML because it's super simple to make change to it and to share with other people instead of relying on specific people with enough privileges to make changes.

To start with, we're going to create an **azure-pipelines.yml** file in the root of your repository and we're going to paste this script to it. In this example, our Vue.js app in under the northwind-traders folder, if your app is in the root or in a different directory, you'll have to update it or remove it

{% code title="azure-pipelines.yml" %}

```yaml
pool:
  name: Hosted VS2017
  demands: npm

steps:
- task: Npm@1
  displayName: 'npm install'
  inputs:
    workingDir: 'northwind-traders'
    verbose: false

- task: Npm@1
  displayName: 'unit test'
  inputs:
    command: custom
    workingDir: 'northwind-traders'
    verbose: false
    customCommand: 'run test:unit'

- task: Npm@1
  displayName: 'e2e test'
  inputs:
    command: custom
    workingDir: 'northwind-traders'
    verbose: false
    customCommand: 'run test:e2e:ci'

- task: Npm@1
  displayName: build
  inputs:
    command: custom
    workingDir: 'northwind-traders'
    verbose: false
    customCommand: 'run build'

- task: PublishBuildArtifacts@1
  displayName: 'Publish Artifact: drop'
  inputs:
    PathtoPublish: 'northwind-traders/dist'
```

{% endcode %}

Don't worry too much about the syntax of this file, it's not as complicated as it looks, basically what we want to do is running these tasks

* npm install
* npm run test:unit
* npm run test:e2e
* npm run build

And finally copy the outcome (the dist folder) to an artifact that can be used to deploy. If you want to know more about the YAML, check [this documentation](https://docs.microsoft.com/en-us/azure/devops/pipelines/yaml-schema?view=vsts\&tabs=schema#task) and if you want to know what other tasks are available on Azure DevOps, check [here](https://docs.microsoft.com/en-us/azure/devops/pipelines/tasks/index?view=vsts).

Time to go to the [Azure DevOps](https://azure.microsoft.com/en-au/services/devops/), if you don't have an account, we highly encourage you do it.

![](/files/-LWulYOCPvJWlIaL90bo)

![](/files/-LWulcZfy4t5X_R_VzoO)

![](/files/-LWulcZgYp_4ts-M5VMY)

![](/files/-LWulcZhioque8yRdfpY)

![](/files/-LWulcZeqAA7U1biKUNW)

If everything went well, you should see a screen similar to the below

![](/files/-LWum4pugPCHn0YkgnjI)


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter:

```
GET https://devworkshops.gitbook.io/masteringvuejs/packaging-and-deploying/overview.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.