Web-Dev-For-Beginners/quiz-app

Quiz app

These quizzes are the pre- and post-lecture quizzes for the data science curriculum at https://aka.ms/webdev-beginners

Run the Quiz App locally

Prerequisites

• A GitHub account
• Node.js and Git

Install & Setup

1. Create a repository from this template

2. Clone your new repository, and navigate to the quiz-app

   git clone https://github.com/your-github-organization/repo-name
   cd repo-name/quiz-app
   

3. Install the npm packages & dependencies

   npm install
   

Build the app

1. To build the solution, run:

   npm run build
   

Start the App

1. To run the solution, run:

   npm run dev
   

[Optional] Linting

1. To ensure the code is linted, run:

   npm run lint
   

Deploy the Quiz-app to Azure

Prerequisites

• An Azure Subscription. Cost Estimate: FREE

Once you are signed in on Azure through the link above, select a subscription and resource group then:

• Static Web App details: Provide a name and select a hosting plan
• GitHub Login: Set your deployment source as GitHub then log in and fill in the required fields on the form:
  • Organization – Choose your organization.
  • Repository – Select the Web Dev for Beginners curriculum repository.
  • Branch - Select a branch (main)
• Build Presets - Azure Static Web Apps uses a detection algorithm to detect the framework used in your application.
  • App location - ./quiz-app
  • Api location -
  • Output location - dist
• Deployment: Click 'Review + Create', then 'Create'
• Post-Deployment: After deployment is complete, click on 'Go to Deployment' then 'View app in browser'.

Example Workflow File

Here’s an example of what the GitHub Actions workflow file might look like: 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" # App source code path
          api_location: ""API source code path optional
          output_location: "dist" #Built app content directory - optional

Once your GitHub Action is executed successfully, refresh the live page to view your application.