Skip to content

Commit 7056d43

Browse files
garycentricgarycentric
authored
Merge pull request #114327 from craigshoemaker/marmalade-content-updates
Content updates
2 parents 6fd43aa + ec83463 commit 7056d43

File tree

12 files changed

+198
-190
lines changed

12 files changed

+198
-190
lines changed

‎articles/static-web-apps/TOC.yml

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
href: index.yml
33
- name: Overview
44
items:
5-
- name: About Static Apps
5+
- name: About Static Web Apps
66
href: overview.md
77
- name: Quickstarts
88
expanded: true

‎articles/static-web-apps/add-api.md

Lines changed: 97 additions & 90 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,9 @@
11
---
22
title: Add an API to Azure Static Web Apps with Azure Functions
33
description: Get started with Azure Static Web Apps by adding a Serverless API to your static web app using Azure Functions.
4-
services: azure-functions
4+
services: static-web-apps
55
author: manekinekko
6-
ms.service: azure-functions
6+
ms.service: static-web-apps
77
ms.topic: how-to
88
ms.date: 05/08/2020
99
ms.author: wachegha
@@ -24,20 +24,20 @@ You can add serverless APIs to Azure Static Web Apps via integration with Azure
2424

2525
The following steps demonstrate how to create a new repository and clone the files to your computer.
2626

27-
1. Navigate to https://github.com/staticwebdev/vanilla-basic/generate to create a new repository
28-
1. In the _Repository name_ box, enter **my-vanilla-api**
29-
1. Click **Create repository from template**
27+
1. Navigate to https://github.com/staticwebdev/vanilla-basic/generate to create a new repository.
28+
1. In the _Repository name_ box, enter **my-vanilla-api**.
29+
1. Click **Create repository from template**.
3030

31-
:::image type="content" source="media/add-api/create-repository.png" alt-text="Create a new repository from vanilla-basic":::
31+
:::image type="content" source="media/add-api/create-repository.png" alt-text="Create a new repository from vanilla-basic":::
3232

3333
Once your project is created, you can use Visual Studio Code to clone the Git repository.
3434

35-
1. Press **F1** to open command in the Command Palette.
36-
1. Paste the URL into the _Git: Clone_ prompt, and press **Enter**.
35+
1. Press **F1** to open command in the Command Palette.
36+
1. Paste the URL into the _Git: Clone_ prompt, and press **Enter**.
3737

38-
:::image type="content" source="media/add-api/vscode-git-0.png" alt-text="Clone a GitHub project using Visual Studio Code":::
38+
:::image type="content" source="media/add-api/vscode-git-0.png" alt-text="Clone a GitHub project using Visual Studio Code":::
3939

40-
:::image type="content" source="media/add-api/github-clone-url.png" alt-text="Clone a GitHub project using Visual Studio Code":::
40+
:::image type="content" source="media/add-api/github-clone-url.png" alt-text="Clone a GitHub project using Visual Studio Code":::
4141

4242

4343
## Create your local project
@@ -46,8 +46,8 @@ In this section, you use Visual Studio Code to create a local Azure Functions pr
4646

4747
1. Inside the _my-vanilla-api_ project, create a sub-folder named **api**.
4848

49-
> [!NOTE]
50-
> You can give this folder any name. This example uses `api`
49+
> [!NOTE]
50+
> You can give this folder any name. This example uses `api`.
5151
5252
2. Press **F1** to open the Command Palette
5353
3. Type **Azure Functions: Create New Project...**
@@ -56,7 +56,7 @@ In this section, you use Visual Studio Code to create a local Azure Functions pr
5656
6. Select the **api** folder as the directory for your project workspace
5757
7. Choose **Select**
5858

59-
:::image type="content" source="media/add-api/create-azure-functions-vscode-1.png" alt-text="Create a new Azure Functions using Visual Studio Code":::
59+
:::image type="content" source="media/add-api/create-azure-functions-vscode-1.png" alt-text="Create a new Azure Functions using Visual Studio Code":::
6060

6161
8. Provide the following information at the prompts:
6262

@@ -72,61 +72,63 @@ In this section, you use Visual Studio Code to create a local Azure Functions pr
7272

7373
10. Your app should now have a project structure similar to this example.
7474

