refresh/GHI

Author: chcomley

articles/static-web-apps/front-door-manual.md

@@ -5,58 +5,49 @@ services: static-web-apps
 author: craigshoemaker
 ms.service: static-web-apps
 ms.topic: how-to
-ms.date: 07/05/2022
+ms.date: 01/24/2023
 ms.author: cshoe
 ---
 
 # Tutorial: Manually configure Azure Front Door for Azure Static Web Apps
 
-Learn to add [Azure Front Door](../frontdoor/front-door-overview.md) as the CDN for your static web app.  Azure Front Door is a scalable and secure entry point for fast delivery of your web applications.
+Add [Azure Front Door](../frontdoor/front-door-overview.md) as the CDN for your static web app. Azure Front Door is a scalable and secure entry point for fast delivery of your web applications.
 
-> [!NOTE]
-> Consider using [enterprise-grade edge](enterprise-edge.md) for faster page loads, enhanced security, and optimized reliability for global applications.
-
-In this tutorial, you learn how to:
+In this tutorial, learn how to do the following tasks:
 
 > [!div class="checklist"]
 >
 > - Create an Azure Front Door Standard/Premium instance
 > - Associate Azure Front Door with your Azure Static Web Apps site
 
 > [!NOTE]
-> This tutorial requires the Azure Static Web Apps Standard and Azure Front Door Standard / Premium plans.
-
-## Copy web app URL
-
-1. Go to the Azure portal.
-
-1. Open the static web app that you want to apply Azure Front Door.
-
-1. Go to the *Overview* section.
-
-1. Copy the *URL* to your clipboard for later use.
-
-## Add Azure Front Door
+> - Consider using [enterprise-grade edge](enterprise-edge.md) for faster page loads, enhanced security, and optimized reliability for global applications.
+> - This tutorial requires the Azure Static Web Apps Standard and Azure Front Door Standard / Premium plans.
 
-When creating an Azure Front Door profile, you must select an origin from the same subscription as the selected the Front Door.
+## Prerequisites
 
-1. Go to the Azure home screen.
-
-1. Select **Create a resource**.
+- An Azure account with an active subscription. [Create an account for free](https://azure.microsoft.com/free/?WT.mc_id=A261C142F)
+- A static web app. [Build your first static web app](get-started-portal.md).
+<!--
+## Copy web app URL
 
-1. Search for **Front Door**.
+1. Sign in to the [Azure portal](https://portal.azure.com).
 
-1. Select **Front Door and CDN profiles**.
+2. Open the static web app that you want to apply Azure Front Door.
 
-1. Select **Create**.
+3. Go to the *Overview* section.
 
-1. Select the **Azure Front Door** option.
+4. Copy the *URL* to your clipboard for later use.
 
-1. Select the **Quick create** option.
+   :::image type="content" source="media/front-door-manual/copy-url-static-web-app.png" alt-text="Screenshot of Static Web App Overview page.":::
+-->
 
-1. Select **Continue to create a front door**.
+## Create an Azure Front Door
 
-1. In the *Basics* tab, enter the following values:
+1. Sign in to the [Azure portal](https://portal.azure.com).
+2. From the home page or the Azure menu, select **+ Create a resource**. Search for *Front Door and CDN profiles*, and then select **Create** > **Front Door and CDN profiles**.
+3. On the Compare offerings page, select **Quick create**, and then select **Continue to create a Front Door**.
+4. On the **Create a Front Door profile** page, enter or select the following settings.
 
     | Setting | Value |
     |---|---|
@@ -73,13 +64,12 @@ When creating an Azure Front Door profile, you must select an origin from the sa
     | Compression | Select **Enable compression** |
     | WAF policy | Select **Create new** or select an existing Web Application Firewall policy from the dropdown if you want to enable this feature. |
 
-1. Select **Review + create**.
-
-1. Select **Create**.
+   > [!NOTE]
+   > When you create an Azure Front Door profile, you must select an origin from the same subscription the Front Door is created in.
 
-    The creation process may take a few minutes to complete.
-
-1. Select **Go to resource**.
+5. Select **Review + create**, and then select **Create**. The creation process may take a few minutes to complete.
+6. When  deployment completes, select **Go to resource**.
+7. [Add a condition](#add-a-condition).
 
 ## Disable cache for auth workflow
 
@@ -90,61 +80,64 @@ Add the following settings to disable Front Door's caching policies from trying
 
 ### Add a condition
 
-1. Under *Settings*, select **Rule set**.
-
-1. Select **Add**.
+1. From your Front Door, under *Settings*, select **Rule set**.
 
-1. In the *Rule set name* textbox, enter **Security**.
+2. Select **+ Add**.
 
-1. In the *Rule name* textbox, enter **NoCacheAuthRequests**.
+3. In the *Rule set name* textbox, enter **Security**.
 
-1. Select **Add a condition**.
+4. In the *Rule name* textbox, enter **NoCacheAuthRequests**.
 
-1. Select **Request path**.
+5. Select **Add a condition**.
 
-1. Select **Begins With** in the *Operator* drop-down.
+6. Select **Request path**.
 
-1. Select the **Edit** link above the *Value* textbox.
+7. Select the *Operator* drop-down, and then **Begins With**.
 
-1. Enter **/.auth** in the textbox.
-
-1. Select **Update**.
-
-1. Select the **No transform** option from the *Case transform* dropdown.
+8. Select the **Edit** link above the *Value* textbox.
 
+9. Enter `/.auth` in the textbox, and then select **Update**.
+<!-->
+10. Select the **No transform** option from the *Case transform* dropdown.
+I don't see this option available when I run through this task.
+-->
 ### Add an action
 
 1. Select the **Add an action** dropdown.
 
-1. Select **Route configuration override**.
+2. Select **Route configuration override**.
 
-1. Select **Disabled** in the *Caching* dropdown.
+3. Select **Disabled** in the *Caching* dropdown.
 
-2. Select **Save**.
+4. Select **Save**.
 
 ### Associate rule to an endpoint
 
-Now that the rule is created, you apply the rule to a Front Door endpoint.
+Now that the rule is created, apply the rule to a Front Door endpoint.
 
-1. Select the **Unassociated** link.
+1. From your Front Door, select **Rule set**, and then the **Unassociated** link.
 
-1. Select the endpoint name to which you want to apply the caching rule.
+   :::image type="content" source="media/front-door-manual/rule-set-select-unassociated.png" alt-text="Screenshot showing selections for Rule set and Unassociated links.":::
 
-2. Select **Next**.
+2. Select the endpoint name to which you want to apply the caching rule, and then select **Next**.
 
 3. Select **Associate**.
 
+   :::image type="content" source="media/front-door-manual/associate-route.png" alt-text="Screenshot showing highlighted button, Associate.":::
+
 ## Copy Front Door ID
 
 Use the following steps to copy the Front Door instance's unique identifier.
 
-1. Select the **Overview** link on the left-hand navigation.
+1. From your Front Door, select the **Overview** link on the left-hand navigation.
+
+1. Copy the value labeled **Front Door ID** and paste it into a file for later use.
 
-1. From the *Overview* window, copy the value labeled **Front Door ID** and paste it into a file for later use.
+   :::image type="content" source="media/front-door-manual/copy-front-door-id.png" alt-text="Screenshot showing highlighted Overview item and highlighted Front Door ID number.":::
 
 ## Update static web app configuration
 
-To complete the integration with Front Door, you need to update the application configuration file to:
+To complete the integration with Front Door, you need to update the application configuration file to do the following functions:
 
 - Restrict traffic to your site only through Front Door
 - Restrict traffic to your site only from your Front Door instance