Skip to content

Commit a66f139

Browse files
garycentricgarycentric
authored
Indentation corrections
1 parent f0014e0 commit a66f139

File tree

1 file changed

+95
-88
lines changed

1 file changed

+95
-88
lines changed

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

Lines changed: 95 additions & 88 deletions
Original file line numberDiff line numberDiff line change
@@ -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
| -------- | ----------------------- |

0 commit comments

Comments
 (0)