# Running the Quiz App Locally vs Deploying to Azure Static Web Apps: Complete Guide

> Compare running the quiz app locally with Vue CLI and deploying to Azure Static Web Apps. Discover fast iteration versus global edge network deployment with GitHub Actions.

- Repository: [Microsoft/AI-For-Beginners](https://github.com/microsoft/AI-For-Beginners)
- Tags: how-to-guide
- Published: 2026-08-05

---

**Running the quiz app locally leverages Vue CLI's development server with hot-module replacement for rapid iteration, while deploying to Azure Static Web Apps compiles the Vue 2 application into a static `dist/` bundle served from a global edge network via automated GitHub Actions.**

The **AI-For-Beginners** repository by Microsoft includes an interactive quiz application located in `etc/quiz-app` that reinforces machine learning concepts through a Vue 2 single-page application. Understanding the architectural differences between running the quiz app locally versus deploying to Azure Static Web Apps ensures you select the appropriate workflow for development debugging or production hosting.

## Local Development with Vue CLI

When running locally, the application relies on the Vue CLI development server to compile and serve content dynamically from source files.

### Application Bootstrap and Plugins

In [`etc/quiz-app/src/main.js`](https://github.com/microsoft/AI-For-Beginners/blob/main/etc/quiz-app/src/main.js), the application initializes by creating a Vue instance, installing the Vue Router and Vue I18n plugins, and mounting to the DOM element `#app`:

```javascript
// src/main.js
import Vue from 'vue'
import App from './App.vue'
import router from './router'
import i18n from './i18n'

Vue.config.productionTip = false

new Vue({
  router,
  i18n,
  render: h => h(App)
}).$mount('#app')

```

The [`etc/quiz-app/package.json`](https://github.com/microsoft/AI-For-Beginners/blob/main/etc/quiz-app/package.json) file defines the project dependencies including Vue 2, Vue-Router, and Vue-I18n, alongside npm scripts that drive the local workflow with commands like `serve`, `build`, and `lint`.

### Development Server and Hot Reload

Executing `npm run serve` invokes the Vue CLI development server, which compiles source files into an in-memory bundle and serves the application at `http://localhost:8080`. This environment provides **hot-module replacement** for instant updates without manual refresh, source maps for debugging, and history mode routing support via the dev server's internal configuration.

### Client-Side Routing Configuration

The [`src/router/index.js`](https://github.com/microsoft/AI-For-Beginners/blob/main/src/router/index.js) file configures Vue Router in history mode, defining routes for the home page (`/`), individual quizzes (`/quiz/:id`), and a catch-all 404 handler:

```javascript
// src/router/index.js
export default new Router({
  mode: 'history',
  routes: [
    { path: '/', component: Home },
    { path: '/quiz/:id', component: Quiz },
    { path: '/:pathMatch(.*)*', component: NotFound }
  ]
});

```

## Deploying to Azure Static Web Apps

Deploying to Azure transforms the Vue application into static files served from a content delivery network, eliminating the need for a runtime Node.js server.

### Production Build Process

Azure executes `npm run build` during deployment, which triggers Vue CLI to generate optimized static assets in the `dist/` directory. According to the repository's [`README.md`](https://github.com/microsoft/AI-For-Beginners/blob/main/README.md), this build process produces pre-compiled HTML, JavaScript, and CSS files ready for static hosting, unlike the on-the-fly compilation used during local development.

### GitHub Actions Automation

The deployment leverages the `azure-static-web-apps-deploy@v1` GitHub Action. Azure automatically generates a workflow file (`.github/workflows/azure-static-web-apps-*.yml`) that triggers on repository pushes, specifying the **App Location** as `etc/quiz-app` and the **Output Location** as `dist`:

```yaml

# .github/workflows/azure-static-web-apps-<name>.yml

- 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 }}
    app_location: "etc/quiz-app"
    output_location: "dist"

```

### Static Hosting and SPA Routing

Unlike the local development server, Azure Static Web Apps serves pre-built files from a globally distributed edge network. Azure automatically handles client-side routing by rewriting unknown paths to [`index.html`](https://github.com/microsoft/AI-For-Beginners/blob/main/index.html), supporting the Vue Router history mode without requiring server-side runtime logic.

## Key Architectural Differences

Understanding the distinct behaviors between these environments helps optimize your development workflow:

- **Build Process**: Local development uses on-the-fly, in-memory compilation via `npm run serve`, while Azure performs a one-time static build using `npm run build` to generate the `dist/` folder.
- **Server Requirements**: The local environment requires Node.js and npm to run the Vue CLI development server, whereas Azure serves only static files with no runtime dependencies.
- **Routing Handling**: Vue-Router manages history mode locally through the dev server's internal rewrite rules; Azure automatically configures SPA fallback routing to serve [`index.html`](https://github.com/microsoft/AI-For-Beginners/blob/main/index.html) for unknown paths.
- **Development Features**: Hot reload and source maps are available locally but not applicable to the static production build deployed on Azure.

## Step-by-Step Implementation

To run the quiz application locally:

```bash

# Install dependencies (once)

cd etc/quiz-app
npm install

# Start development server with hot-reload

npm run serve

# Application available at http://localhost:8080

```

To prepare for Azure deployment:

```bash

# Generate production build locally to test output

npm run build

# Static assets output to ./dist directory

```

The Azure deployment requires no manual build commands locally; pushing code to GitHub triggers the automated workflow that builds and deploys the static assets.

## Summary

- The quiz app in `etc/quiz-app` is a Vue 2 SPA that supports both local development and static deployment workflows.
- **Local execution** (`npm run serve`) provides hot-module replacement and debugging tools via the Vue CLI development server at `localhost:8080`.
- **Azure deployment** generates a static `dist/` folder through `npm run build` and serves files via a global edge network using GitHub Actions automation.
- Azure automatically handles SPA routing by rewriting paths to [`index.html`](https://github.com/microsoft/AI-For-Beginners/blob/main/index.html), matching the behavior of the local Vue Router configuration.
- The [`src/main.js`](https://github.com/microsoft/AI-For-Beginners/blob/main/src/main.js) entry point and [`src/router/index.js`](https://github.com/microsoft/AI-For-Beginners/blob/main/src/router/index.js) routing logic remain identical between both environments, with the deployment target determining the build and serving methodology.

## Frequently Asked Questions

### How does hot reloading work when running the quiz app locally?

When you execute `npm run serve`, the Vue CLI development server watches the source files in `etc/quiz-app/src/` and automatically recompiles changed modules in memory, updating the browser instantly without losing application state. This hot-module replacement is exclusive to the local development environment and is not available in the static build deployed to Azure.

### What happens to Vue Router when deploying to Azure Static Web Apps?

Azure Static Web Apps automatically configures SPA fallback routing to support Vue Router's history mode. When a user navigates directly to a route like `/quiz/1`, Azure serves the [`index.html`](https://github.com/microsoft/AI-For-Beginners/blob/main/index.html) file from the `dist/` folder, allowing the client-side JavaScript in [`src/router/index.js`](https://github.com/microsoft/AI-For-Beginners/blob/main/src/router/index.js) to handle the routing logic without requiring server-side configuration.

### Where does Azure get the configuration for deploying the quiz app?

Azure generates a GitHub Actions workflow file at `.github/workflows/azure-static-web-apps-*.yml` when you connect the repository through the Azure portal. This configuration specifies `app_location: "etc/quiz-app"` to find the source code and `output_location: "dist"` to locate the build artifacts generated by `npm run build` during the deployment pipeline.

### Why is there no Node.js runtime required on Azure after deployment?

Azure Static Web Apps serves only the pre-compiled static files generated in the `dist/` directory during the build step. Unlike the local development server that requires Node.js to compile Vue components on-the-fly, the production deployment consists of plain HTML, CSS, and JavaScript files that require no server-side processing or runtime environment.