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

> 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.

- Repository: [Microsoft/Web-Dev-For-Beginners](https://github.com/microsoft/Web-Dev-For-Beginners)
- Tags: how-to-guide
- Published: 2026-02-27

---

**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`](https://github.com/microsoft/Web-Dev-For-Beginners/blob/main/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`](https://github.com/microsoft/Web-Dev-For-Beginners/blob/main/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:

```yaml
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:

```bash
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:

```bash
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`](https://github.com/microsoft/Web-Dev-For-Beginners/blob/main/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`](https://github.com/microsoft/Web-Dev-For-Beginners/blob/main/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`](https://github.com/microsoft/Web-Dev-For-Beginners/blob/main/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`](https://github.com/microsoft/Web-Dev-For-Beginners/blob/main/.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`](https://github.com/microsoft/Web-Dev-For-Beginners/blob/main/.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`](https://github.com/microsoft/Web-Dev-For-Beginners/blob/main/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`](https://github.com/microsoft/Web-Dev-For-Beginners/blob/main/.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`](https://github.com/microsoft/Web-Dev-For-Beginners/blob/main/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.