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
+10-10Lines changed: 10 additions & 10 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -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
-
1. Running a local web server
37
-
1. Running the API
38
-
1. 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
@@ -65,7 +65,7 @@ The Live Server extension for Visual Studio Code provides a local development we
65
65
66
66
1. Open Visual Studio Code.
67
67
68
-
1. Press <kbd>F1</kbd> to open the Command Palette.
68
+
1. Press **F1** to open the Command Palette.
69
69
70
70
1. Type **clone** in the search box and select **Git: Clone**.
71
71
@@ -87,7 +87,7 @@ Visual Studio Code will open the cloned project in the editor.
87
87
88
88
### Run the website locally with Live Server
89
89
90
-
1. Press <kbd>F1</kbd> to open the Command Palette.
90
+
1. Press **F1** to open the Command Palette.
91
91
92
92
1. Type **Live Server** in the search box and select **Live Server: Open with Live Server**
93
93
@@ -103,15 +103,15 @@ Azure Static Web Apps APIs are powered by Azure Functions. See [Add an API to Az
103
103
104
104
As part of the API creation process, a launch configuration is created for Visual Studio Code. This configuration is located in the _.vscode_ folder. This folder contains all of the required settings for building and running the API locally.
105
105
106
-
1. In Visual Studio Code, press <kbd>F5</kbd> to start the API.
106
+
1. In Visual Studio Code, press **F5** to start the API.
107
107
108
108
1. A new terminal instance opens showing the output from the API build process.
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
112
The status bar in Visual Studio Code is now orange. This indicates that the API is now running and the debugger is attached.
113
113
114
-
1. Next, press <kbd>Ctrl/Cmd</kbd> and click on the URL in the terminal to open a browser window that calls the API.
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
116
116
:::image type="content" source="media/local-development/hello-from-the-api.png" alt-text="Browser display result of API call":::
117
117
@@ -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 <kbd>F1</kbd> 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
-
:::image type="content" source="media/local-development/stop-live-server.png" alt-text="Stop Live Server command in Visual Studio command palatte":::
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 <kbd>F1</kbd> 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