Configure Custom 404 Not Found Page With Azure Static Web Apps

When managing a website, it’s crucial to ensure a seamless user experience, even when things go wrong. One common scenario is the 404 Not Found error when a visitor tries to access a page that doesn’t exist. Instead of having your visitor see the default Azure Static Web App “not found” page, you can configure a custom 404 page that keeps visitor engaged and guides them back to the main content of your site. This article, shows the steps and configurations necessary to configure a custom 404 page for an Azure Static Web Apps hosted website.

Configuring a Custom 404 Page in Azure Static Web Apps

Azure Static Web Apps offer a straightforward way to host static sites with global distribution. Configuring a custom 404 page involves creating a configuration file named staticwebapp.config.json in your project root. This file tells Azure how to handle various responses, including 404 errors.

Step 1: Create your custom 404 page

Design an HTML page (404.html) that provides a user-friendly message and links back to your main content. The, save this file in the root of your project.

Here’s some sample content for 404.html page:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Page Not Found</title>
    <style>
        body { font-family: Arial, sans-serif; text-align: center; padding: 50px; }
        h1 { font-size: 50px; }
        p { font-size: 20px; }
        a { text-decoration: none; color: #007BFF; }
    </style>
</head>
<body>
    <h1>Oops! Page Not Found</h1>
    <p>We can't seem to find the page you're looking for.</p>
    <p><a href="/">Go back to Home</a></p>
</body>
</html>

Step 2: Create the `staticwebapp.config.json` file

In the root of your project, create a file named staticwebapp.config.json. This fill is used to set configurations for the Azure Static Web App. When the static website is deployed, the service will read this file for those configurations.

To configure a custom 404 page, add a responseOverrides node to the file with an element named 404 that has a rewrite property set to your custom 404 page to use.

Here’s an example staticwebapp.config.json file with only the custom 404 page configured:

{
  "responseOverrides": {
    "404": {
      "rewrite": "/404.html"
    }
  }
}

Keep in mine, there are additional configurations supported within this file. If you only have a custom 404 page configured, your staticwebapp.config.json file will look like this. If you have additional configurations in an existing website, then you’ll add this 404 element for the responseOverrides node to the existing configuration file.

Here’s an example staticwebapp.config.json file with additional configurations, just to give you an idea of what this file might look like with other configurations included:

{
  "routes": [
    {
      "route": "/specials",
      "redirect": "/deals",
      "statusCode": 301
    }
  ],
  "navigationFallback": {
    "rewrite": "index.html",
    "exclude": ["/images/*.{png,jpg,gif}", "/css/*"]
  },
  "responseOverrides": {
    "404": {
      "rewrite": "/404.html"
    }
  }
}

Step 3: Your Custom 404 Page Is Configured!

Congratulations! Your custom 404 page will now be configured to be sent in response to files that don’t exist in your website. Try navigating to a non-existent page on your website and you’ll see the server returns the contents of your custom 404 page along with an HTTP 404 response.

Why Custom 404 Pages Matter

A custom 404 page serves several purposes:

User Experience: It provides a friendly and informative message, reducing frustration for visitors.
Brand Consistency: A custom page can match the look and feel of your site, reinforcing your brand.
Navigation: It can include links to important parts of your site, helping users find what they’re looking for.
SEO: A well-designed 404 page can help maintain your site’s search engine ranking by guiding users to relevant content.

Conclusion

Configuring a custom 404 page for your Azure Static Web App is an effective way to improve user experience and maintain brand consistency on your website. By configuring a custom 404 page, you can ensure that even when users encounter broken or dead links on your website, they are greeted with a helpful and aesthetically pleasing page that keeps them engaged with your site.

Original Article Source: Configure Custom 404 Not Found Page with Azure Static Web Apps written by Chris Pietschmann (If you're reading this somewhere other than Build5Nines.com, it was republished without permission.)