From b6381de2e3776af70e3310093b4cdb6cf11bd116 Mon Sep 17 00:00:00 2001 From: Lee Stott Date: Wed, 28 Aug 2024 15:49:54 +0100 Subject: [PATCH] Update --- README.md | 2 +- quiz-app/README.md | 79 ++++++++++++++++++++++++++++++++++++++++++++++ 2 files changed, 80 insertions(+), 1 deletion(-) diff --git a/README.md b/README.md index 2a49e844..afa77912 100644 --- a/README.md +++ b/README.md @@ -86,7 +86,7 @@ By ensuring that the content aligns with projects, the process is made more enga > **A note about languages**: These lessons are primarily written in Python, but many are also available in R. To complete an R lesson, go to the `/solution` folder and look for R lessons. They include an .rmd extension that represents an **R Markdown** file which can be simply defined as an embedding of `code chunks` (of R or other languages) and a `YAML header` (that guides how to format outputs such as PDF) in a `Markdown document`. As such, it serves as an exemplary authoring framework for data science since it allows you to combine your code, its output, and your thoughts by allowing you to write them down in Markdown. Moreover, R Markdown documents can be rendered to output formats such as PDF, HTML, or Word. -> **A note about quizzes**: All quizzes are contained [in this app](https://gray-sand-07a10f403.1.azurestaticapps.net/), for 52 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. +> **A note about quizzes**: All quizzes are contained [Quiz App folder](./quiz-app/), for 52 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 to locally host or deploy to Azure. | Lesson Number | Topic | Lesson Grouping | Learning Objectives | Linked Lesson | Author | | :-----------: | :------------------------------------------------------------: | :-------------------------------------------------: | ------------------------------------------------------------------------------------------------------------------------------- | :--------------------------------------------------------------------------------------------------------------------------------------: | :--------------------------------------------------: | diff --git a/quiz-app/README.md b/quiz-app/README.md index 83b30d1d..9ecfe9cf 100644 --- a/quiz-app/README.md +++ b/quiz-app/README.md @@ -31,3 +31,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-.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)