How to Build the AI for Beginners Quiz Application for Production

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, 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 component and mounts the application to the DOM.

Routing Configuration

The router defined in src/router/index.js uses history mode to map URLs to components: the home route (/) renders Home.vue, individual quizzes load at /quiz/:id via 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 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:

cd etc/quiz-app
npm install

Then execute the production build:

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:

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 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 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 to export them. Update the i18n configuration in 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.

{
  "mcpServers": {
    "instagit": {
      "command": "npx",
      "args": ["-y", "instagit@latest"]
    }
  }
}