Deploying Your JS Application to Azure Static Web Apps: Cost-Effective and Efficient

Introduction: – Deploying applications is a critical step in the world of web development to reach your audience. Azure Static Web Apps have become a viable alternative to Azure App Service, which has long been a popular option for hosting static websites, including React applications. In this blog article, we will go through the advantages of Azure Static Web Apps and show you how to deploy your React application quickly and affordably.

Benefits of Azure Static Web Apps:

Cost Savings: – One of Azure Static Web Apps’ main benefits is the cost savings it provides. Azure Static Web Apps use a serverless design as opposed to conventional Azure App Service plans, which demand computational resources. This results in huge cost reductions for static websites since you only pay for the resources you really use while using your application.

Easy Deployment and Scaling: – It’s simple to deploy your React application to Azure Static Web Apps. Every time you make a code change, a fresh build and deployment are automatically triggered by continuous deployment from your GitHub repository. You will save time and effort by doing away with manual deployments thanks to this simplified procedure. Additionally, without any additional configuration, Azure Static Web Apps dynamically adjust your application based on demand to guarantee top performance.

Global CDN and High Availability: – Azure Static Web Apps make use of the CDN to distribute your application’s static assets closer to users all around the world. As a result, loading times are quicker and the user experience is improved. Additionally, Azure Static Web Apps offer high availability via automatic failover and global redundancy to guarantee your application remains operational even during unplanned outages.

Seamless Integration with Azure Services: – The seamless integration of Azure Static Web Apps with other Azure services enables you to make use of extra features. For instance, you can quickly link Azure Storage to manage file uploads and downloads or connect your application to Azure Functions to build serverless APIs. These connectors give your React application greater functionality and let you create more complex solutions. This feature I will explain you in my upcoming blog.

In general Azure DevOps, we have two ways to write or create a pipeline to deploy your resources that is a classic interface and using YAML syntax. And People are facing challenges to deploy YAML syntax because developers are not familiar with the syntax of YAML statements. So I am taking an example of YAML code. If someone wants another example of a Classic interface. So please let me know by your comment. I am happy to write another example for the Classic interface pipeline. In this blog, I am deploying React Application, but you can deploy Angular/VU/Next JS or other static applications using the below steps. If you face challenges, then please let me know by a comment I will defiantly write you another blog.

Let’s deploy with below simple steps.

Before starting this here is a prerequisite that is mandated to run the pipeline.
- Prerequisite
  - The environment should be set up.
  - Should have an Azure account.
  - Should have an Azure subscription.
  - Should have Service principle/ Service connection.
  - Should have a Repository.

Step 1– Create an ARM template file to create static web app in your project.

{
  "$schema": "https://schema.management.azure.com/schemas/2019-04-01/deploymentTemplate.json#",
  "contentVersion": "1.0.0.0",
  "parameters": {},
  "variables": {
    "webAppName": "['labStaticWebApp']"
  },
  "resources": [
    {
      "type": "Microsoft.Web/staticSites",
      "apiVersion": "2021-01-15",
      "name": "[variables('webAppName')]",
      "location": "Central US",
      "tags": {
        "environment": "Production",
        "team": "aasim-labs",
        "staticwebapp": "react apps"
      },
      "sku": {
        "name": "Free",
        "tier": "Free"
      },
      "properties": {
        "repositoryUrl": "https://[email protected]/aasimkhan/AzureDevops/_git/AasimStaticApp",
        "branch": "main"
      }
    }
  ],
  "outputs": {
    "webAppName": {
      "type": "string",
      "value": "[variables('webAppName')]"
    },
    "deploymentToken": {
      "type": "string",
      "value": "[listSecrets(resourceId('Microsoft.Web/staticSites/', variables('webAppName')), '2021-01-15').properties.apiKey]"
    }
  }
}

Step 2 – Create a YAML file to deploy azure DevOps resource `static webApp`.


# Starter pipeline
# Start with a minimal pipeline that you can customize to build and deploy your code.
# Add steps that build, run tests, deploy, and more:
# https://aka.ms/yaml
trigger:
  - main #branch name
pool:
  vmImage: "ubuntu-latest" #image where you want to deploy.
variables:
  - name: resourceLocation
    value: "Central US" #You can pass any location whatever you are want.
jobs:
  - job: Build
    displayName: "Install npm packages and Build"
    workspace:
      clean: all
    steps:      
      - checkout: self
        submodules: true
      - script: npm ci #Command to install modules (npm packages from package.json)
        displayName: "Install Dependencies"
      - script: npm run build
        displayName: "Build"
  - deployment: DeployResources
    displayName: Deploy Static webApp resources.
    environment: Development #You can pass your env name. i.e. - Dev, Prod
    strategy:
      runOnce:
        deploy:
          steps:
            - checkout: self
              submodules: true
              # Azure resource group deployment v2 task. It provides to deploy arm template.
            - task: AzureResourceGroupDeployment@2
              displayName: Deploy react app into Static webApp
              inputs:
                 azureSubscription: SP-AasimReact #Define Azure Subscription name to authorize your pipeline.
                 resourceGroupName: AasimReact #Resourgroup name where you want to associate/deploy your resource (Static WebApp).
                 location: $(resourceLocation) #Define Resource Location.
                 csmFile: "static-web-app-deploy.json" #Arm template path. This json file will execute as template to create static web app. This file is resided parallel of azure-pipeline.yaml file.
                 deploymentOutputs: DeploymentOutputs #To return output as string.
              # Set job-scoped variables of all ARM template outputs.
              # Line 54- To display outputs (Optional) as logs during pipeline.
              # Set task variable in for each for all of outputs.
            - powershell: |
                Write-Host '$(DeploymentOutputs)'
                $outputs = ConvertFrom-Json '$(DeploymentOutputs)'
                $outputs.PSObject.Properties | ForEach-Object {
                    echo "##vso[task.setvariable variable=$($_.Name);isOutput=true]$($_.Value.value)"
                }
              name: deploymentOutputs
              displayName: "Set variables values: ARM Outputs"
            - task: AzureStaticWebApp@0
              displayName: Configure static webApp
              inputs:
                app_location: '/' #Default directory path where you content deployed.
                output_location: '/build' #Define output directory to server browser side.
                azure_static_web_apps_api_token: $(deploymentOutputs.deploymentToken) #Require passing deployment token for configuration. This token you will get during resource (static webApp) creation.

Step 3 – Push your code into your repos.

Step 4 – Now if your pipeline policy is not set as automated then you should trigger manual from pipeline tab in azure DevOps board.

Step 5 – Run your pipeline.

Step 6 – After running successfully your pipeline you can see deployed resources in Azure portal. So, login your Azure Portal and search `Static Web Apps` and select your resource. Below is screenshot to get the idea how it will look.

Step7 – From below URL you can see your hosted application that is built in frontend framework.

Conclusion:- An affordable and effective method for hosting static webpages is to deploy your React application to Azure Static Web Apps. You may enhance the speed, cut expenses, and concentrate more on creating outstanding user experiences by utilizing the server-less architecture, continuous deployment, global CDN, and easy integration with other Azure services. Why then wait? Try out Azure Static Web Apps to see the advantages for yourself.