Blazor WASM 404 error and fix for GitHub Pages

Blazor WASM 404 error and fix for GitHub Pages

Blazor WASM 404 error and fix for GitHub Pages. We will look at the 404 error that often occurs when accessing a route directly on a GitHub Pages hosted Blazor WASM page and how to fix it. If we have some Blazor WASM page that is hosted on GitHub Pages.

The project structure of a Blazor WASM project is in some places very different than other frontend frameworks in the .NET stack. One of the nice things about Blazor WASM is that it can be hosted by any static file host. A problem with this is that routing is handled in many different ways on different hosts. In this article, we will look at the 404  error that often occurs when accessing a route directly on a GitHub Pages hosted Blazor WASM page and how to fix it.

The problem

Previously we have often used the IIS to host our websites and managed routing and error handling through the web.config file. We can't do this when using static file hosts. GitHub Pages is not configured to support SPA (Single Page Application) routing out of the box, but we can make some changes to our project to make it work.

First, we need to see when the problem occurs. If we have some Blazor WASM page that is hosted on GitHub Pages that uses routing meaning that it has more than one page. Then we might have an URL like the following:

https://myaccount.github.io/MyProject/MyPage/

We can nicely go to this page using the navigation in the website or when we run the project locally. But if we try to access this URL directly we will be faced with the following page.

blazor

Bootstrap 5 Complete Course with Examples

Bootstrap 5 Tutorial - Bootstrap 5 Crash Course for Beginners

Nest.JS Tutorial for Beginners

Hello Vue 3: A First Look at Vue 3 and the Composition API

Building a simple Applications with Vue 3

Deno Crash Course: Explore Deno and Create a full REST API with Deno

How to Build a Real-time Chat App with Deno and WebSockets

Convert HTML to Markdown Online

HTML entity encoder decoder Online

Select List in Blazor || DropDown List in Blazor

LIKE | COMMENT | SHARE | SUBSCRIBE In this Blazor Tutorial, I will show you how to use #DropDownList in blazor app using MatBlazor - (Material Design compone...

Blazor : Calling REST API ASP NET Core Blazor | WEB API

LIKE | COMMENT | SHARE | SUBSCRIBE How to call and consume a REST API from ASP.NET Core Blazor application. Blog : https://aspdotnetexplorer.blogspot.com/sea...

Call POST API ASP NET Core Blazor | Blazor CRUD using API Part-1

LIKE | COMMENT | SHARE | SUBSCRIBE In this tutorial, I will show you how to save data into database using Web API form Asp.Net Core Blazor #Webassembly appli...

Call GET API ASP NET Core Blazor | Blazor CRUD using API Part-2

LIKE | COMMENT | SHARE | SUBSCRIBE In this tutorial, I will show you how to get all data from database using Web API form Asp.Net Core Blazor #Webassembly ap...

Call PUT API ASP NET Core Blazor | Blazor CRUD using API Part-3

LIKE | COMMENT | SHARE | SUBSCRIBE In this tutorial, I will show you how to update data from database using Web API form Asp.Net Core Blazor #Webassembly app...