Getting Started with Azure Static Web Apps (SWA) – Blog

Nowadays, more and more applications are built on front-end frameworks like Angular or React, or VueJS, where, a lot of work that will take place on the server side has now moved to the browser. These applications need different hosting capabilities than your regular ASP.NET or Express.js applications. We need to submit static files quickly and ideally. Distribute static content around the world, super close to users, as they try to access the app to load quickly.

Azure Static Webapps is the service built for this type of application. At its core, Azure Static web applications make it easy to transfer code from your local computer to a source control repository like GitHub or Azure DevOps. Whenever you push a repo commitment, we will automatically build and deploy your app to Azure. All static content will be distributed globally automatically. In case of back logic, you can create a server-free API using Azure Functions as an option. You can control the function app originally in the same repository as the rest of your web app. You can build and deploy them for the entire app as a single unit. Check out Microsoft Azure training for more details..

Azure Static Webapps are shipped with a CLI that helps communicate between the front frame and the back functions app locally because they are legally at two different endpoints.

You can install CLI from NPM https://www.npmjs.com/package/@azure/static-web-apps-cli


After installing the CLI, you can use the command prompt below


Features of static web applications:

  • Integration with authentication providers – Twitter, GitHub, Azure Active Directory
  • Custom Domains – Ability to configure custom domains
  • Web Hosting – Manage your app so you don’t have to worry about infrastructure
  • Global Distribution – Your content is on multiple servers around the world, so the one closest to your user will be the one that provides it, making it the fastest for each of your users
  • Integration with GitHub and Azure DevOps – Manage and understand your Pull request that triggers an automatic Azure deployment workflow
  • API integration – Azure Functions provides the ability to connect with your existing Azure functions.
  • Free SSL Certificates – Azure provides free SSL certificates for your custom domain.
  • Rear routing – You can set rules for more than one track in your static web app. Rear routing rules allow you to restrict access to users in specific roles or perform actions such as redirection or rewriting.

Hosting Plans

attribute Free program Standard plan
Pricing free $ 9 per app per month
Custom domains 2 5
SSL certificates free free
Azure functions managed Managed / bring your own
Custom authentication No Yes
SLA No Yes

Create your first web app (Azure Static)

There are several paths to creating the Azure Static Web application.

  • Using Visual Studio code
  • Using the Azure Portal
  • Using the Azure CLI

First, let’s see how to create using Visual Studio Code

Level 1: Make sure you are connected to Visual Studio code with your Azure subscription.

level2: In VS Code, click the Azure logo on the left sidebar to open the Azure Extension window as shown below
Azure Azure

Step 3: Select> Static Web Applications

Step 4: Select + Sign


Step 5: Create an existing code / clone from the GitHub or Azure DevOps code repository


Make sure you are logged in to your GitHub account from your Visual Studio code

Create a Git repository on your local drive using the git like command

Create two folders as below

Now in Visual Studio Code, type a shortcut Ctrl + Shift + P, Which will open the command panel


Start typing Azure Static Web Apps: Create a static web app


It will ask you to enter your application name




For example, I chose Angular



If you choose to duplicate a project from an existing GitHub


The code will then be opened from your local code repository as below


where API The folder will have Azure and src There will be a frontal frame like React, Angular or VueJS

Authenticate users with your first Azure Static Web App

Authentication is the best way to authenticate and identify a user trying to access the system.

Azure static web applications manage authentication, and verify the identity of the user out of the box. You have access to predefined authentication providers (series) or the option to register a custom provider. Pre-defined ones include Azure Active Directory, GitHub, Twitter

To implement full authentication workflow in a static web application. We can use a set of system endpoints that will allow us to add functionality such as login, login and retrieval, and authentication related to user information.

Predefined identity provider Entrance route
Azure Active Directory /.auth/login/aad
GitHub /.auth/login/github
Twitter /.auth/login/twitter

To get login status information, use this query /.auth/me in our client application

To log out of the current user /.auth/logout?post_logout_redirect_uri={redirect}

All authentication providers are enabled by default. We can add rules to the routing configuration file to restrict an authentication provider.

To write rules for the routing configuration file, we need staticwebapp.config.json. Typically, it is available in the folder we define as the location of the app.

Suppose we want to disable the GitHub authentication provider, then the configuration looks like this


To restrict access to a specific API, the configuration looks like this


Things to keep in mind before publishing a SWA

Azure Static Web Apps (SWA) are designed to host applications where the source code is in GitHub. When you create a static web application, log in to GitHub and specify the repository that contains your application code.

Required Place Description
Yes The location of the app / Location source code of your web app
No Application location of application construction dist Position the output of your app build relative to your app
No API location API Location of the API source code

You may eventually see a 404 error while refreshing your page. The browser sends a request to the storage platform to server the page since there is no page on the server to run.

We can solve this problem quickly by creating a spare path.

An alternate path fits all page requests without server compatibility.

SWA supports custom routing defined in the file staticwebapp.config.json And expects Be in output_location by default. You can also configure your app to use rules that embed alternative routing as below


This rule instructs the SWA to serve the index.html when no resource request was found.

You can also use a wildcard filter.

Excludes CSS and IMAGES as shown in Exclusion.


This way, you only have one version of your code base and you can easily track changes. You can change the code in your functions app, and it will be automatically deployed to the same endpoint as your web app. You can use any language or framework in your functions app. This is a perfect way to build small utilities or side projects without the complexity of setting up a full-stack web app. This will help keep your construction, layout and source control clean and simple. No longer wondering what code went on the air and when. You can use the webhooks feature to pull data from endpoints of webhooks and enable data updates in your app. This will make the construction and deployment process even more automated in your app. Azure Static Web Apps are a useful tool for developers, and it is helpful to get code from Azure in minutes.

About the writer

Forna Chandra Ravi, Senior Solutions Architect, Jade

Poorna Chandra Ravi is a senior application architect for solutions development. He has led Microsoft solutions for various clients, including projects related to the development of applications related to .Net and Azure. Senior Solutions Architect with 12 years of experience in software development with quality and innovative ideas. Expertise in .Net, Azure DevOps, Web Development, Architecture.

Getting Started with Azure Static Web Apps (SWA) – Blog Source link Getting Started with Azure Static Web Apps (SWA) – Blog

Related Articles

Back to top button