How to Deploy the Quiz-App to Azure Static Web Apps: A Complete Guide

Question

Learn to deploy the quiz-app to Azure Static Web Apps using the portal wizard and GitHub Actions for automated CI/CD. Build your Vue 3 project easily.

Accepted Answer

Deploy the quiz-app to Azure Static Web Apps by configuring the Azure portal wizard to build the Vue 3 project from the quiz-app directory and serve the generated dist folder via automated GitHub Actions CI/CD.

The quiz-app in the microsoft/Web-Dev-For-Beginners repository is a client-side Vue 3 application designed for static hosting. Azure Static Web Apps (ASWA) provides a fully managed platform that automatically detects the framework, builds the production assets, and creates a GitHub Actions workflow for continuous deployment.

Prerequisites for Azure Static Web Apps Deployment

Before you begin, ensure you have the following resources configured:

An active Azure subscription (the free tier is sufficient for static hosting)
A GitHub account with write access to the microsoft/Web-Dev-For-Beginners repository or your fork
The quiz-app source code located in the quiz-app folder at the repository root

Step-by-Step Deployment Guide

Configure the Azure Portal Wizard

Start the deployment process by clicking the Deploy to Azure button in the quiz-app/README.md file. This button opens the Azure portal with the Static Web Apps creation wizard pre-populated.

In the wizard, configure the following settings:

Subscription and Resource Group: Select your target subscription and either create or select a resource group
Name: Provide a globally unique name for your static web app (this becomes part of the default URL)
Deployment Source: Select GitHub and authorize Azure to access your repositories
Organization, Repository, and Branch: Select your GitHub organization, the Web-Dev-For-Beginners repository, and the main branch

Set Build Configuration Paths

The build configuration tells Azure where to find the application source and where to find the generated static files. In the Build Details section of the wizard, enter:

App location: ./quiz-app (the folder containing the Vue 3 application)
Api location: Leave blank (the quiz-app does not require an Azure Functions backend)
Output location: dist (the folder where Vite places the production build, as configured in quiz-app/vite.config.js)

These values are stored in the generated GitHub Actions workflow and used during the build process.

Verify GitHub Actions Workflow Creation

After clicking Review + create and Create, Azure provisions the Static Web App resource and automatically generates a GitHub Actions workflow file. This file appears in your repository at .github/workflows/azure-static-web-apps-<unique-suffix>.yml.

The workflow triggers on every push to the main branch and on pull request events. It uses the Azure/static-web-apps-deploy@v1 action to build and deploy the application.

Understanding the CI/CD Pipeline

The generated GitHub Actions workflow automates the build and deployment process. The workflow file contains the following key configuration:

name: Azure Static Web Apps CI/CD

on:
  push:
    branches:
      - main
  pull_request:
    types: [opened, synchronize, reopened, closed]
    branches:
      - main

jobs:
  build_and_deploy_job:
    runs-on: ubuntu-latest
    name: Build and Deploy Job
    steps:
      - uses: actions/checkout@v2
      - name: Build And Deploy
        id: builddeploy
        uses: Azure/static-web-apps-deploy@v1
        with:
          azure_static_web_apps_api_token: ${{ secrets.AZURE_STATIC_WEB_APPS_API_TOKEN }}
          repo_token: ${{ secrets.GITHUB_TOKEN }}
          action: "upload"
          app_location: "quiz-app"
          api_location: ""
          output_location: "dist"

When this workflow runs, it checks out the repository, installs dependencies using npm install, runs npm run build to generate the static assets in the dist folder, and uploads those assets to the Azure Static Web Apps service. The site is then served from a globally distributed CDN.

Local Development vs Production Build

Before deploying to Azure, you can verify the application locally. Navigate to the quiz-app directory and start the development server:

cd quiz-app
npm install
npm run dev

This command starts the Vite development server at http://localhost:5173. The dev server provides hot module replacement for rapid development, but it does not produce the optimized static files needed for production.

To simulate the production build that Azure will execute, run:

npm run build

This generates the dist folder containing minified, production-ready assets. Azure Static Web Apps runs this same command during the CI/CD process, then serves the contents of the dist folder.

Key Files and Configuration

The following files control the deployment behavior and build process:

quiz-app/README.md – Contains the primary deployment documentation and the "Deploy to Azure" button that launches the portal wizard. This file specifies the required build configuration paths.
quiz-app/package.json – Defines the npm scripts used by Azure during build, including npm run build which triggers Vite to generate the production assets.
quiz-app/vite.config.js – Configures the Vite build tool, specifying the dist folder as the output directory for static files.
.github/workflows/azure-static-web-apps.yml (auto-generated) – The GitHub Actions workflow that Azure creates in your repository to enable continuous deployment from the quiz-app directory.

Summary

The quiz-app is a Vue 3 project located in the quiz-app folder of the microsoft/Web-Dev-For-Beginners repository.
Azure Static Web Apps automatically detects the framework and builds the app using npm install && npm run build.
Configure the deployment with App location set to ./quiz-app and Output location set to dist.
Azure generates a GitHub Actions workflow at .github/workflows/azure-static-web-apps.yml that redeploys the site on every push to main.
The deployed site is served from a global CDN with no server management required.

Frequently Asked Questions

What is the correct output location for the quiz-app deployment?

The correct output location is dist. This value corresponds to the build output directory configured in quiz-app/vite.config.js. When Azure Static Web Apps runs npm run build, Vite places the production-ready static files in this folder, which Azure then uploads to the CDN.

Do I need an Azure Functions API for the quiz-app?

No, you do not need an Azure Functions API for this deployment. The quiz-app is a purely client-side Vue 3 application with no backend requirements. When configuring the Azure Static Web Apps wizard, you should leave the Api location field blank, as confirmed in the repository's deployment documentation.

How does the GitHub Actions workflow get created?

Azure automatically creates the GitHub Actions workflow when you provision the Static Web Apps resource through the Azure portal. After you authorize Azure to access your GitHub repository, the platform commits a workflow file to .github/workflows/azure-static-web-apps.yml (with a unique suffix). This workflow uses the Azure/static-web-apps-deploy@v1 action to build and deploy the application on every push to the main branch.

Can I deploy the quiz-app manually without using the Azure portal button?

Yes, you can deploy manually by creating the Azure Static Web Apps resource directly in the Azure portal and linking it to your GitHub repository. However, using the Deploy to Azure button in quiz-app/README.md is recommended because it pre-populates the wizard with the correct configuration values for the app location (./quiz-app) and output location (dist), reducing the chance of configuration errors.