'Why does my blazor page result in 404 errors on github pages?

I'm trying to set up a Github Pages site for my Blazor project. Even with a brand new blazor project I have had no success. I consistently hit 404 errors with an unmodified new project, following the instructions people have given on this question.

You can find my current attempt at https://billybillyjim.github.io and the repro is at https://github.com/billybillyjim/billybillyjim.github.io

My current process has been this:

  1. Create a brand new Client-side Blazor page in Visual Studio 2019 Preview (3.0.100-preview6-012264).

  2. Go to Github Pages and create a repo named billybillyjim.github.io

  3. Clone the repo to a local folder using the Desktop Github app.

  4. Using the Publish option in the Build menu of VS2019 I select a folder profile.

  5. After a successful build I move the files created from the published folder to the repo folder.

  6. I commit and push to github.

  7. I add a .nojekyll file, and add the SPA javascript scripts to both a new 404.html and to the index.html.

Trying to load the page gives me a 404. "Failed to load resource: the server responded with a status of 404 ()" This error is for every dll file.

Things I have tried:

Putting everything in a folder, changing the base href in index.html, and setting the SPA script segmentCount to 1.

Removing underscores and updating the file references in index and the two blazor.js files.

Changing the href in index.html to to the repo name as described at the end of the instructions here.

I've compared my setup to the example page at https://github.com/blazor-demo/blazor-demo.github.io has a very similar setup to mine, but it's a year old and seems to use a very different set of dlls and a different blazor.js.

I am entirely new to web development, so I think it's very likely I am completely misunderstanding something simple.

c++sharphttp-status-code-404blazor


Solution 1:[1]

The two key things that got it working for me were:

  • providing a base path in the blazor index page
  • removing leading underscores from folders (e.g. the _framework and _bin folders).

Fixing the base path

You need to do this because the files in the Blazor app are referenced to the root of the site, and a GitHub Pages site has the name of you project as the first part of the path.

In the index.html change: <base href="/" /> to: <base href="/YOURPROJECTNAME/" />

This makes the browser add in your project name to the start of the path of any files it fetches.

If you are storing your Blazor app nested in another subdirectory, you'll also need to include that in the base path.

You can tell if this isn't working by looking at the dev tools of your browser and examining the paths of any 404s it's hitting.

Fixing the leading underscores

I had to:

  • Remove the underscores from the folders
  • Rename the references to _framework and _bin in index.html and framework\blazor.webassembly.js

Automating it

I used some PowerShell post-publish of the app to combine both of these steps: (Note that you'll need to set the <base> tag to the correct value for your project)

(Get-Content .\public\blazor-sample\index.html) `
    -replace '<base href="/" />', '<base href="/lifti/blazor-sample/" />' `
    -replace '_framework', 'framework' |
    Out-File .\public\blazor-sample\index.html

Rename-Item .\public\blazor-sample\_framework "framework"
Rename-Item .\public\blazor-sample\framework\_bin "bin"
(Get-Content .\public\blazor-sample\framework\blazor.webassembly.js) `
    -replace '_framework', 'framework' `
    -replace '_bin', 'bin' |
    Out-File .\public\blazor-sample\framework\blazor.webassembly.js

Solution 2:[2]

For anyone finding this post and having issues trying to work with Blazor in Azure Static Web Apps, try creating a fallback route as this seems to fix the 404 errors you get when doing a refresh or by typing in a route manually.

In the root of your project folder (typically where App.razor and Program.cs are located), create a new JSON file named staticwebapp.config.json and put something like the following in it:

{
  "navigationFallback": {
    "rewrite": "/index.html",
    "exclude": ["/images/*.{png,jpg,gif}", "/css/*"]
  }
}

Assuming you are using GitHub, don't forget to push your changes, wait for the CI/CD action to finish, and then test. You should now be able to refresh a page and type in routes manually.

See Configure Azure Static Web Apps for details about the file and what else it can do. More specific detail about the example above (and a detailed explanation of why it's needed) can be found in the Fallback Routes section of the same page.

Worth noting, this method did NOT require modifying the base href or removing any _'s from bin or framework folders. I tested using the base "Blazor WebAssembly App" template in Visual Studio 2022.

Solution 3:[3]

Hosting a Blazor app on Git pages is a pain. I tried multiple ways and it results in error somehow. However, if you are looking for a free limited deployment option for a Blazor app then you can try Firebase. You can refer to my article https://ankitsharmablogs.com/hosting-a-blazor-application-on-firebase/ for a step-by-step guide of hosting a Blazor app on Firebase.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Mike Goatly
Solution 2
Solution 3 Ankit Sharma

Related Questions