Skip to main content

Azure Static Web App– Application configuration using staticwebapp.config.json

As a follow-up on the presentation I did at CloudBrew about Azure Static Web Apps I want to write a series of blog posts.

Before I continue with the authentication and authorization part, I want to take a side step into configuration. When talking about configuring a static web app, we have to make a difference between:

  • Application configuration: This allows us to configure the application behavior and features and is managed through  the staticwebapp.config.json file. Use this file to define route and security rules, custom headers, and networking settings.

  • Build configuration: Tweak the build process.

  • Application settings: Change application-level settings and environment variables that can be used by backend APIs.

Conceptually you can see an Azure Static Web App as a reverse proxy with behind it storage for your static content and an (optional) API. We can configure and tweak the rules of this reverse proxy through our staticwebapp.config.json file.

Azure Static Web App will look for this file in the folder set as the app_location or any subfolder. Additionally, if there is a build step(like for an Angular or React app), you must ensure that the build step outputs the file to the root of the output_location.

An example file looks like this:

You can configure a lot of settings in this file but I’ll focus on 2 specifically for this post:

  • "routes" - are an array of "route" objects that can each be associated with access rules ("allowedRoles"), actions ("redirect", "rewrite") - and request ("methods") and response ("headers","statusCode") properties.
  • "navigationFallback" supports applications that rely on client-side routing by providing a server-side fallback route which serves the required page, with filters to control usage.

I always start by configuring a navigationFallback. This guarantees that any URL that doesn’t match to a specific route rule can be handled. This is especially important when you are hosting an SPA and you want to redirect the user to the entrypoint of your SPA(typically an index.html file):

Another thing you’ll certainly use are the routes. Here we get a lot of power in our hands. For every route we can configure:

  • A route pattern: rule to check if a request matches the specified route, e.g. "/articles/*.html"
  • A list of AllowedRoles: defines an array of role names required to access a route. e.g. ["authenticated"]
  • A Rewrite property: defines the file or path returned from the request . The browser url doesn’t change and the URL is rewritten behind the scenes.
  • A Redirect property: defines the file or path returned from the request. The user is redirected to the target path using a 302 response.

Remark: There is a lot more we can configure, but I'll handle these settings when needed in a later post.

More information

Configure Azure Static Web Apps | Microsoft Learn

Configuration overview for Azure Static Web Apps | Microsoft Learn

Popular posts from this blog

DevToys–A swiss army knife for developers

As a developer there are a lot of small tasks you need to do as part of your coding, debugging and testing activities.  DevToys is an offline windows app that tries to help you with these tasks. Instead of using different websites you get a fully offline experience offering help for a large list of tasks. Many tools are available. Here is the current list: Converters JSON <> YAML Timestamp Number Base Cron Parser Encoders / Decoders HTML URL Base64 Text & Image GZip JWT Decoder Formatters JSON SQL XML Generators Hash (MD5, SHA1, SHA256, SHA512) UUID 1 and 4 Lorem Ipsum Checksum Text Escape / Unescape Inspector & Case Converter Regex Tester Text Comparer XML Validator Markdown Preview Graphic Color B

Help! I accidently enabled HSTS–on localhost

I ran into an issue after accidently enabling HSTS for a website on localhost. This was not an issue for the original website that was running in IIS and had a certificate configured. But when I tried to run an Angular app a little bit later on http://localhost:4200 the browser redirected me immediately to https://localhost . Whoops! That was not what I wanted in this case. To fix it, you need to go the network settings of your browser, there are available at: chrome://net-internals/#hsts edge://net-internals/#hsts brave://net-internals/#hsts Enter ‘localhost’ in the domain textbox under the Delete domain security policies section and hit Delete . That should do the trick…

Azure DevOps/ GitHub emoji

I’m really bad at remembering emoji’s. So here is cheat sheet with all emoji’s that can be used in tools that support the github emoji markdown markup: All credits go to rcaviers who created this list.