75-
```files
76-
├── api
77-
│ ├── GetMessage
78-
│ │ ├── function.json
79-
│ │ ├── index.js
80-
│ │ └── sample.dat
81-
│ ├── host.json
82-
│ ├── local.settings.json
83-
│ ├── package.json
84-
│ └── proxies.json
85-
├── index.html
86-
├── readme.md
87-
└── styles.css
88-
```
75+
```files
76+
├── api
77+
│ ├── GetMessage
78+
│ │ ├── function.json
79+
│ │ ├── index.js
80+
│ │ └── sample.dat
81+
│ ├── host.json
82+
│ ├── local.settings.json
83+
│ ├── package.json
84+
│ └── proxies.json
85+
├── index.html
86+
├── readme.md
87+
└── styles.css
88+
```
8989
9090
11. Next, update the `GetMessage` function under _api/GetMessage/index.js_ with the following code.
9191
92-
```JavaScript
93-
module.exports = async function (context, req) {
94-
context.res = {
95-
body: {
96-
text: "Hello from the API"
97-
}
98-
};
99-
};
100-
```
92+
```JavaScript
93+
module.exports = async function (context, req) {
94+
context.res = {
95+
body: {
96+
text: "Hello from the API"
97+
}
98+
};
99+
};
100+
```
101101
102102
12. Update the `GetMessage` configuration under `api/GetMessage/function.json` with the following settings.
103103
104-
```json
105-
{
106-
"bindings": [
107-
{
108-
"authLevel": "anonymous",
109-
"type": "httpTrigger",
110-
"direction": "in",
111-
"name": "req",
112-
"methods": [
113-
"get"
114-
],
115-
"route": "message"
116-
},
104+
```json
117105
{
118-
"type": "http",
119-
"direction": "out",
120-
"name": "res"
106+
"bindings": [
107+
{
108+
"authLevel": "anonymous",
109+
"type": "httpTrigger",
110+
"direction": "in",
111+
"name": "req",
112+
"methods": [
113+
"get"
114+
],
115+
"route": "message"
116+
},
117+
{
118+
"type": "http",
119+
"direction": "out",
120+
"name": "res"
121+
}
122+
]
121123
}
122-
]
123-
}
124-
```
124+
```
125+
125126
With the above settings, the API endpoint is:
126127
127128
- Triggered with an HTTP request is made to the function
128129
- Available to all requests regardless of authentication status
129130
- Exposed via the _/api/message_ route
131+
130132
## Run the function locally
131133
132134
Visual Studio Code integrates with [Azure Functions Core Tools](https://docs.microsoft.com/azure/azure-functions/functions-run-local) to let you run this project on your local development computer before you publish to Azure.
@@ -137,15 +139,15 @@ Visual Studio Code integrates with [Azure Functions Core Tools](https://docs.mic
137139
138140
When the Core Tools are installed, your app starts in the _Terminal_ panel. As a part of the output, you can see the URL endpoint of your HTTP-triggered function running locally.
139141
140-
:::image type="content" source="media/add-api/create-azure-functions-vscode-2.png" alt-text="Create a new Azure Functions using Visual Studio Code":::
142+
:::image type="content" source="media/add-api/create-azure-functions-vscode-2.png" alt-text="Create a new Azure Functions using Visual Studio Code":::
141143
142144
3. With Core Tools running, navigate to the following URL to execute a `GET` request.
143145
144146
<http://localhost:7071/api/message>
145147
146-
A response is returned, which looks like the following in the browser:
148+
A response is returned, which looks like the following in the browser:
147149
148-
:::image type="content" source="media/add-api/create-azure-functions-vscode-3.png" alt-text="Create a new Azure Functions using Visual Studio Code":::
150+
:::image type="content" source="media/add-api/create-azure-functions-vscode-3.png" alt-text="Create a new Azure Functions using Visual Studio Code":::
149151
150152
After you've verified that the function runs correctly, you can call the API from the JavaScript application.
151153
@@ -155,44 +157,45 @@ After you've verified that the function runs correctly, you can call the API fro
155157
156158
157159
#### Update files to access the API
160+
158161
1. Next, update the content of the _index.html_ file with the following code to fetch the text from the API function and display it on the screen:
159162
160-
```html
161-
<!DOCTYPE html>
162-
<html lang="en">
163+
```html
164+
<!DOCTYPE html>
165+
<html lang="en">
163166
164-
<head>
165-
<meta charset="UTF-8">
166-
<meta name="viewport" content="width=device-width, initial-scale=1.0">
167-
<link rel="stylesheet" href="styles.css">
168-
<title>Vanilla JavaScript App</title>
169-
</head>
167+
<head>
168+
<meta charset="UTF-8">
169+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
170+
<link rel="stylesheet" href="styles.css">
171+
<title>Vanilla JavaScript App</title>
172+
</head>
170173
171-
<body>
172-
<main>
173-
<h1>Vanilla JavaScript App</h1>
174-
<p>Loading message from the API: <b id="name">...</b></p>
175-
</main>
174+
<body>
175+
<main>
176+
<h1>Vanilla JavaScript App</h1>
177+
<p>Loading message from the API: <b id="name">...</b></p>
178+
</main>
176179
177-
<script>
178-
(async function() {
179-
let { text } = await( await fetch(`/api/message`)).json();
180-
document.querySelector('#name').textContent = text;
181-
}())
182-
</script>
183-
</body>
180+
<script>
181+
(async function() {
182+
let { text } = await( await fetch(`/api/message`)).json();
183+
document.querySelector('#name').textContent = text;
184+
}())
185+
</script>
186+
</body>
184187
185-
</html>
186-
```
188+
</html>
189+
```
187190

188-
With Core Tools running, use the [Live Server](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer) Visual Studio Code extension to serve the _index.html_ file and open it a in browser.
191+
With Core Tools running, use the [Live Server](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer) Visual Studio Code extension to serve the _index.html_ file and open it a in browser.
189192

190193
2. Press **F1** and choose **Live Server: Open with Live Server**.
191194

192-
:::image type="content" source="media/add-api/create-azure-functions-vscode-4.png" alt-text="Create a new Azure Functions using Visual Studio Code":::
195+
:::image type="content" source="media/add-api/create-azure-functions-vscode-4.png" alt-text="Create a new Azure Functions using Visual Studio Code":::
193196

194-
> [!NOTE]
195-
> You can use other HTTP servers or proxies to serve the `index.html` file. Accessing the `index.html` from `file:///` will not work.
197+
> [!NOTE]
198+
> You can use other HTTP servers or proxies to serve the `index.html` file. Accessing the `index.html` from `file:///` will not work.
196199
197200
### Commit and push your changes to GitHub
198201

@@ -226,11 +229,15 @@ Using Visual Studio Code, commit and push your changes to the remote git reposit
226229

227230
Next, add the following the build details.
228231

229-
1. Enter **./** for the _App location_
230-
1. Enter **api** in the _Api location_ box
231-
- This is the name of the API folder created in the previous step.
232-
1. Clear the default value out of the _App artifact location_, leaving the box empty
233-
1. Click **Review + create**
232+
1. Enter **./** for the _App location_.
233+
234+
1. Enter **api** in the _Api location_ box.
235+
236+
This is the name of the API folder created in the previous step.
237+
238+
1. Clear the default value out of the _App artifact location_, leaving the box empty.
239+
240+
1. Click **Review + create**.
234241

235242
| Setting | Description | Required |
236243
| -------- | ----------------------- |

‎articles/static-web-apps/apis.md

Lines changed: 2 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -20,16 +20,7 @@ Azure Static Web Apps provides serverless API endpoints via [Azure Functions](..
2020

2121
## Configuration
2222

23-
API endpoints are available to the web app through the _api_ route. While this route is fixed, you have control over the folder where you locate the associated Azure Functions app. You can change this location by editing the workflow YAML file located in your repository's _.github/workflows_ folder.
24-
25-
Set the the following location's value to the desired folder location for the API app in your repository.
26-
27-
```schema
28-
jobs
29-
└── steps
30-
└── with
31-
└── api_location
32-
```
23+
API endpoints are available to the web app through the _api_ route. While this route is fixed, you have control over the folder where you locate the associated Azure Functions app. You can change this location by [editing the workflow YAML file](github-actions-workflow.md#build-and-deploy) located in your repository's _.github/workflows_ folder.
3324

3425
## Constraints
3526

@@ -38,6 +29,7 @@ Azure Static Web Apps provides an API through Azure Functions. The capabilities
3829
- The API route prefix is must be _api_.
3930
- Triggers and bindings are limited to [HTTP](../azure-functions/functions-bindings-http-webhook.md).
4031
- All other [Azure Functions triggers and bindings](../azure-functions/functions-triggers-bindings.md#supported-bindings) except for output bindings are restricted.
32+
- Logs are only available if you add [Application Insights](../azure-functions/functions-monitoring.md) to your Functions app.
4133

4234
## Next steps
4335

0 commit comments

Comments
 (0)