- A sample SPA that you can access via a URL such as `http://www.contoso.com`:
- You can use the React app described in [Quickstart: Sign in users into a sample React SPA by using native authentication API](quickstart-native-authentication-single-page-app-react-sign-in.md). However, don't configure or run the proxy server, as this guide covers that setup.
- Once you run the app, record the app URL for later use in this guide. In production, this URL contains the domain that you want to use as a custom domain URL, such as `http://www.contoso.com`
## Set up Azure Front Door as a reverse proxy
1. Familiarize yourself how to use Azure Front Door with CORS by reading through the article at [Using Azure Front Door Standard/Premium with CORS](/azure/frontdoor/standard-premium/troubleshoot-cross-origin-resources).
1. Use the instructions in [Enable custom URL domains for apps in external tenants](../external-id/customers/how-to-custom-url-domain.md) to add a custom domain name to your external tenant and create an Azure Front Door.
1. In your sample SPA, open the *API\React\ReactAuthSimple\src\config.ts* file, then replace the value of `BASE_API_URL`, *http://localhost:3001/api*, with `https://Enter_Custom_Domain_URL/Enter_the_Tenant_ID_Here`. Replace the placeholder:
1. `Enter_Custom_Domain_URL` with your custom domain url, such as `contoso.com`.
1. `Enter_the_Tenant_ID_Here` with your Directory (tenant) ID. If you don't have your tenant ID, learn how to [read your tenant details](../external-id/customers/how-to-create-external-tenant-portal.md#get-the-external-tenant-details).
1. If necessary, rerun your sample SPA.
## Guidelines for using Azure Front Door as a reverse proxy
- A sample SPA that you can access via a URL such as `http://www.contoso.com`:
- You can use the React app described in [Quickstart: Sign in users into a sample React SPA by using native authentication API](quickstart-native-authentication-single-page-app-react-sign-in.md). However, don't configure or run the proxy server, as this guide covers that setup.
- Once you run the app, record the app URL for later use in this guide. In production, this URL contains the domain that you want to use as a custom domain URL, such as `http://www.contoso.com`
- Install [Azure Developer CLI (azd)](https://learn.microsoft.com/en-us/azure/developer/azure-developer-cli/install-azd?tabs=winget-windows%2Cbrew-mac%2Cscript-linux&pivots=os-windows).
## Set up Azure Front Door as a reverse proxy
1. Familiarize yourself how to use Azure Front Door with CORS by reading through the article at [Using Azure Front Door Standard/Premium with CORS](/azure/frontdoor/standard-premium/troubleshoot-cross-origin-resources).
1. Use the instructions in [Enable custom URL domains for apps in external tenants](../external-id/customers/how-to-custom-url-domain.md) to add a custom domain name to your external tenant.
- For creating an Azure Front Door, [use azd template](#create-azure-front-door-as-a-reverse-proxy-using-an-azure-developer-cli-azd-template).
1. In your sample SPA, open the *API\React\ReactAuthSimple\src\config.ts* file, then replace the value of `BASE_API_URL`, *http://localhost:3001/api*, with `https://Enter_Custom_Domain_URL/Enter_the_Tenant_ID_Here`. Replace the placeholder:
1. `Enter_Custom_Domain_URL` with your custom domain url, such as `contoso.com`.
1. `Enter_the_Tenant_ID_Here` with your Directory (tenant) ID. If you don't have your tenant ID, learn how to [read your tenant details](../external-id/customers/how-to-create-external-tenant-portal.md#get-the-external-tenant-details).
1. If necessary, rerun your sample SPA.
## Create Azure Front Door as a Reverse Proxy using an Azure Developer CLI (azd) template
1. Initialize the azd template
```console