Create and deploy the boilerplate Azure web app (preview)

  • Article

To create and deploy the boilerplate Azure web app, you need to create and deploy the backend and frontend web apps. This tutorial provides instructions for creating and deploying the boilerplate backend and frontend web apps.

Create and deploy the boilerplate backend web app

To create an Azure web app from the Azure portal:

  1. Create a Web App resource in the Azure portal.
  2. Fill in all the relevant data:
    • For Publish, select Code.
    • For Runtime stack, select .NET 7 (STS) and Windows.

For general instructions, see Getting Started with Azure App Service.

Map Your Domain to the Web App part 1

  1. Navigate to Settings -> Custom domains.
  2. Select Add custom domain, and follow the instructions. For more information on mapping custom domains, visit Custom Domain Mapping in Azure.
  3. Open your backend boilerplate Visual Studio solution.
  4. Right-click the boilerplate project and select Publish.
  5. Choose Azure as the target.
  6. Sign in with a user who has access to the Azure web app you created.
  7. Use the UI to locate the relevant subscription and resource group, then follow the instructions to publish.

Update CORS

  1. In your web app's Azure page, navigate to API -> CORS.
  2. Under Allowed Origins, add your frontend web app URL.

Create and Deploy the Boilerplate Frontend Web App

To create an Azure web app from the Azure portal:

  1. Create a Web App resource in the Azure portal. a "Web App" resource in the Azure portal.
  2. Fill in all the relevant data:
    • For Publish, select Code.
    • For Runtime stack, select Node 18 LTS and Windows.

For general instructions, see Quickstart for Node.js in Azure App Service.

Map Your Domain to the Web App

  1. Navigate to Settings -> Custom domains.
  2. Select Add custom domain, and follow the instructions.

For more information on mapping custom domains, visit Custom Domain Mapping in Azure.

Publish Your Frontend Boilerplate Web App part 2

  1. Build your frontend boilerplate by running npm run build:test.
  2. Navigate to the dist folder at Microsoft-Fabric-developer-sample\Frontend\tools\dist.
  3. Select all files and the asset folder under dist and create a zip file.
  4. Open PowerShell.
  5. Run Connect-AzAccount and sign in with a user who has access to the Azure web app you created.
  6. Run Set-AzContext -Subscription "<subscription_id>".
  7. Run Publish-AzWebApp -ResourceGroupName <resource_group_name> -Name <web_app_name> -ArchivePath <zip_file_path>.