Share via

Deploy to Azure Static Web Apps

  • Article

You can deploy the Getting started kit for Intelligent appointments (Starter kit) to Azure Static Web Apps. The following architecture diagram provides an overview of the deployment:

Block diagram of the Starter kit deployment to Azure Static Web Apps.

You need to perform the following tasks to deploy to Static Web Apps (SWA):

1. Register the application on the Azure portal

2. Create a Service-to-Service authentication with a Dataverse environment

3. Create an Azure resource group

4. Install the deployment prerequisites

5. Deploy the Getting started kit

1. Register the application on the Azure portal

To enable the Starter kit to authenticate the Intelligent appointments back-end service, you need to create an App registration on the Azure portal.

  1. In the Azure portal, search for and select App registrations.

  2. Select + New registration.

  3. On the Register an Application page, enter a name for the application; for example, Getting started kit for Intelligent appointments, and then select Register.

    Screenshot of the App registrations page.

  4. Copy the Application (client) ID value because you'll use it in a later step.

    Copy the Application (Client) Id value.

  5. Inside your application, select Certificates & secrets on the left navigation pane.

  6. Under Client secrets, select +New client secret.

  7. Enter a description for the client secret; for example, intelligentAppointmentClientSec, and then select Add.

    You should see the value of the generated client secret. Copy this value because you'll use it in a later step.

    Important

    The client secret value will not be visible if the page reloads. Therefore, if you did not copy the value when it was first generated, you must delete the existing client secret and generate a new one.

    Copy the client secret value.

2. Create a Service-to-Service authentication with a Dataverse environment

You need to add the recently created application user to the Microsoft Cloud for Financial Services environment and set up the required security role to ensure that the Starter kit can authenticate it.

  1. Sign in to the Power Platform admin center.

  2. In the left navigation pane, select Environments, and then select your Microsoft Cloud for Financial Services environment to view its details.

  3. Select the Settings for your environment.

    Settings for an environment.

  4. Expand Users + Permissions, and then select Application users.

  5. Select + New app user.

  6. Select + Add an app.

  7. Select the app user that you've already created, and then select Add.

    Add an app from the Microsoft Entra ID.

  8. Select your Business Unit and then select the pencil icon next to Security Roles.

    Select a business unit.

  9. Define the required security roles.

    Scroll down and select Scheduling API user, and then select Save.

3. Create an Azure resource group

After creating the S2S authentication, you need to create the required resource group to house your other Azure components.

  1. Sign in to the Azure portal.

  2. Search for and select Resource groups.

  3. Select + Create to create a new resource group.

    Create a new resource group.

  4. Under Basics, specify the following details:

    • Resource group: Provide a name, such as fsiIntelligentAppointments.

    • Region: Select the same region as the Dataverse environment.

  5. Select Review + Create to review the specified details.

  6. Select Create to proceed with the creation of the resource group. Copy the Resource Group name because you'll use it in a later step.

    Confirm the creation of the resource group.

Note

For more information on Azure resource groups, see Manage Azure Resource Manager resource groups by using the Azure portal.

4. Install the deployment prerequisites

Before proceeding with the deployment, ensure that all the prerequisite applications are installed on your computer.

  1. Start Windows PowerShell as an administrator.

  2. Run node --version to verify whether your Node.js version is 16.x or later.

    If you receive an error message or if the version is earlier than 16.x, download Node.js and install the required version of Node.js.

  3. Run az --version to verify whether your Azure Command-Line Interface (CLI) version is 2.40.0 or later.

    If your receive an error message or if the version is earlier than 2.40.0, download and install the required version of Azure CLI based on your operating system.

  4. Run yarn --version to check whether yarn is installed.

    If you receive an error message or if the version is earlier than 1.22.x, run npm install -g yarn. This command installs yarn globally on your computer.

  5. Run npm install -g @azure/static-web-apps-cli to install the Azure Static Web Apps CLI.

  6. Go to the Azure portal. Search for and then select Microsoft Entra ID.

  7. Under Overview, copy the Tenant ID because you'll use it in a later step.

    Copy the Tenant ID.

  8. Search for and select Subscriptions. Copy the Subscription ID because you'll use it in a later step.

    Copy the Subscription ID.

  9. Sign in to the Power Platform admin center.

  10. In the left navigation pane, select Environments, and then select your Microsoft Cloud for Financial Services environment to view its details.

  11. Copy the Environment URL and the Database version values because you'll use them in a later step.

    Note

    You can copy the Database version only until the first decimal place, as highlighted in the following screenshot:

    Copy the Environment URL and the Database version.

