🌚

Hey Folks!

How to Deploy a Vue.js 3 Application on Microsoft Azure Static Web Apps

Hey! If you are here, I guess that you want to deploy a Vue 3 app to Azure. Also, if you have no experience with Vue.js, then I recommend you check out this course Introduction to Vue 3 by Sarah Drasner.

Vue.js is a front-end web application Javascript framework used to build beautiful web user interfaces. In this article, we are going to deploy a Vue.js 3 application to Microsoft Azure Static Web Apps.

Prerequisites

Step 1

Install the Vue CLI.

npm install -g @vue/cli

Step 2

Generate a Vue.js Hello World Template.

  • Type in the command below into your CLI

    vue create hello-world
  • You will see the output below
    Vue Image

  • Select Default (Vue 3 Preview) ([Vue 3] babel, eslint)

  • After selection, you will see the following output below
    Vue Image

  • Select Use NPM

  • It’s done. Kindly, wait while the template generates.

Step 3

Test your Vue 3 app on your browser.

  • Enter the hello-world directory

    cd hello-world
  • Run the following command to start your app

    npm run serve
    
    OR
    
    vue serve
  • Open the link generated in your browser
    A Vuejs app running on chrome

Step 4

Install the Microsoft Azure CLI.

  • For Linux (Ubuntu and Debian):

    curl -sL https://aka.ms/InstallAzureCLIDeb | sudo bash
  • For macOS:

    brew update && brew install azure-cli
  • For Windows (Run as Administator):

Invoke-WebRequest -Uri https://aka.ms/installazurecliwindows -OutFile .\AzureCLI.msi; Start-Process msiexec.exe -Wait -ArgumentList '/I AzureCLI.msi /quiet'; rm .\AzureCLI.msi

Step 5

Connect your Azure CLI to your Azure Account.

  • Type in this command to connect your account

    az login
  • The command above will open your browser automatically, asking you to authenticate your Azure account.

  • You will see the image below when authenticated
    An image of an authenticated azure account

Step 6

Create a Public repository to push your Vue 3 code to GitHub.

  • Copy and paste this command below
echo "# vue-azure" >> README.md
git init
git add README.md
git commit -m "first commit"
git branch -M main
git remote add origin https://github.com/nerdeveloper/vue-azure.git # add your repo URL here
git push -u origin main
  • The image below shows that structure git push Vue 3 app on Github
    The Github image showing Vue js code

Step 7

Create a resource group on Azure.

  • Run this command to create a group in West US.

    az group create -l westus -n vue-azure-app 
    • You will see the output below
      {
        "id": "/subscriptions/786180ec-7ebe-4ada-8cd4-4201fd5a426c/resourceGroups/vue-azure-app",
        "location": "westus",
        "managedBy": null,
        "name": "vue-azure-app",
        "properties": {
          "provisioningState": "Succeeded"
        },
        "tags": null,
        "type": "Microsoft.Resources/resourceGroups"
      }

Step 8

Now deploy your Vue app to Azure!

  • Run the following the following command below

    az staticwebapp create \
        -n my-vue-azure-app \
        -g vue-azure-app \
        -s https://github.com/nerdeveloper/vue-azure \
        -l westus2 \
        -b main \
        --app-artifact-location "dist" \
        --token [ENTER YOUR GITHUB TOKEN HERE]

    Learn how to create a GitHub Token if you don’t have one.

    • You will see this output below

       {
        "branch": "main",
        "buildProperties": null,
        "customDomains": [],
        "defaultHostname": "orange-stone-00953e51e.azurestaticapps.net",
        "id": "/subscriptions/786180ec-7ebe-4ada-8cd4-4201fd5a426c/resourceGroups/vue-azure-app/providers/Microsoft.Web/staticSites/my-vue-azure-app",
        "kind": null,
        "location": "West US 2",
        "name": "my-vue-azure-app",
        "repositoryToken": null,
        "repositoryUrl": "https://github.com/nerdeveloper/vue-azure",
        "resourceGroup": "vue-azure-app",
        "sku": {
          "capabilities": null,
          "capacity": null,
          "family": null,
          "locations": null,
          "name": "Free",
          "size": null,
          "skuCapacity": null,
          "tier": "Free"
        },
        "tags": null,
        "type": "Microsoft.Web/staticSites"
      }
  • It takes about five(5) minutes to deploy. In the output, you will see “defaultHostname”: “orange-stone-00953e51e.azurestaticapps.net”

NB: your defaultHostname will be different from this.

Step 9

Open the orange-stone-00953e51e.azurestaticapps.net in your browser.
Vue JS app running Azure

Hooray! You have successfully deployed a Vue 3 app to Azure. It was somewhat effortless when you have the right tools.

Conclusion

There are a lot of static web frameworks you can deploy to Azure, like Angular, React, and many more. Vue.js is a compelling framework and superfast on the client-side. I’d always bet on Azure Infrastructure, and it’s simplicity. Give Microsoft Azure a Try today!

— Oct 26, 2021