Mastering Azure Static Web Apps - Configuring with staticwebapp.config.json

Over three years ago, I transitioned from Wordpress to Jekyll, which is hosted on Azure Static Web Apps. Additional details about this migration can be found in a previous post. During that time, the routing was set up using the routes.json file. This was essential for tasks such as displaying a personalized 404 error page as opposed to the default Azure page.

However, this method has since been deprecated. The recommended approach now is to use the staticwebapp.config.json file for configuring the Azure Static Web App.

Setting Up a Custom 404 Page in Azure Static Web App

The staticwebapp.config.json file is a versatile tool that can be used for configuring routing, authentication, HTTP header definitions, and much more. Given the simplicity of my blog, my primary requirement is to direct traffic to my custom 404 error page in the event of an HTTP 404 response.

To achieve this, create a staticwebapp.config.json file in the root directory of your application and insert the following code:

The above code can be extended to handle additional error codes, such as HTTP 500 or 502, and display a custom error page for each HTTP error. Once the website is deployed, your custom error page should be visible in the event of an HTTP 404 error.

The custom error page is displayed

For a comprehensive list of use cases for the configuration file, refer to the Microsoft documentation.

Conclusion

In conclusion, the transition from using routes.json to staticwebapp.config.json for configuring Azure Static Web Apps is a significant yet necessary change. This shift not only aligns with current best practices but also offers greater flexibility and control over your application.

Whether it’s routing, authentication, or setting up custom error pages, the staticwebapp.config.json file is a powerful tool that can greatly enhance your web app’s functionality.