Quiz Update

microsoft · Aug 27, 2024 · 21599e2 · 21599e2
1 parent 1cb0b2c
commit 21599e2
Show file tree

Hide file tree

Showing 2 changed files with 83 additions and 0 deletions.
diff --git a/README.md b/README.md
@@ -99,6 +99,10 @@ Don't forget to star (🌟) this repo to find it easier later.
 
 Join our [official AI Discord server](https://aka.ms/genai-discord?WT.mc_id=academic-105485-bethanycheum) to meet and network with other learners taking this course and get support.
 
+## Quizzes 
+
+> **A note about quizzes**: All quizzes are contained in the Quiz-app folder in etc\quiz-app, They are linked from within the lessons the quiz app can be run locally or deployed to Azure; follow the instruction in the `quiz-app` folder. They are gradually being localized.
+
 ## Help Wanted
 
 Do you have suggestions or found spelling or code errors? Raise an issue or create a pull request.

diff --git a/etc/quiz-app/README.md b/etc/quiz-app/README.md
@@ -43,3 +43,82 @@ npm run lint
 See [Configuration Reference](https://cli.vuejs.org/config/).
 
 Credits: Thanks to the original version of this quiz app: https://github.com/arpan45/simple-quiz-vue
+
+## Deploying to Azure
+
+Here’s a step-by-step guide to help you get started:
+
+1. Fork the a GitHub Repository
+Ensure your static web app code is in your GitHub repository. Fork this repository.
+
+2. Create an Azure Static Web App
+- Create and [Azure account](http://azure.microsoft.com)
+- Go to the [Azure portal](https://portal.azure.com) 
+- Click on “Create a resource” and search for “Static Web App”.
+- Click “Create”.
+
+3. Configure the Static Web App
+- Basics: Subscription: Select your Azure subscription.
+- Resource Group: Create a new resource group or use an existing one.
+- Name: Provide a name for your static web app.
+- Region: Choose the region closest to your users.
+
+- #### Deployment Details:
+- Source: Select “GitHub”.
+- GitHub Account: Authorize Azure to access your GitHub account.
+- Organization: Select your GitHub organization.
+- Repository: Choose the repository containing your static web app.
+- Branch: Select the branch you want to deploy from.
+
+- #### Build Details:
+- Build Presets: Choose the framework your app is built with (e.g., React, Angular, Vue, etc.).
+- App Location: Specify the folder containing your app code (e.g., / if it’s in the root).
+- API Location: If you have an API, specify its location (optional).
+- Output Location: Specify the folder where the build output is generated (e.g., build or dist).
+
+4. Review and Create
+Review your settings and click “Create”. Azure will set up the necessary resources and create a GitHub Actions workflow in your repository.
+
+5. GitHub Actions Workflow
+Azure will automatically create a GitHub Actions workflow file in your repository (.github/workflows/azure-static-web-apps-<name>.yml). This workflow will handle the build and deployment process.
+
+6. Monitor the Deployment
+Go to the “Actions” tab in your GitHub repository.
+You should see a workflow running. This workflow will build and deploy your static web app to Azure.
+Once the workflow completes, your app will be live on the provided Azure URL.
+
+### 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: "etc/quiz-app # App source code path"
+          api_location: ""API source code path optional
+          output_location: "dist" #Built app content directory - optional
+```
+
+### Additional Resources
+- [Azure Static Web Apps Documentation](https://learn.microsoft.com/azure/static-web-apps/getting-started)
+- [GitHub Actions Documentation](https://docs.github.com/actions/use-cases-and-examples/deploying/deploying-to-azure-static-web-app)