Merge pull request #270922 from craigshoemaker/swa/qs-vscode-04-24

[Static Web Apps] Update: Visual Studio Quickstart

Author: v-regandowner

articles/static-web-apps/getting-started.md

@@ -5,12 +5,12 @@ services: static-web-apps
 author: craigshoemaker
 ms.service: static-web-apps
 ms.topic: quickstart
-ms.date: 08/10/2023
+ms.date: 04/02/2024
 ms.author: cshoe
 ms.custom: mode-other
 ---
 
-# Quickstart: Building your first static site with Azure Static Web Apps
+# Quickstart: Build your first static site with Azure Static Web Apps
 
 Azure Static Web Apps publishes a website by building an app from a code repository. In this quickstart, you deploy an application to Azure Static Web apps using the Visual Studio Code extension.
 
@@ -37,7 +37,6 @@ If you don't already have the [Azure Static Web Apps extension for Visual Studio
 1. Select **View** > **Extensions**.
 1. In the **Search Extensions in Marketplace**, type **Azure Static Web Apps**.
 1. Select **Install** for **Azure Static Web Apps**.
-2. The extension installs into Visual Studio Code.
 
 ## Create a static web app
 
@@ -48,104 +47,75 @@ If you don't already have the [Azure Static Web Apps extension for Visual Studio
     > [!NOTE]
     > You are required to sign in to Azure and GitHub in Visual Studio Code to continue. If you are not already authenticated, the extension prompts you to sign in to both services during the creation process.
 
-2. Select <kbd>F1</kbd> to open the Visual Studio Code command palette.
+1. Select <kbd>F1</kbd> to open the Visual Studio Code command palette.
 
-3. Enter **Create static web app** in the command box.
+1. Enter **Create static web app** in the command box.
 
-4. Select *Azure Static Web Apps: Create static web app...*.
+1. Select *Azure Static Web Apps: Create static web app...*.
 
-    # [No Framework](#tab/vanilla-javascript)
+1. Select your Azure subscription.
 
-    | Setting | Value |
-    | --- | --- |
-    | Name | Enter **my-first-static-web-app** |
-    | Region | Select the region closest to you. |
-    | Framework | Select **Custom**. |
+1. Enter **my-first-static-web-app** for the application name.
 
-    # [Angular](#tab/angular)
-
-    | Setting | Value |
-    | --- | --- |
-    | Name | Enter **my-first-static-web-app** |
-    | Region | Select the region closest to you. |
-    | Framework | Select **Angular**. |
+1. Select the region closest to you.
 
-    # [Blazor](#tab/blazor)
-
-    | Setting | Value |
-    | --- | --- |
-    | Name | Enter **my-first-static-web-app** |
-    | Region | Select the region closest to you. |
-    | Framework | Select **Blazor**. |
-
-    # [React](#tab/react)
-
-    | Setting | Value |
-    | --- | --- |
-    | Name | Enter **my-first-static-web-app** |
-    | Region | Select the region closest to you. |
-    | Framework | Select **React**. |
-
-    # [Vue](#tab/vue)
-
-    | Setting | Value |
-    | --- | --- |
-    | Name | Enter **my-first-static-web-app** |
-    | Region | Select the region closest to you. |
-    | Framework | Select **Vue.js**. |
-
-    ---
-
-5. Enter the settings values that match your framework preset choice.
+1. Enter the settings values that match your framework choice.
 
     # [No Framework](#tab/vanilla-javascript)
 
     | Setting | Value |
     | --- | --- |
-    | Location of application code | Enter **/src** |
-    | Build location | Enter **/src** |
+    | Framework | Select **Custom** |
+    | Location of application code | Enter `/src` |
+    | Build location | Enter `/src` |
 
     # [Angular](#tab/angular)
 
     | Setting | Value |
     | --- | --- |
-    | Location of application code | Enter **/** |
-    | Build location | Enter **dist/angular-basic** |
+    | Framework | Select **Angular** |
+    | Location of application code | Enter `/` |
+    | Build location | Enter `dist/angular-basic` |
 
     # [Blazor](#tab/blazor)
 
     | Setting | Value |
     | --- | --- |
-    | Location of application code | Enter **Client** |
-    | Build location | Enter **wwwroot** |
+    | Framework | Select **Blazor** |
+    | Location of application code | Enter `Client` |
+    | Build location | Enter `wwwroot` |
 
     # [React](#tab/react)
 
     | Setting | Value |
     | --- | --- |
-    | Location of application code | Enter **/** |
-    | Build location | Enter **build** |
+    | Framework | Select **React** |
+    | Location of application code | Enter `/` |
+    | Build location | Enter `build` |
 
     # [Vue](#tab/vue)
 
     | Setting | Value |
     | --- | --- |
-    | Location of application code | Enter **/** |
-    | Build location | Enter **dist** |
+    | Framework | Select **Vue.js** |
+    | Location of application code | Enter `/` |
+    | Build location | Enter `dist` |
 
     ---
 
-6. Once the app is created, a confirmation notification is shown in Visual Studio Code.
+1. Once the app is created, a confirmation notification is shown in Visual Studio Code.
 
     :::image type="content" source="media/getting-started/extension-confirmation.png" alt-text="Created confirmation":::
 
+    If GitHub presents you with a button labeled **Enable Actions on this repository**, select the button to allow the build action to run on your repository.
+
     As the deployment is in progress, the Visual Studio Code extension reports the build status to you.
 
     :::image type="content" source="media/getting-started/extension-waiting-for-deployment.png" alt-text="Waiting for deployment":::
 
     Once the deployment is complete, you can navigate directly to your website.
 
-7. To view the website in the browser, right-click the project in the Static Web Apps extension, and select **Browse Site**.
+1. To view the website in the browser, right-click the project in the Static Web Apps extension, and select **Browse Site**.
 
     :::image type="content" source="media/getting-started/extension-browse-site.png" alt-text="Browse site":::