How to Redirect with Azure Static Web Apps

August 11, 2020

TLDR; Look at the source code

While on stream one afternoon, I was working on a solution for moving a Wordpress site to Gridsome, with the goal of deploying to Azure Static Web Apps. However, I hit a wall that I needed to overcome.

Gridsome URLs take a format like https://consultwithgriff.com/{something} and the {something} points directly to a folder on the filesystem. That is how all the URLs in the system work.

I needed to build a URL that had an extensions, like https://consultwithgriff.com/{something} but returned a content type of XML. If I were to have an extensions of .xml this would've worked fine.

So I needed to figure out how to redirect from {something} to {something}.xml which existed in my static content folder.

And with it being a static web app, there is no server component for me to add a redirection too. So....

How do you do redirects in Azure Static Web Apps?

Turns out, the awesome team behind Azure Static Web Apps thought about this and built a mechanism for doing server-side redirects.

To get started, you'll want to create a new file called routes.json. This file needs to exist AT PUBLISH time in the root of your build directory.

In other words, if you commit your changes to GitHub and Azure Static Web Apps kicks in. It'll start the appropriate GitHub Action to build your app. At the end of the process, your "build" directory (or "dist" or whatever) will be copied off of disk into Azure. Make sure routes.json is sitting in that build directory at the end of the process. In Gridsome, this is done via the "static" directory which copies everything into the build directory at the end of the process. Most other static site generators have a process for this too.

{
    "routes": [
        {
            "route": "/routeTypedIntoBrowser",
            "serve": "/redirectToMe",
            "statusCode": 301
        }
    ]
}

The routes.json does a lot more than just redirects, but for today let's just look at the routes section. Notice it's an array of objects. If you want to set up a redirect, create an entry with the "route" that someone would type into the browser, and then Azure Static Web Apps will "serve" up the url or path you define. Lastly, make sure your status code is 301 or 302 so the browser (or HTTP client) can take appropriate action.

Free ebook: 10 Tricks to Supercharge Your ASP.NET Core Applications

I'm hard at work on a new FREE ebook to help you supercharge your ASP.NET Core applications. Join the list today, and I'll send you the chapters as they're done!

Let's see it in action

I currently have a Sample Application running in Azure Static Web Apps. It is currently deployed to https://kind-island-03cd0d80f.azurestaticapps.net/.

Sample request

Try this:

Go to https://kind-island-03cd0d80f.azurestaticapps.net/redirectToAboutPage and it should redirect you automatically to the default Gridsome about page.

It's that simple!

Let me know your thoughts below. If you have questions that aren't answered by this article, please let me know those as well.