Quiz App

README.md

@@ -79,7 +79,7 @@ In addition, a low-stakes quiz before a class sets the intention of the student
 - Assignment
 - Post-lesson quiz
 
-> **A note about quizzes**: All quizzes are contained [in this app](https://purple-hill-04aebfb03.1.azurestaticapps.net/), for 40 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, for 40 total quizzes of three questions each. They are linked from within the lessons, but 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
 

quiz-app/README.md

@@ -44,3 +44,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: "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)