# How to Build the AI for Beginners Quiz Application for Production

> Deploy the AI for Beginners quiz app to production by running npm run build in etc/quiz-app and hosting the dist folder on Azure Static Web Apps. Get your app live quickly.

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

---

**To build the AI for Beginners quiz application for production, run `npm run build` in the `etc/quiz-app` directory to generate optimized static files in `dist/`, then deploy the `dist/` folder to any static host such as Azure Static Web Apps.**

The AI for Beginners quiz application is a lightweight Vue 2 single-page application (SPA) that powers the interactive assessments throughout Microsoft's open-source AI curriculum. Located in the `etc/quiz-app` directory of the `microsoft/AI-For-Beginners` repository, this application requires a standard Node.js build process to generate production-ready static assets.

## Understanding the Application Architecture

Before building, it helps to understand how the quiz app is structured. The application follows a modular Vue 2 architecture with client-side routing and multilingual support.

### Core Framework and Entry Point

The root Vue instance is initialized in [`src/main.js`](https://github.com/microsoft/AI-For-Beginners/blob/main/src/main.js), which configures the Vue 2 framework along with `vue-router` for navigation and `vue-i18n` for internationalization. This entry point imports the main [`App.vue`](https://github.com/microsoft/AI-For-Beginners/blob/main/App.vue) component and mounts the application to the DOM.

### Routing Configuration

The router defined in [`src/router/index.js`](https://github.com/microsoft/AI-For-Beginners/blob/main/src/router/index.js) uses history mode to map URLs to components: the home route (`/`) renders [`Home.vue`](https://github.com/microsoft/AI-For-Beginners/blob/main/Home.vue), individual quizzes load at `/quiz/:id` via [`Quiz.vue`](https://github.com/microsoft/AI-For-Beginners/blob/main/Quiz.vue), and a catch-all route handles 404 errors.

### Content and Internationalization

Quiz content is stored as JSON files under `src/assets/translations/<language>/lesson-<n>.json`. Each language folder contains an [`index.js`](https://github.com/microsoft/AI-For-Beginners/blob/main/index.js) that aggregates lesson files, allowing `vue-i18n` to load localized quiz data dynamically based on the user's selection.

## Building the Application for Production

The build process leverages `@vue/cli-service` to transpile, minify, and bundle the application into static assets.

First, install dependencies from the project root:

```bash
cd etc/quiz-app
npm install

```

Then execute the production build:

```bash
npm run build

```

This command invokes `vue-cli-service build`, which performs several optimizations: transpiling Vue single-file components into vanilla JavaScript, minifying CSS and JS for smaller bundle sizes, generating source maps for debugging, and emitting the final artifacts to the `dist/` directory.

## Deploying to Azure Static Web Apps

While the `dist/` folder can be served by any static host, the recommended production target is Azure Static Web Apps, which provides automated CI/CD through GitHub Actions.

To configure automated deployments:

1. Create a Static Web App resource in the Azure portal.
2. Link your GitHub repository and select the Vue build preset.
3. Set the **App Location** to `etc/quiz-app` and **Output Location** to `dist`.

Azure automatically generates a GitHub Actions workflow file (`.github/workflows/azure-static-web-apps-*.yml`) that triggers on every push to `main`. The workflow installs dependencies, builds the application, and deploys the optimized assets to a globally distributed CDN.

Here is the typical workflow configuration:

```yaml
name: Azure Static Web Apps CI/CD
on:
  push:
    branches: [ main ]
jobs:
  build_and_deploy:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v2
      - name: Build And Deploy
        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: "etc/quiz-app"
          output_location: "dist"

```

## Alternative Hosting Options

The static output in `dist/` is compatible with any static hosting service. You can deploy the folder to GitHub Pages, Netlify, or Vercel by configuring the build command as `npm run build` and the publish directory as `dist`. Ensure your hosting provider supports client-side routing for Single Page Applications, or configure rewrite rules to serve [`index.html`](https://github.com/microsoft/AI-For-Beginners/blob/main/index.html) for all routes.

## Summary

- The AI for Beginners quiz app is a Vue 2 SPA located in `etc/quiz-app` that uses `vue-router` and `vue-i18n` for navigation and translations.
- Run `npm install` and `npm run build` to generate optimized production files in the `dist/` directory.
- The build process transpiles components, minifies assets, and prepares the app for static hosting.
- Azure Static Web Apps is the recommended deployment target, offering automated CI/CD via GitHub Actions.
- Configure the Azure workflow with `app_location: "etc/quiz-app"` and `output_location: "dist"` for seamless deployments.

## Frequently Asked Questions

### What Node.js version is required to build the quiz application?

The application uses `@vue/cli-service` which typically requires Node.js 14.x or higher. Check the `engines` field in [`package.json`](https://github.com/microsoft/AI-For-Beginners/blob/main/package.json) for specific version constraints. Ensure your environment matches these requirements before running `npm install`.

### Can I customize the quiz questions without rebuilding the entire application?

Yes. Since quiz content resides in JSON files under `src/assets/translations/`, you can modify the lesson files directly. However, because these assets are bundled at build time, you must run `npm run build` again to regenerate the `dist/` folder with your updated content for production deployment.

### How do I add a new language to the quiz application?

Create a new folder under `src/assets/translations/` using the language code (e.g., `es` for Spanish). Add translated `lesson-<n>.json` files and an [`index.js`](https://github.com/microsoft/AI-For-Beginners/blob/main/index.js) to export them. Update the i18n configuration in [`src/main.js`](https://github.com/microsoft/AI-For-Beginners/blob/main/src/main.js) to include the new locale, then rebuild the application.

### Does the application support server-side rendering (SSR)?

No. The quiz application is designed as a client-side rendered SPA. It relies on Vue 2's standard build output where the browser downloads static HTML, CSS, and JavaScript files. For SEO-critical deployments, consider prerendering solutions or ensure your hosting provider supports proper meta tag injection for SPAs.