Implement a static Vue app and deploy it on Azure using CI/CD. Part 1, Continuous Integration

While I have some extra free time because of the Corona virus outbreak, I decided to experiment with Vue and build a small static HTML Hello-World application for getting to know the framework better. The website contains no backend code.

The article focuses on how to automate the Build and Deploy process of our small application. I will try to clarify the steps needed till our static website is visible through an Azure URL.

In this article I will skip the Vue logic of my app and focus solely on the DevOps tasks that have to be made in Azure DevOps. Our static website will then be deployed on an Azure Storage Container. The article focuses on Windows users.

We will build our demo app with the help of Vue-CLI tooling.

A new folder hello-world is created inside your project folder and all the npm dependencies of our app our installed in the node_modules folder. The .gitignore file already contains an ignore for this folder. The folder is already a local Git Repository.

The correct .yml configuration looks like this:

- master
    vmImage: 'windows-latest'
  - task: Npm@1
    displayName: 'npm install'
      command: 'install'
      workingDir: $(System.DefaultWorkingDirectory)

  - task: Npm@1
    displayName: 'npm run build'
      command: 'custom'
      workingDir: $(System.DefaultWorkingDirectory)
      customCommand: run build

  - task: CopyFiles@2
      SourceFolder: '$(System.DefaultWorkingDirectory)/dist'
      Contents: '**'
      TargetFolder: '$(Build.ArtifactStagingDirectory)'

  - task: PublishBuildArtifacts@1
      PathtoPublish: '$(Build.ArtifactStagingDirectory)'
      ArtifactName: 'drop'
      publishLocation: 'Container'
comments powered by Disqus