You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: articles/static-apps/local-development.md
+14-14Lines changed: 14 additions & 14 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -9,15 +9,15 @@ ms.date: 05/08/2020
9
9
ms.author: buhollan
10
10
---
11
11
12
-
# Setup local development for Azure Static Web Apps
12
+
# Set up local development for Azure Static Web Apps
13
13
14
14
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.
15
15
16
16
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.
17
17
18
18
This article demonstrates recommended best-practices for local development, including the following concepts:
19
19
20
-
-Setup the web app for static content
20
+
-Set up the web app for static content
21
21
- Configuring the Azure Functions app for your application's API
22
22
- Debugging and running the application
23
23
- Best-practices for your app's file and folder structure
@@ -33,9 +33,9 @@ This article demonstrates recommended best-practices for local development, incl
33
33
34
34
Running an Azure Static Web App locally involves three processes, depending on whether or not your project contains an API.
35
35
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
39
39
40
40
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.
41
41
@@ -71,7 +71,7 @@ The Live Server extension for Visual Studio Code provides a local development we
71
71
72
72
:::image type="content" source="media/local-development/command-palette-git-clone.png" alt-text="git clone option in Visual Studio Code":::
73
73
74
-
1. Enter the following value for **Repository URL**
74
+
1. Enter the following value for **Repository URL**.
@@ -83,15 +83,15 @@ The Live Server extension for Visual Studio Code provides a local development we
83
83
84
84
:::image type="content" source="media/local-development/open-new-window.png" alt-text="Open in new window":::
85
85
86
-
Visual Studio Code will open the cloned project in the editor.
86
+
Visual Studio Code opens the cloned project in the editor.
87
87
88
88
### Run the website locally with Live Server
89
89
90
-
1.Press **F1** to open the Command Palette.
90
+
1. Press **F1** to open the Command Palette.
91
91
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**
93
93
94
-
A browser tab will open and display the application.
94
+
A browser tab opens to display the application.
95
95
96
96
:::image type="content" source="media/local-development/vanilla-api-site.png" alt-text="Simple static site running in the browser":::
97
97
@@ -109,7 +109,7 @@ As part of the API creation process, a launch configuration is created for Visua
109
109
110
110
:::image type="content" source="media/local-development/terminal-api-debug.png" alt-text="API running in Visual Studio Code terminal":::
111
111
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.
113
113
114
114
1. Next, press **Ctrl/Cmd** and click on the URL in the terminal to open a browser window that calls the API.
115
115
@@ -150,7 +150,7 @@ Depending on whether or not your application is built with a JavaScript framewor
150
150
151
151
### Environment configuration files
152
152
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`.
154
154
155
155
```
156
156
API=http:127.0.0.1:7071/api
@@ -180,13 +180,13 @@ For more information on configuring environment files for front-end JavaScript f
180
180
181
181
##### Restart Live Server
182
182
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.
184
184
185
185
1. Type **Live Server** and select **Live Server: Stop Live Server**.
186
186
187
187
:::image type="content" source="media/local-development/stop-live-server.png" alt-text="Stop Live Server command in Visual Studio command palette":::
188
188
189
-
1. Press **F1** to open the Command Palette
189
+
1. Press **F1** to open the Command Palette.
190
190
191
191
1. Type **Live Server** and select **Live Server: Open with Live Server**.
0 commit comments