Skip to content

Commit 8da2a08

Browse files
leestottleestott
authored
Quiz App
1 parent 0d75f30 commit 8da2a08

File tree

2 files changed

+80
-1
lines changed

2 files changed

+80
-1
lines changed

‎README.md

+1-1
Original file line numberDiff line numberDiff line change
@@ -79,7 +79,7 @@ In addition, a low-stakes quiz before a class sets the intention of the student
7979
- Assignment
8080
- Post-lesson quiz
8181

82-
> **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.
82+
> **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.
8383
8484
## Lessons
8585

‎quiz-app/README.md

+79
Original file line numberDiff line numberDiff line change
@@ -44,3 +44,82 @@ npm run lint
4444
See [Configuration Reference](https://cli.vuejs.org/config/).
4545

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

0 commit comments

Comments
 (0)