Skip to content

Commit ab95a23

Browse files
Clean up text
1 parent 2c2a12e commit ab95a23

File tree

1 file changed

+14
-14
lines changed

1 file changed

+14
-14
lines changed

articles/static-apps/local-development.md

Lines changed: 14 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -9,15 +9,15 @@ ms.date: 05/08/2020
99
ms.author: buhollan
1010
---
1111

12-
# Setup local development for Azure Static Web Apps
12+
# Set up local development for Azure Static Web Apps
1313

1414
An Azure Static Web Apps instance is made up of two different types of applications. The first is a web app for your static content. Web apps are often created with front-end frameworks and libraries or with static site generators. The second aspect is the API, which is an Azure Functions app that provides a rich back-end development environment.
1515

1616
When running in the cloud, Azure Static Web Apps seamlessly maps requests to the `api` route from the web app to the Azure Functions app without requiring CORS configuration. Locally, you need to configure your application to mimic this behavior.
1717

1818
This article demonstrates recommended best-practices for local development, including the following concepts:
1919

20-
- Setup the web app for static content
20+
- Set up the web app for static content
2121
- Configuring the Azure Functions app for your application's API
2222
- Debugging and running the application
2323
- Best-practices for your app's file and folder structure
@@ -33,9 +33,9 @@ This article demonstrates recommended best-practices for local development, incl
3333

3434
Running an Azure Static Web App locally involves three processes, depending on whether or not your project contains an API.
3535

36-
* Running a local web server
37-
* Running the API
38-
* Connecting the web project to the API
36+
- Running a local web server
37+
- Running the API
38+
- Connecting the web project to the API
3939

4040
Depending on how a website is built, a local web server may or may not be required to run the application in the browser. When using front-end JavaScript frameworks and static site generators, this functionality is built in to their respective CLIs (Command Line Interfaces). The following links point to the CLI reference for a selection of frameworks, libraries, and generators.
4141

@@ -71,7 +71,7 @@ The Live Server extension for Visual Studio Code provides a local development we
7171

7272
:::image type="content" source="media/local-development/command-palette-git-clone.png" alt-text="git clone option in Visual Studio Code":::
7373

74-
1. Enter the following value for **Repository URL**
74+
1. Enter the following value for **Repository URL**.
7575

7676
```http
7777
[email protected]:<YOUR_GITHUB_ACCOUNT>/vanilla-api.git
@@ -83,15 +83,15 @@ The Live Server extension for Visual Studio Code provides a local development we
8383

8484
:::image type="content" source="media/local-development/open-new-window.png" alt-text="Open in new window":::
8585

86-
Visual Studio Code will open the cloned project in the editor.
86+
Visual Studio Code opens the cloned project in the editor.
8787

8888
### Run the website locally with Live Server
8989

90-
1. Press **F1** to open the Command Palette.
90+
1. Press **F1** to open the Command Palette.
9191

92-
1. Type **Live Server** in the search box and select **Live Server: Open with Live Server**
92+
1. Type **Live Server** in the search box and select **Live Server: Open with Live Server**
9393

94-
A browser tab will open and display the application.
94+
A browser tab opens to display the application.
9595

9696
:::image type="content" source="media/local-development/vanilla-api-site.png" alt-text="Simple static site running in the browser":::
9797

@@ -109,7 +109,7 @@ As part of the API creation process, a launch configuration is created for Visua
109109

110110
:::image type="content" source="media/local-development/terminal-api-debug.png" alt-text="API running in Visual Studio Code terminal":::
111111

112-
The status bar in Visual Studio Code is now orange. This indicates that the API is now running and the debugger is attached.
112+
The status bar in Visual Studio Code is now orange. This color indicates that the API is now running and the debugger is attached.
113113

114114
1. Next, press **Ctrl/Cmd** and click on the URL in the terminal to open a browser window that calls the API.
115115

@@ -150,7 +150,7 @@ Depending on whether or not your application is built with a JavaScript framewor
150150

151151
### Environment configuration files
152152

153-
If you are building your app with front-end frameworks that have a CLI, use environment configuration files. In the development configuration file, you can specify the path to the API which points to the local location of `http:127.0.0.1:7071`.
153+
If you are building your app with front-end frameworks that have a CLI, use environment configuration files. In the development configuration file, you can specify the path to the API, which points to the local location of `http:127.0.0.1:7071`.
154154

155155
```
156156
API=http:127.0.0.1:7071/api
@@ -180,13 +180,13 @@ For more information on configuring environment files for front-end JavaScript f
180180

181181
##### Restart Live Server
182182

183-
1. Press **F1** to open the Command Palette in Visual Studio Code
183+
1. Press **F1** to open the Command Palette in Visual Studio Code.
184184

185185
1. Type **Live Server** and select **Live Server: Stop Live Server**.
186186

187187
:::image type="content" source="media/local-development/stop-live-server.png" alt-text="Stop Live Server command in Visual Studio command palette":::
188188

189-
1. Press **F1** to open the Command Palette
189+
1. Press **F1** to open the Command Palette.
190190

191191
1. Type **Live Server** and select **Live Server: Open with Live Server**.
192192

0 commit comments

Comments
 (0)