Azure Static Web Apps - first impression

An introduction to building globally scaled modern static web apps on Azure and how to publish existing javascript based web app to Azure Static Web Apps.

If you are developing modern web apps that are build using javascript or javascript based frameworks and uses client-side rendering using, and want to streamline the full-stack development from source code to global high availability, this article for you.

Keep reading, you will be amazed…

Azure static Web apps service (currently in preview) announced at Microsoft Build 2020 and is in public review as of May 2020

In this article:

• What is Azure Static Web Apps?
• What does Azure Static Web Apps provide out of the box?
• What are the current limitations (at the time of writing)?
• Deploying an existing static react app using to Azure Static Web Apps (this will guide you on how to migrate your existing react static app to Azure Static Web Apps)
• Conclusion
• References

So What is Azure Static Web Apps?

• A streamlined, highly efficient solution to take your static app from source code to global high availability.
• A service that integrates with GitHub (doesn’t support Azure DevOps at present) and automatically builds and deploys a full-stack web app to Azure.

What does Azure Static Web Apps provides out of the box?

All of the features listed below comes out of the box when you create Azure Static Web Apps resource in Azure, isn’t it amazing! 🤯

Free web hosting for static content

• Free web hosting for static content like HTML, CSS, JavaScript, and images.
• Integrated API support provided by Azure Functions.
• GitHub integration where repository changes trigger builds and deployments.
• Automatically creates a GitHub action workflow.
• Globally distributed static content, putting content closer to your users.
• Free SSL certificates, which are automatically renewed.
• Custom domains to provide branded customizations to your app.
• Seamless security model with a reverse-proxy when calling APIs, which requires no CORS configuration.
• Authentication provider integrations with Azure Active Directory, Facebook, Google, GitHub, and Twitter.
• Customizable authorization role definition and assignments.
• Back-end routing rules enabling full control over the content and routes you serve.
• Generated staging versions powered by pull requests enabling preview versions of your site before publishing.

What are the current limitations (as of May 2020)?

• Azure Static Web Apps service is currently only supports apps build with javascript based frameworks.
• Since it is in public preview and is free it has some limitations on bandwidth, app size, number of custom domains, etc. detail of which can be found here
• It does not integrate with Azure DevOps and only supports integration with GitHub at the moment.

Deploying an existing static react app using to Azure Static Web Apps

Let’s get into it.

Since we’re living in these unprecedented times of COVID-19 and working from the home era, I started learning React and built an app to track and provide live COVID-19 stats rolling updates.

So in this hands-on exercise we’ll be deploying my live Covid-19 stats react app using Azure Static Web Apps.

Here is the GitHub repo for live Covid-19 stats react app

Prerequisite

• App to deploy (GitHub link provided above)
• Visual Studio Code
• Azure Account, get one for free here

Create a repository

I have created a GitHub template repository for Live Covid-19 stats react app to make it easy for you to create a new repository in your GitHub account.

• Click here to create the Live Covid-19 stats react app repository using a template.

Prepare repository to be used with Azure Static Web Apps

Now that the repository is created, let’s open it in the Visual Studio Code and add a routes.json file in the public folder.

Our app relies on client-side routing for web app navigation. These client-side routing rules update the browser’s window location without making requests back to the server.

Add the following fallback route in routes.json file:

{
  "routes": [
    {
      "route": "/*",
      "serve": "/index.html",
      "statusCode": 200
    }
  ]
}

Push the code to your GitHub repository.

You can find more details on routes here however for the purpose of this article above routes setting are sufficient.

Create an Azure static web app resource

Now that the repository is created, you can create a static web app from the Azure portal.

• Navigate to the Azure portal
• Search for Static Web Apps
• Click Static Web Apps (Preview)
• Click Create
• Provide the information asked on the azure portal blade
• Connect to your GitHub account and select the repository created in previous steps.

• Click on Review + Create.
• Azure will run some check and if there is no error you should see the following:

• As soon as you hit Create, Azure will start deploying the Static Web app and you should see following on successful deployment:

• The above deployment would have created a GitHub actions workflow YAML file in the repository.
• We need to update the workflow YAML file to configure it to point to routes.json file we created earlier so pull the latest changes.
• Open the workflow YAML file and update as below:

  

• Push the changes to the remote master branch. (this will trigger a workflow on your GitHub repo)

GitHub Actions Build and View the website

• Once GitHub workflow (go to your GitHub repository’s actions tab) is successfully completed you should see following on its successful completion:

Now is the time we’ve been waiting for…

• Navigate to Static Web Apps resource’s overview page and click on the URL (see below)

And finally…

Navigate to the URL and you should see the following:

• A custom domain can be configured by navigating to following on you static web apps resource in Azure portal

If you’re still following and have completed the above steps - Well Done! 👏👏👏

Conclusion

The whole experience of building and deploying a static web app with global availability couldn’t get any simpler and easier.

Azure Static Web Apps is currently in public preview and FREE to use and based on announcements made during Microsoft Build 2020 there will be a free plan (which should be sufficient for most of us nerds 😅), however that may change in future as it becomes generally available.

I would definitely be using #AzureStaticWebApps going forward for my projects and would recommend you give it a go too.

Give it a go! It’s FREE…what do you got to lose? 😁

#MSBuild #Azure #StaticWebApps

References

• Azure Static Web Apps – App Service | Microsoft Azure
• Quotas in Azure Static Web Apps Preview | Microsoft Docs
• API support in Azure Static Web Apps with Azure Functions | Microsoft Docs
• Set up a custom domain in Azure Static Web Apps | Microsoft Docs
• Set up local development for Azure Static Web Apps | Microsoft Docs
• GitHub Actions workflows for Azure Static Web Apps Preview

Thanks for reading! 🎊 I hope you found it useful. Don’t hesitate to share, or post your thoughts in the comments section.

You can also reach out to me on my LinkedIn 🙏