Skip to content

Commit b77b113

Browse files
authored
Merge pull request #51155 from v-thpra/azure-triage-fix-1058613
Technical Review 1058613: Publish an API to Azure Static Web Apps
2 parents d43b132 + c59f98b commit b77b113

15 files changed

+237
-238
lines changed
Lines changed: 15 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,15 @@
1-
### YamlMime:ModuleUnit
2-
uid: learn.azure.publish-static-web-app-api-preview-url.1-introduction
3-
metadata:
4-
title: Introduction
5-
description: Publish an Azure Static Web App
6-
ms.date: 12/12/2023
7-
author: v1212
8-
ms.author: wujia
9-
ms.topic: unit
10-
zone_pivot_groups: dev-javascript-framework
11-
title: Introduction
12-
durationInMinutes: 2
13-
content: |
14-
[!include[](includes/1-introduction.md)]
15-
1+
### YamlMime:ModuleUnit
2+
uid: learn.azure.publish-static-web-app-api-preview-url.1-introduction
3+
metadata:
4+
title: Introduction
5+
description: Publish an Azure Static Web App
6+
ms.date: 06/27/2025
7+
author: v1212
8+
ms.author: wujia
9+
ms.topic: unit
10+
zone_pivot_groups: dev-javascript-framework
11+
title: Introduction
12+
durationInMinutes: 2
13+
content: |
14+
[!include[](includes/1-introduction.md)]
15+
Lines changed: 17 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,17 @@
1-
### YamlMime:ModuleUnit
2-
uid: learn.azure.publish-static-web-app-api-preview-url.2-exercise-get-started
3-
metadata:
4-
title: Exercise - Get started
5-
description: Get started by running and deploying a static web app
6-
ms.date: 12/12/2023
7-
author: v1212
8-
ms.author: wujia
9-
ms.topic: unit
10-
ms.custom: vscode-azure-extension-update-completed
11-
zone_pivot_groups: dev-javascript-framework
12-
azureSandbox: true
13-
title: Exercise - Get started
14-
durationInMinutes: 7
15-
content: |
16-
[!include[](includes/2-exercise-get-started.md)]
17-
1+
### YamlMime:ModuleUnit
2+
uid: learn.azure.publish-static-web-app-api-preview-url.2-exercise-get-started
3+
metadata:
4+
title: Exercise - Get started
5+
description: Get started by running and deploying a static web app.
6+
ms.date: 06/27/2025
7+
author: v1212
8+
ms.author: wujia
9+
ms.topic: unit
10+
ms.custom: vscode-azure-extension-update-completed
11+
zone_pivot_groups: dev-javascript-framework
12+
azureSandbox: true
13+
title: Exercise - Get started
14+
durationInMinutes: 7
15+
content: |
16+
[!include[](includes/2-exercise-get-started.md)]
17+
Lines changed: 14 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,14 @@
1-
### YamlMime:ModuleUnit
2-
uid: learn.azure.publish-static-web-app-api-preview-url.3-build-api
3-
metadata:
4-
title: Build an API with Azure Functions
5-
description: Learn how to build an API for your static web app with Azure Functions
6-
ms.date: 12/12/2023
7-
author: v1212
8-
ms.author: wujia
9-
ms.topic: unit
10-
title: Build an API with Azure Functions
11-
durationInMinutes: 3
12-
content: |
13-
[!include[](includes/3-build-api.md)]
14-
1+
### YamlMime:ModuleUnit
2+
uid: learn.azure.publish-static-web-app-api-preview-url.3-build-api
3+
metadata:
4+
title: Build an API with Azure Functions
5+
description: Learn how to build an API for your static web app with Azure Functions.
6+
ms.date: 06/27/2025
7+
author: v1212
8+
ms.author: wujia
9+
ms.topic: unit
10+
title: Build an API with Azure Functions
11+
durationInMinutes: 3
12+
content: |
13+
[!include[](includes/3-build-api.md)]
14+
Lines changed: 15 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,15 @@
1-
### YamlMime:ModuleUnit
2-
uid: learn.azure.publish-static-web-app-api-preview-url.4-exercise-function-app
3-
metadata:
4-
title: Exercise - Create an Azure Functions project
5-
description: Use the Azure Functions tools to build an API for a static site
6-
ms.date: 12/12/2023
7-
author: v1212
8-
ms.author: wujia
9-
ms.topic: unit
10-
zone_pivot_groups: dev-javascript-framework
11-
title: Exercise - Create an Azure Functions project
12-
durationInMinutes: 6
13-
content: |
14-
[!include[](includes/4-exercise-function-app.md)]
15-
1+
### YamlMime:ModuleUnit
2+
uid: learn.azure.publish-static-web-app-api-preview-url.4-exercise-function-app
3+
metadata:
4+
title: Exercise - Create an Azure Functions project
5+
description: Use the Azure Functions tools to build an API for a static site.
6+
ms.date: 06/27/2025
7+
author: v1212
8+
ms.author: wujia
9+
ms.topic: unit
10+
zone_pivot_groups: dev-javascript-framework
11+
title: Exercise - Create an Azure Functions project
12+
durationInMinutes: 6
13+
content: |
14+
[!include[](includes/4-exercise-function-app.md)]
15+
Lines changed: 15 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,15 @@
1-
### YamlMime:ModuleUnit
2-
uid: learn.azure.publish-static-web-app-api-preview-url.5-action
3-
metadata:
4-
title: Publish the API with GitHub Actions
5-
description: Learn how to include your API when you publish a static site with a GitHub Action
6-
ms.date: 12/12/2023
7-
author: v1212
8-
ms.author: wujia
9-
ms.topic: unit
10-
zone_pivot_groups: dev-javascript-framework
11-
title: Publish the API with GitHub Actions
12-
durationInMinutes: 3
13-
content: |
14-
[!include[](includes/5-action.md)]
15-
1+
### YamlMime:ModuleUnit
2+
uid: learn.azure.publish-static-web-app-api-preview-url.5-action
3+
metadata:
4+
title: Publish the API with GitHub Actions
5+
description: Learn how to include your API when you publish a static site with a GitHub Action.
6+
ms.date: 06/27/2025
7+
author: v1212
8+
ms.author: wujia
9+
ms.topic: unit
10+
zone_pivot_groups: dev-javascript-framework
11+
title: Publish the API with GitHub Actions
12+
durationInMinutes: 3
13+
content: |
14+
[!include[](includes/5-action.md)]
15+
Lines changed: 15 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,15 @@
1-
### YamlMime:ModuleUnit
2-
uid: learn.azure.publish-static-web-app-api-preview-url.6-exercise-action
3-
metadata:
4-
title: Exercise - Publish the API with GitHub Actions
5-
description: Use a GitHub Action to automatically publish your updated static site and API
6-
ms.date: 12/12/2023
7-
author: v1212
8-
ms.author: wujia
9-
ms.topic: unit
10-
zone_pivot_groups: dev-javascript-framework
11-
title: Exercise - Publish the API with GitHub Actions
12-
durationInMinutes: 4
13-
content: |
14-
[!include[](includes/6-exercise-action.md)]
15-
1+
### YamlMime:ModuleUnit
2+
uid: learn.azure.publish-static-web-app-api-preview-url.6-exercise-action
3+
metadata:
4+
title: Exercise - Publish the API with GitHub Actions
5+
description: Use a GitHub Action to automatically publish your updated static site and API.
6+
ms.date: 06/27/2025
7+
author: v1212
8+
ms.author: wujia
9+
ms.topic: unit
10+
zone_pivot_groups: dev-javascript-framework
11+
title: Exercise - Publish the API with GitHub Actions
12+
durationInMinutes: 4
13+
content: |
14+
[!include[](includes/6-exercise-action.md)]
15+
Lines changed: 59 additions & 60 deletions
Original file line numberDiff line numberDiff line change
@@ -1,60 +1,59 @@
1-
### YamlMime:ModuleUnit
2-
uid: learn.azure.publish-static-web-app-api-preview-url.7-knowledge-check
3-
title: Module assessment
4-
metadata:
5-
title: Module assessment
6-
description: Knowledge check
7-
ms.date: 12/12/2023
8-
author: v1212
9-
ms.author: wujia
10-
ms.topic: unit
11-
module_assessment: true
12-
durationInMinutes: 1
13-
content: |
14-
[!include[](includes/7-knowledge-check.md)]
15-
quiz:
16-
title: Check your knowledge
17-
questions:
18-
- content: "How do you customize the route endpoint for a function in an Azure Functions project?"
19-
choices:
20-
- content: "Rename *index.js* file to the name of the endpoint you desire."
21-
isCorrect: false
22-
explanation: "Incorrect. The name of the API endpoint isn't related to the filename of the function."
23-
- content: "Inside the function's *function.json* file, add a `route` property and set it to your desired endpoint path name."
24-
isCorrect: true
25-
explanation: "Correct. The route endpoint has the same name as the folder that contains the function, by convention. You can customize the path to the endpoint using the `route` property in the *function.json* file"
26-
- content: "Endpoint paths can't be customized."
27-
isCorrect: false
28-
explanation: "The route endpoint has the same name as the folder that contains the function, by convention. However, they can be customized in the *function.json* file."
29-
- content: "Name the function's symbol in the code to your desired name."
30-
isCorrect: false
31-
explanation: "Incorrect. The name of the API endpoint isn't related to the name of any variable in the code."
32-
- content: "How do you deploy changes to your web app without affecting your production web site?"
33-
choices:
34-
- content: "Go to the production URL of your app."
35-
isCorrect: false
36-
explanation: "Incorrect. The production URL of your Azure Static Web Apps instance displays your web app, not your build progress."
37-
- content: "Go to your resource in the Azure portal and view the configuration."
38-
isCorrect: false
39-
explanation: "Incorrect. The configuration for your resource in the Azure portal allows you to view or modify the configuration of the resource. It doesn't show the progress of your build and redeployment of your web app."
40-
- content: "Push your commits to your watched branched of your git repository."
41-
isCorrect: false
42-
explanation: "Incorrect. Pushing your commits doesn't show your progress, but it triggers a GitHub Actions workflow."
43-
- content: "Create a preview URL by creating a pull request against the branch that your GitHub Action is watching."
44-
isCorrect: true
45-
explanation: "Correct. Sometimes you want to see your changes in a staging site before publishing to the live web site. Azure Static Web Apps lets you see preview your changes through preview URLs. "
46-
- content: "How do you tell Azure Static Web Apps that you changed where your API is located?"
47-
choices:
48-
- content: "In the package.json file."
49-
isCorrect: false
50-
explanation: "Incorrect. The configuration for your app's locations are defined in the GitHub Actions workflow file."
51-
- content: "Add an entry in *staticwebapp.config.json* for the location."
52-
isCorrect: false
53-
explanation: "Incorrect. The *staticwebapp.config.json* file is where you define routing rules, not the location of your API."
54-
- content: "Azure Static Web Apps automatically knows where your code and API are located, without any configuration."
55-
isCorrect: false
56-
explanation: "Incorrect. You can configure the location of your code, artifacts, and API in the GitHub Actions workflow file. If you don't specify these locations, default values are used."
57-
- content: "In the GitHub Actions workflow file, located in your *.github/workflows* folder."
58-
isCorrect: true
59-
explanation: "Correct. You can configure the locations for your app code, app artifact, and API in the GitHub Actions workflow file. This file is located in your *.github/workflows* folder."
60-
1+
### YamlMime:ModuleUnit
2+
uid: learn.azure.publish-static-web-app-api-preview-url.7-knowledge-check
3+
title: Module assessment
4+
metadata:
5+
title: Module assessment
6+
description: Knowledge check
7+
ms.date: 06/27/2025
8+
author: v1212
9+
ms.author: wujia
10+
ms.topic: unit
11+
durationInMinutes: 1
12+
content: |
13+
[!include[](includes/7-knowledge-check.md)]
14+
quiz:
15+
title: Check your knowledge
16+
questions:
17+
- content: "How do you customize the route endpoint for a function in an Azure Functions project?"
18+
choices:
19+
- content: "Rename *index.js* file to the name of the endpoint you desire."
20+
isCorrect: false
21+
explanation: "Incorrect. The name of the API endpoint isn't related to the filename of the function."
22+
- content: "Inside the function's *function.json* file, add a `route` property and set it to your desired endpoint path name."
23+
isCorrect: true
24+
explanation: "Correct. The route endpoint has the same name as the folder that contains the function, by convention. You can customize the path to the endpoint using the `route` property in the *function.json* file"
25+
- content: "Endpoint paths can't be customized."
26+
isCorrect: false
27+
explanation: "The route endpoint has the same name as the folder that contains the function, by convention. However, they can be customized in the *function.json* file."
28+
- content: "Name the function's symbol in the code to your desired name."
29+
isCorrect: false
30+
explanation: "Incorrect. The name of the API endpoint isn't related to the name of any variable in the code."
31+
- content: "How do you deploy changes to your web app without affecting your production web site?"
32+
choices:
33+
- content: "Go to the production URL of your app."
34+
isCorrect: false
35+
explanation: "Incorrect. The production URL of your Azure Static Web Apps instance displays your web app, not your build progress."
36+
- content: "Go to your resource in the Azure portal and view the configuration."
37+
isCorrect: false
38+
explanation: "Incorrect. The configuration for your resource in the Azure portal allows you to view or modify the configuration of the resource. It doesn't show the progress of your build and redeployment of your web app."
39+
- content: "Push your commits to your watched branched of your git repository."
40+
isCorrect: false
41+
explanation: "Incorrect. Pushing your commits doesn't show your progress, but it triggers a GitHub Actions workflow."
42+
- content: "Create a preview URL by creating a pull request against the branch that your GitHub Action is watching."
43+
isCorrect: true
44+
explanation: "Correct. Sometimes you want to see your changes in a staging site before publishing to the live web site. Azure Static Web Apps lets you see preview your changes through preview URLs. "
45+
- content: "How do you tell Azure Static Web Apps that you changed where your API is located?"
46+
choices:
47+
- content: "In the package.json file."
48+
isCorrect: false
49+
explanation: "Incorrect. The locations of your apps are defined and configured in the GitHub Actions workflow file."
50+
- content: "Add an entry in *staticwebapp.config.json* for the location."
51+
isCorrect: false
52+
explanation: "Incorrect. The *staticwebapp.config.json* file is where you define routing rules, not the location of your API."
53+
- content: "Azure Static Web Apps automatically knows where your code and API are located, without any configuration."
54+
isCorrect: false
55+
explanation: "Incorrect. You can configure the location of your code, artifacts, and API in the GitHub Actions workflow file. If you don't specify these locations, default values are used."
56+
- content: "In the GitHub Actions workflow file, located in your *.github/workflows* folder."
57+
isCorrect: true
58+
explanation: "Correct. You can configure the locations for your app code, app artifact, and API in the GitHub Actions workflow file. This file is located in your *.github/workflows* folder."
59+
Lines changed: 14 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,14 @@
1-
### YamlMime:ModuleUnit
2-
uid: learn.azure.publish-static-web-app-api-preview-url.8-summary
3-
metadata:
4-
title: Summary
5-
description: Summary
6-
ms.date: 12/12/2023
7-
author: v1212
8-
ms.author: wujia
9-
ms.topic: unit
10-
title: Summary
11-
durationInMinutes: 1
12-
content: |
13-
[!include[](includes/8-summary.md)]
14-
1+
### YamlMime:ModuleUnit
2+
uid: learn.azure.publish-static-web-app-api-preview-url.8-summary
3+
metadata:
4+
title: Summary
5+
description: Summary
6+
ms.date: 06/27/2025
7+
author: v1212
8+
ms.author: wujia
9+
ms.topic: unit
10+
title: Summary
11+
durationInMinutes: 1
12+
content: |
13+
[!include[](includes/8-summary.md)]
14+

