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

> Learn to build the AI for Beginners quiz app for production. Deploy optimized static assets to Azure Static Web Apps or other hosting platforms with this guide.

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

---

**To build the AI for Beginners quiz app for production, install Node dependencies in the `etc/quiz-app` directory, execute `npm run build` to compile optimized static assets into the `dist` folder, and deploy the resulting files to Azure Static Web Apps or any static-file hosting platform.**

The AI for Beginners quiz app is a lightweight Vue 2 single-page application maintained by Microsoft in the `etc/quiz-app` folder of the AI-For-Beginners repository. Because the build process outputs pure static HTML, CSS, and JavaScript, you can host the production build on any CDN or static site service without requiring a backend server.

## Prerequisites and Project Structure

Before building, ensure you have Node.js and npm installed. The application resides entirely within `etc/quiz-app` and follows a standard Vue CLI project layout.

Key files in the source tree include:

- [`src/main.js`](https://github.com/microsoft/AI-For-Beginners/blob/main/src/main.js) – Bootstraps the Vue instance and installs the router and internationalization plugins.
- [`src/router/index.js`](https://github.com/microsoft/AI-For-Beginners/blob/main/src/router/index.js) – Defines routes for Home, Quiz, and 404 pages using Vue Router.
- [`src/components/Quiz.vue`](https://github.com/microsoft/AI-For-Beginners/blob/main/src/components/Quiz.vue) – Core component responsible for rendering quiz questions.
- `src/assets/translations/` – JSON files containing localized quiz content.
- [`package.json`](https://github.com/microsoft/AI-For-Beginners/blob/main/package.json) – Defines the build script and Vue dependencies (`vue@^2.6.11`, `vue-router@^3.4.9`, `vue-i18n@^8.28.2`).

## Local Build Process

To generate production-ready assets locally, navigate to the quiz app directory and run the Vue CLI build command.

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

```

The `build` script in [`package.json`](https://github.com/microsoft/AI-For-Beginners/blob/main/package.json) invokes `vue-cli-service build`, which transpiles ES6 code, bundles components, and minifies the output. This process creates a `dist` directory containing the optimized [`index.html`](https://github.com/microsoft/AI-For-Beginners/blob/main/index.html) entry point and hashed static assets ready for deployment.

## Production Deployment Options

Since the output consists of static files, you can deploy the `dist` folder to any service that hosts static content.

### Azure Static Web Apps (Recommended)

The official documentation recommends Azure Static Web Apps for automated CI/CD. When configuring the service:

1. Set the **App Location** to `etc/quiz-app`.
2. Set the **Output Location** to `dist`.
3. Skip the API location unless you are adding serverless functions.

Azure automatically generates a GitHub Actions workflow (`.github/workflows/azure-static-web-apps-*.yml`) that uses the `Azure/static-web-apps-deploy@v1` action. On every push to your main branch, the workflow builds the application and publishes the `dist` folder using the token stored in `AZURE_STATIC_WEB_APPS_API_TOKEN`.

```bash
git add -A
git commit -m "Release quiz app"
git push origin main

```

### Alternative Static Hosts

You can manually upload the `dist` directory to GitHub Pages, Netlify, or AWS S3. Because Vue Router uses history mode, ensure your host is configured to serve [`index.html`](https://github.com/microsoft/AI-For-Beginners/blob/main/index.html) for all routes, or the application will return 404 errors on direct navigation to quiz URLs.

## Architecture and Key Components

Understanding the stack helps when debugging build issues or extending functionality.

| Layer | Technology | Role |
|-------|------------|------|
| **UI Framework** | Vue 2 (`vue@^2.6.11`) | Renders reactive components and manages state. |
| **Routing** | Vue Router (`vue-router@^3.4.9`) | Handles client-side navigation defined in [`src/router/index.js`](https://github.com/microsoft/AI-For-Beginners/blob/main/src/router/index.js). |
| **Internationalization** | vue-i18n (`vue-i18n@^8.28.2`) | Loads translations from `src/assets/translations/` and switches locales dynamically. |
| **Build System** | Vue CLI (`@vue/cli-service`) | Compiles source code into the production `dist` bundle. |

The entry point at [`src/main.js`](https://github.com/microsoft/AI-For-Beginners/blob/main/src/main.js) mounts the root [`App.vue`](https://github.com/microsoft/AI-For-Beginners/blob/main/App.vue) component and initializes both the router and i18n plugin. Quiz data flows from JSON files (e.g., [`src/assets/translations/en/lesson-1.json`](https://github.com/microsoft/AI-For-Beginners/blob/main/src/assets/translations/en/lesson-1.json)) into the [`Quiz.vue`](https://github.com/microsoft/AI-For-Beginners/blob/main/Quiz.vue) component, which renders questions and handles user interaction.

## Customizing Content and Localization

To add a new language, create a folder under `src/assets/translations/` and import the JSON modules.

For example, adding French support requires creating [`src/assets/translations/fr/index.js`](https://github.com/microsoft/AI-For-Beginners/blob/main/src/assets/translations/fr/index.js):

```javascript
import lesson1 from './lesson-1.json'
import lesson2 from './lesson-2.json'

export default {
  lesson1,
  lesson2
}

```

Then update the language selector in [`src/App.vue`](https://github.com/microsoft/AI-For-Beginners/blob/main/src/App.vue) to include the new locale:

```html
<option value="fr">Français</option>

```

Users can navigate to localized quizzes programmatically via:

```javascript
this.$router.push({ path: '/quiz', query: { loc: 'fr' } })

```

## Summary

- The quiz app is a Vue 2 SPA located in `etc/quiz-app` that compiles to static files.
- Run `npm install` and `npm run build` to generate the production `dist` directory.
- Deploy the `dist` folder to Azure Static Web Apps by setting the app location to `etc/quiz-app` and output location to `dist`.
- The build relies on Vue CLI and outputs minified assets suitable for any static host.
- Content is data-driven via JSON files in `src/assets/translations/`, supporting easy localization through `vue-i18n`.

## Frequently Asked Questions

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

The project uses Vue CLI 4.x and Vue 2, which are compatible with Node.js 12.x or higher. However, using the Active LTS version (Node.js 18.x or 20.x) ensures compatibility with modern npm packages while maintaining support for the legacy Vue 2 build pipeline.

### Can I deploy the quiz app to GitHub Pages instead of Azure?

Yes. Because `npm run build` produces a static `dist` folder, you can deploy to GitHub Pages by pushing the contents of `dist` to a `gh-pages` branch or using the `peaceiris/actions-gh-pages` GitHub Action. Ensure you configure the `publicPath` in [`vue.config.js`](https://github.com/microsoft/AI-For-Beginners/blob/main/vue.config.js) if your repository is not at the root of your GitHub Pages domain.

### Where is the quiz question data stored?

All quiz content resides in JSON files under `src/assets/translations/`. Each language folder (e.g., `en/`, `fr/`) contains lesson-specific files like [`lesson-1.json`](https://github.com/microsoft/AI-For-Beginners/blob/main/lesson-1.json) that the [`Quiz.vue`](https://github.com/microsoft/AI-For-Beginners/blob/main/Quiz.vue) component loads based on the current route and locale query parameter.

### How do I update the quiz content without rebuilding the entire curriculum?

Edit the specific JSON files in `src/assets/translations/` and redeploy. Since the quiz app is statically generated, any content changes require a new build and deployment to update the hosted files. If you need dynamic content updates without redeployment, you would need to refactor [`Quiz.vue`](https://github.com/microsoft/AI-For-Beginners/blob/main/Quiz.vue) to fetch JSON from an external API at runtime.