In the previous article we focused on building the Continuous Integration Pipeline of our hello-world Vue app.

In Part 2 we are going to do the steps for deploying the result of the CI Pipeline to Azure. From there our static website is going to be visible to the rest of the world.

Here are the steps you will have to take:

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.

One common error during my first steps with Vue was the following, that is logged in the console of your browser:

*vue.js:634 [Vue warn]: Property or method “XXX” is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property. See: https://vuejs.org/v2/guide/reactivity.html#Declaring-Reactive-Properties.

(found in Root)*