Edit

Share via

Create and deploy the boilerplate Azure web app

  • 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.

Make sure that you review the workload cloud setup tutorial before you deploy your backend and frontend web apps.

Create and deploy the boilerplate backend web app

  1. In the Azure portal, create a web app resource.

  2. Enter or select the relevant information:

    • For Publish, select Code.
    • For Runtime stack, select .NET 7 (STS) and Windows.

For general instructions, see Get started with Azure App Service.

Map your domain to the backend web app

  1. Go to Settings > Custom domains.

  2. Select Add custom domain, and then follow the instructions.

    For more information, see Custom domain mapping in Azure.

  3. In Visual Studio, open your backend boilerplate solution.

  4. Right-click the boilerplate project and select Publish.

  5. For the target, select Azure.

  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, and then follow the instructions to publish.

Update CORS

  1. On the overview pane of your web app in the Azure portal, go to API > CORS.
  2. Under Allowed Origins, add your frontend web app URL.

Create and deploy the boilerplate frontend web app

  1. In the Azure portal, create a web app resource.

  2. Enter or select the relevant information:

    • 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 frontend web app

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

For more information, see Custom domain mapping in Azure.

Publish your frontend boilerplate web app

  1. Build your frontend boilerplate by running npm run build:test.
  2. Go to the Microsoft-Fabric-developer-sample\Frontend\tools\dist folder.
  3. Select all files and the asset folder under dist, and create a .zip file of the selected files.
  4. Open PowerShell.
  5. In PowerShell, 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>.