Skip to content

Commit 2eea3b5

Browse files
authored
Update re Quiz App
1 parent 7133972 commit 2eea3b5

File tree

2 files changed

+81
-1
lines changed

2 files changed

+81
-1
lines changed

README.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -92,7 +92,7 @@ Our recommendation is to use [Visual Studio Code](https://code.visualstudio.com/
9292
- assignment
9393
- post-lesson quiz
9494

95-
> **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.
95+
> **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.
9696

9797
## 🗃️ Lessons
9898

quiz-app/README.md

Lines changed: 80 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -31,3 +31,83 @@ npm run lint
3131
See [Configuration Reference](https://cli.vuejs.org/config/).
3232

3333
Credits: Thanks to the original version of this quiz app: https://github.com/arpan45/simple-quiz-vue
34+
35+
## Deploying to Azure
36+
37+
Here’s a step-by-step guide to help you get started:
38+
39+
1. Fork the a GitHub Repository
40+
Ensure your static web app code is in your GitHub repository. Fork this repository.
41+
42+
2. Create an Azure Static Web App
43+
- Create and [Azure account](http://azure.microsoft.com)
44+
- Go to the [Azure portal](https://portal.azure.com)
45+
- Click on “Create a resource” and search for “Static Web App”.
46+
- Click “Create”.
47+
48+
3. Configure the Static Web App
49+
- Basics: Subscription: Select your Azure subscription.
50+
- Resource Group: Create a new resource group or use an existing one.
51+
- Name: Provide a name for your static web app.
52+
- Region: Choose the region closest to your users.
53+
54+
- #### Deployment Details:
55+
- Source: Select “GitHub”.
56+
- GitHub Account: Authorize Azure to access your GitHub account.
57+
- Organization: Select your GitHub organization.
58+
- Repository: Choose the repository containing your static web app.
59+
- Branch: Select the branch you want to deploy from.
60+
61+
- #### Build Details:
62+
- Build Presets: Choose the framework your app is built with (e.g., React, Angular, Vue, etc.).
63+
- App Location: Specify the folder containing your app code (e.g., / if it’s in the root).
64+
- API Location: If you have an API, specify its location (optional).
65+
- Output Location: Specify the folder where the build output is generated (e.g., build or dist).
66+
67+
4. Review and Create
68+
Review your settings and click “Create”. Azure will set up the necessary resources and create a GitHub Actions workflow in your repository.
69+
70+
5. GitHub Actions Workflow
71+
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.
72+
73+
6. Monitor the Deployment
74+
Go to the “Actions” tab in your GitHub repository.
75+
You should see a workflow running. This workflow will build and deploy your static web app to Azure.
76+
Once the workflow completes, your app will be live on the provided Azure URL.
77+
78+
### Example Workflow File
79+
80+
Here’s an example of what the GitHub Actions workflow file might look like:
81+
name: Azure Static Web Apps CI/CD
82+
```
83+
on:
84+
push:
85+
branches:
86+
- main
87+
pull_request:
88+
types: [opened, synchronize, reopened, closed]
89+
branches:
90+
- main
91+
92+
jobs:
93+
build_and_deploy_job:
94+
runs-on: ubuntu-latest
95+
name: Build and Deploy Job
96+
steps:
97+
- uses: actions/checkout@v2
98+
- name: Build And Deploy
99+
id: builddeploy
100+
uses: Azure/static-web-apps-deploy@v1
101+
with:
102+
azure_static_web_apps_api_token: ${{ secrets.AZURE_STATIC_WEB_APPS_API_TOKEN }}
103+
repo_token: ${{ secrets.GITHUB_TOKEN }}
104+
action: "upload"
105+
app_location: "/quiz-app # App source code path"
106+
api_location: ""API source code path optional
107+
output_location: "dist" #Built app content directory - optional
108+
```
109+
110+
### Additional Resources
111+
- [Azure Static Web Apps Documentation](https://learn.microsoft.com/azure/static-web-apps/getting-started)
112+
- [GitHub Actions Documentation](https://docs.github.com/actions/use-cases-and-examples/deploying/deploying-to-azure-static-web-app)
113+

0 commit comments

Comments
 (0)