Setting Up an Azure Build Pipeline for Your Vue.js Web App

by

The following should give you all of the information and steps needed to create a fully working pipeline that installs dependencies, builds your app, lints your code and publishes the articles for deployment

Let’s dive right in!

Step 1: Create a new build pipeline in Azure DevOps

First things first, head over to your Azure DevOps project and click on “Pipelines” in the left sidebar. Next, click on “Create Pipeline” to start setting up a new build pipeline. Choose your repository source (e.g., Azure Repos Git, GitHub, Bitbucket, etc.), and then select “Existing Azure Pipelines YAML file.” Configure the YAML file path as azure-pipelines.yml. Don’t worry if you don’t have this file yet – we’ll create it in the next step.

Step 2: Create the azure-pipelines.yml file

In your project’s root folder, create a new file called azure-pipelines.yml and paste in the following content:

trigger:
  branches:
    include:
      - main # Change this to your main branch name
      - develop # Change this to your development branch name

pool:
  vmImage: 'ubuntu-latest'

variables:
  node_version: '14.x'

steps:
  - task: NodeTool@0
    inputs:
      versionSpec: $(node_version)
    displayName: 'Install Node.js'

  - script: npm ci
    displayName: 'Install dependencies'

  - script: npm run build
    displayName: 'Build the project'

  - script: npm run lint
    displayName: 'Lint and fix files'

  - task: PublishBuildArtifacts@1
    inputs:
      pathtoPublish: 'dist'
      artifactName: 'dist'
    displayName: 'Publish build artifacts'

This YAML file sets up a build pipeline with the following steps:

  1. Install Node.js: Your Vue.js project relies on Node.js and npm to manage dependencies and run build tasks. We’ll use the NodeTool task to install Node.js on the build agent.
  2. Install dependencies: Next, we’ll install your project’s dependencies using npm ci. This command ensures a consistent environment by installing the exact versions listed in your package-lock.json. Plus, it’s faster than npm install in CI environments!
  3. Build the project: Now it’s time to build your Vue.js app! We’ll use the npm run build command, which calls vue-cli-service build under the hood. This compiles, minifies, and optimizes your application, generating the final assets in the dist folder.
  4. Lint and fix files: To keep your code clean and maintainable, we’ll run a linting step using npm run lint. This command checks your source code for potential issues and automatically fixes them when possible.
  5. Publish build artifacts: Finally, we’ll publish the contents of the dist folder as build artifacts. These artifacts can be used later for deployment or other purposes.

Step 3: Commit and push the azure-pipelines.yml file

Commit and push the azure-pipelines.yml file to your repository. Your build pipeline will now be triggered automatically whenever you push changes to your main or develop branches (change these to match your preferred branch names).

Bonus: Running tests (optional)

If your project has a test suite, you can add a step to run the tests using the appropriate command, like `npm test