Azure Static Web Apps with Vue.js and Visual Studio Code

#azure #vue #visualstudiocode #staticwebapps

Hey everyone, in today's post we are talking about how deploy an Vue.js Application to Azure Static Web App using Visual Studio Code.

To understand what is Azure Static Web App, visit Azure Static Web Apps - The Big Picture

Prerequisites

NPM
Vue CLI
Visual Studio Code
Azure Static Web App extension for Visual Studio Code
Git

Implementation

Once you have all the prerequisites installed, let's create the project itself. For that, let's use the command line and run the command below to create a Vue.js project.

vue create <vue-project-name>

After creating the project, let's open it in Visual Studio Code. You can open the project using the interface or by typing the command below in your command line tool.

code .

Important: Always access the project root before opening in Visual Studio Code or you can open VS Code first and then open the project root. Always avoid opening in the folder before the project as this can lead to errors in the build and consequently in the pipeline.

The next step is the deployment, so Press F1 and search for Azure Static Web App: Create Static Web Apps and select.

In the next step, we need to select the Azure Subscription, but if you are not logged into your Azure account with Visual Studio Code, an option to make the connection will be displayed.

In the next option, we need to define the name to be given to the service in Azure.

Now, we need to define a name for the GitHub Repository

The next step is to define the region where the resource will be created.

Now it's time to define the project type. Note that Azure Static Web Apps supports multiple frameworks and since our project is a Vue.js project, we should select the Vue option.

Here we need to set the path to the root of the Vue project. By doing this, the executor responsible for deploying the code will be able to run the npm run build command to generate the outputs in the dist directory. Let's set / to this option.

In the last step, we need to define the application build output path and for Vue.js projects we need to inform the dist folder.

Finally, press enter to start creating the resource on Azure and creating the repository on GitHub.

Once the run is complete, we have an instance of Azure Static Web Apps provisioned in Azure and ready to use, and the repository on GitHub with our code. At the end, the code deployment pipeline will be executed automatically by GitHub Actions.