learn-pr/azure/publish-static-web-app-api-preview-url/includes/2-exercise-get-started.md

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -6,13 +6,13 @@ This module uses resources made available to you via the sandbox, which provides
66

77
To begin, create a repository by using a GitHub template. A series of repository templates are available, which contain a starter app implemented in various front end frameworks.
88

9-
1. Go to the GitHub [create from template page](https://github.com/login?return_to=/MicrosoftDocs/mslearn-staticwebapp-api/generate?azure-portal=true) to open the template repository.
9+
1. Go to the GitHub [create from template page](https://github.com/login?return_to=/MicrosoftDocs/mslearn-staticwebapp-api/generate?azure-portal=true).
1010

11-
1. If prompted for _Owner_, select one of your GitHub accounts.
11+
1. If prompted for *Owner*, select one of your GitHub accounts.
1212

13-
1. For _repository name_, enter **my-static-web-app-and-api**.
13+
1. For *Repository name*, enter **my-static-web-app-and-api**.
1414

15-
1. Select **Create repository from template**.
15+
1. Select **Create repository**.
1616

1717
As you create the project from a template, GitHub builds your repository in the background.
1818

@@ -29,11 +29,11 @@ Now you have a GitHub repository named **my-static-web-app-and-api** in your Git
2929
Make sure to replace `<YOUR_GITHUB_USERNAME>` with your GitHub username.
3030

3131
```bash
32-
git clone https://github.com/<YOUR_GITHUB_USERNAME>/my-static-web-app-and-api
32+
git clone https://github.com/<YOUR_GITHUB_USERNAME>/my-static-web-app-and-api.git
3333
```
3434

3535
> [!NOTE]
36-
> If you have trouble copying into the command prompt terminal, right-click the icon in the title bar, and in the **Properties** tab, ensure that **Use Ctrl+Shift+C/V as Copy/Paste** is checked.
36+
> If you have trouble copying into the command prompt terminal, right-click the icon in the title bar, and in the **Properties** tab, ensure **Use Ctrl+Shift+C/V as Copy/Paste** is checked.
3737
3838
1. Change to the directory for the source code you cloned.
3939

@@ -291,7 +291,7 @@ Current Azure and GitHub authenticated sessions are required to create a static
291291
::: zone-end
292292

293293
> [!NOTE]
294-
> This repository differs from other projects you may have used in the past. This project contains four different apps in four different folders. Each folder contains an app created in a different JavaScript framework. Typically, you'd have only one app in the root of your repository and thus the default `/` for the app path location. This is a great example of how Azure Static Web Apps lets you configure locations in the first place - you have full control over how the app is built.
294+
> This repository differs from other projects you might be used to. This project contains four different apps in four different folders. Each folder contains an app created in a different JavaScript framework. Typically, you'd have only one app in the root of your repository and thus the default `/` for the app path location. This structure is a great example of how Azure Static Web Apps lets you configure locations in the first place - you have full control over how the app is built.
295295
296296
3. Once the app is created, a confirmation notification is shown in Visual Studio Code.
297297

@@ -316,7 +316,7 @@ Current Azure and GitHub authenticated sessions are required to create a static
316316
Congratulations! Your app is deployed to Azure Static Web Apps!
317317

318318
> [!NOTE]
319-
> Don't worry if you see a web page that states the app hasn't been built and deployed yet. Try refreshing the browser in a minute. The GitHub Action service runs automatically when the Azure Static Web App is created. So if you see the splash page, the app is still being deployed.
319+
> Don't worry if you see a web page that states the app isn't built and deployed yet. Try refreshing the browser in a minute. The GitHub Action service runs automatically when the Azure Static Web App is created. So if you see the splash page, the app is still being deployed.
320320
321321
### Pull the changes from GitHub
322322

0 commit comments

Comments
 (0)