From 2eea3b5cdd5729e39a97af136db3540abc6aeda9 Mon Sep 17 00:00:00 2001
From: Lee Stott <leestott@microsoft.com>
Date: Tue, 27 Aug 2024 16:37:59 +0100
Subject: [PATCH] Update re Quiz App

---
 README.md          |  2 +-
 quiz-app/README.md | 80 ++++++++++++++++++++++++++++++++++++++++++++++
 2 files changed, 81 insertions(+), 1 deletion(-)

diff --git a/README.md b/README.md
index da69aff9..29e1a8d0 100644
--- a/README.md
+++ b/README.md
@@ -92,7 +92,7 @@ Our recommendation is to use [Visual Studio Code](https://code.visualstudio.com/
 - assignment
 - post-lesson quiz
 
-> **A note about quizzes**: All quizzes are contained [in this app](https://ashy-river-0debb7803.1.azurestaticapps.net/), for 48 total quizzes of three questions each. They are linked from within the lessons but the quiz app can be run locally; follow the instruction in the `quiz-app` folder. They are gradually being localized.
+> **A note about quizzes**: All quizzes are contained in the Quiz-app folder, 48 total quizzes of three questions each. 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.
 
 ## 🗃️ Lessons
 
diff --git a/quiz-app/README.md b/quiz-app/README.md
index aa0d8c4c..3f0bce8b 100644
--- a/quiz-app/README.md
+++ b/quiz-app/README.md
@@ -31,3 +31,83 @@ 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: "/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)
+