Use a custom 404 page for Azure Static Web Apps

404’s on Azure Static Web Apps give an Azure branded page. Here’s how to change that behaviour and tell Azure to serve your custom 404.html.

Documented here is the staticwebapp.config.json file. Simply add this file to the root of your project (specifically, the “app location” directory you used when setting up your Azure static web app) and give it some JSON.

The below file will use the 404.html page found in your Azure “output location” directory (typically the root of your generated content)

{
  "responseOverrides": {
    "404": {
      "rewrite": "/404.html",
      "statusCode": 200
    }
  }
}

That’s it!