5. Deploy the Getting started kit

You must first build the Starter kit on your computer, and then create an Azure Static Web App to deploy the Starter kit. You can use Windows PowerShell to perform the build and deployment, but use an editor such as Visual Studio Code to make any code-related changes.

  1. To download the Starter kit that you'll build and deploy, go to Cloud-for-Financial-Services---samples, select Code and then select Download ZIP. Extract the ZIP file to a local folder.

    Note Make sure to not use a synced OneDrive folder or other cloud storage services for the extracted files.

  2. Start Windows PowerShell and navigate to the folder where you extracted the sample kit. For example, Cloud-for-Financial-Services\-\--samples.

  3. Run yarn to install all the packages required for the build.

  4. Navigate to the folder to build, that is appointment-started-kit, and run yarn build.

  5. Navigate to the demo-web-app folder and then build the SWA project using the following command:

    swa build --app-location . --output-location dist --api-location api --app-build-command "yarn build\" --api-build-command "npm run build --if-present"

  6. Use all the values that you copied in the previous steps to set up the variables for the subsequent steps in this procedure. You can use a text editor to list the variables and then copy them to PowerShell.

    $tenantId = '9ed59fd7-xxxx-xxxx-xxxx-xxxxxxxxxxxx'
$subscriptionId = 'f986929c-xxxx-xxxx-xxxx-xxxxxxxxxxxx'
$resourceGroup = 'fsiIntelligentAppointments'
$clientId = '989e78c0- xxxx-xxxx-xxxx-xxxxxxxxxxxx'
$clientSecret = 'kHe\~xxxxxxxxxxxxxxxxxxxxxxxxxx'
$env_url = 'https://orgxxxxxxxx.crm.dynamics.com/'
$region = 'westus2\' (Use your environment's region)
$appName = 'IntelligentAppointments-Starter-kit'
$env_version = 'v9.2' (Use the version you copied earlier)

    PowerShell screen with the list of copied variables.

  7. Sign in to your Azure account by using az login and select the right subscription by running the az account set --subscription $subscriptionId. A web browser window opens for authentication.

    Screenshot of the Azure account login window.

  8. Create the Azure Static Web App as specified:

    az staticwebapp create --name $appName --resource-group $resourceGroup --api-location api --output-location dist --location $region

  9. Sign in to the Azure Static Web App. A web browser window opens for authentication.

    swa login --subscription-id $subscriptionId --resource-group $resourceGroup --tenant-id $tenantId --clear-credentials

    Run the following command for the Azure Static Web App deployment key: $deploymentKey = az staticwebapp secrets list --name \$appName --query "properties.apiKey"

  10. Deploy the Azure Static Web App:

    swa deploy --deployment-token=$deploymentKey ./dist --api-location ./api --env production --app-name $appName --resource-group $resourceGroup

    After the deployment is complete, you should see a project deployed to https://...azurestaticapps.net.

    Project deployment for the SWA.

  11. Set the environment variables for the Azure Static Web Apps configuration by using the variables that you already added to the script.

    az staticwebapp appsettings set --name $appName --setting-names CLIENT_ID=$clientId CLIENT_SECRET=$clientSecret ENVIRONMENT_URL=$env_url TENANT=$tenantId ENVIRONMENT_VERSION=$env_version

    Settings for the deployed SWA.

  12. Open the Azure portal and select the resource group you created to view the newly deployed Static Web App. You can select the app to view its details.

    View the deployed SWA.

    You can select Configuration from the left navigation pane to verify whether all the variables are correctly set.

  13. To open the Azure Static Web App and launch your Intelligent appointments self-service experience, select Overview on the left navigation pane, and then select URL.

    Open the deployed SWA.

    The following screenshot shows the Intelligent appointments page when you launch the app:

    View the Intelligent appointments page.

See also