Azure Static Web Apps
What’s new with General Availability
Did you know Azure Static Web Apps announced general availability 🎆in early May. Azure Static Web Site first introduces in May 2020 as a public preview.
As of the general availability product Azure Static Web Site bundle with enterprise-level SLA and new capabilities. Azure Static Web Site includes free and standard tiers for end users.
Outline 📜
What we cover from this blog.
- Introduction
- Key features of Azure Static Web Apps
- Use case — React + Azure Static Web App
Introduction 🙋♂️
Azure Static Web Sites enables to build of applications automatically and deployed to Azure from the code repository. Apps are builds and deployed based on the code changes. Each time you made a commit or accept a pull request to the watched branch build process runs and automatically deployed to Azure Web Apps.
Azure Static Web Apps are running as a serverless platform. We can deploy Azure Function Apps as a backend with the frontend with Static App. Static Web Apps are currently supported frontend libraries and framework such as Angular, React, Svelte, Vue, or Blazor
Key features of Azure Static Web Apps 📝
- Web hosting for static content like HTML, CSS, JavaScript, and images.
- Integrated API support provided by Azure Functions with the option to link an existing Azure Functions app using a standard account.
- First-class GitHub and Azure DevOps integration where repository changes trigger builds and deployments.
- 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, 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
Use case — React + Azure Static Web App 📈
For the use case for this article, we are going to look into deploying a React application to Azure Static Web Apps. So we are going to use VS Code for the deployment.
Before we start?
Following tools has to be with you before we begin
- VS Code
- Azure Account
- Sample React Application
- Azure Account extension and Azure Static Web Apps extension for VS Code
- GitHub repository for react application
Commit your code ✅
To get started first thing we need to do is commit your React code for GitHub or Azure DevOps repository. Then open the local copy with VS Code.
Install Required Extensions for VS Code 📲
For deployment of the application, we need two extensions to be installed to VS Code
- Azure Tools
- Azure Static Web Apps
Now all set up for deployment, before we go with deployment make sure you authenticate VS Code with Azure tenant.
Azure Static Web App App Deployment 🖥
The next step is to deploy the application via the Azure Static Web App extension. Navigate to Azure Account extension, where you can find Azure Static Web Apps.
To create a new app click the + icon
Then VS Code prompts you for giving a name for a Static Web App and select the frontend framework. After you completed this step VS Code adds a GitHub action and starts the action for deploying Web App into Azure Static Web Apps.
After the GitHub action completed successfully, the action output the URL for the application.
SSL and Custom Domain 🚫
Next, let's see how to bind a custom domain to our web app. The advantage of using Azure Static Web Apps is when binding custom domains we don't need to pay for the domain SSL. The SSL certificate is auto-provisioned from the platform and renewal also automated.
Under the custom domain, we can add our own domain for the web app. Azure provides us the CNAME record and we need to add a CNAME for our domain to access the web app.
The following tutorial will guide you through the features explained above.
Conclusion 🕵️♂️
The final verdict for the Azure Static Web Site is it's simply awesome. You can start the Static App in less than 10 min. Azure Static web App is a great use case for following
- Build modern web applications with JavaScript frameworks and libraries like Angular, React, Svelte, Vue, or using Blazor to create WebAssembly applications, with an Azure Functions back-end.
- Publish static sites with frameworks like Gatsby, Hugo, VuePress.
- Deploy web applications with frameworks like Next.js and Nuxt.js.
