Blazor webassembly deploy to Github Pages not working with custom domain

November 25, 2024

I am trying to use Blazor webassembly and deploy the page to github pages. All is working fine, but as soon as I switch to a custom domain (dns done and works), the page shows me the blazor "An unhandled error has occurred. Reload 🗙" page.

Browser console has following errors:

Seems that as soon a public domain is used, it can’t find some files. For example:

Search in: https://hiptoken.com/Hiptoken/_framework/blazor.webassembly.js
Stored in: https://hiptoken.com/_framework/blazor.webassembly.js

Is there some routing issue? Any ideas? Thx

Github project ‘main’: https://github.com/vcarlucci/Hiptoken
Github pages branch linked to ‘gh-pages’

>Solution :

El problema que estás enfrentando al usar Blazor WebAssembly con GitHub Pages y un dominio personalizado es un error común relacionado con el enrutamiento y la configuración de las rutas base en aplicaciones alojadas en servidores estáticos como GitHub Pages. Aquí te dejo los pasos detallados para resolverlo:

1. Configura correctamente la ruta base (`<base href>`):

Cuando usas un dominio personalizado, debes asegurarte de que el atributo href en la etiqueta <base> de tu archivo wwwroot/index.html esté correctamente configurado.

En tu caso, si estás usando el dominio https://hiptoken.com, asegúrate de que el <base> sea:

<base href="/" />

Si tu aplicación estuviera en un subdirectorio como https://hiptoken.com/miapp, deberías usar:

<base href="/miapp/" />

Esto es esencial para que Blazor pueda encontrar correctamente los archivos estáticos y recursos necesarios.

2. Habilita redirección de rutas para aplicaciones SPA (Single Page Application):

GitHub Pages no soporta directamente el enrutamiento del lado del cliente (usado por Blazor WebAssembly). Necesitarás un archivo especial llamado 404.html que redirija todas las rutas no encontradas al archivo index.html. Esto se debe a que GitHub Pages devuelve un 404 para rutas que no coinciden con archivos reales en el repositorio.

Crea un archivo 404.html en el directorio raíz del repositorio y agrega lo siguiente:

<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="refresh" content="0; URL='./index.html'" />
  </head>
</html>

Esto redirige cualquier solicitud no encontrada a index.html, permitiendo que Blazor maneje el enrutamiento.

3. Revisa la configuración de los DNS y el dominio personalizado:

Verifica que tu dominio personalizado esté correctamente configurado en la configuración de GitHub Pages:

Ve a la configuración del repositorio (Settings > Pages).
Asegúrate de que tu dominio personalizado (hiptoken.com) esté configurado.
Habilita Enforce HTTPS si aún no lo está activado.

4. Regenera tu proyecto con los ajustes actualizados:

Si realizaste cambios al <base href>, asegúrate de reconstruir y desplegar nuevamente tu proyecto.

Ejecuta el comando para compilar tu proyecto en modo de lanzamiento:
```
dotnet publish -c Release
```
Sube los archivos generados en la carpeta wwwroot a la rama gh-pages de tu repositorio.

5. Prueba la aplicación en tu dominio personalizado:

Visita https://hiptoken.com y verifica si los errores se han solucionado.

Posibles Errores Adicionales:

Si después de los cambios sigues viendo errores en la consola, verifica las rutas de los archivos que no se encuentran. Si siguen apuntando a ubicaciones incorrectas, revisa nuevamente la configuración del <base href>.
También puedes limpiar la caché del navegador o probar en modo incógnito para asegurarte de que los cambios se reflejen.

Espero que estos pasos resuelvan tu problema. Si sigues enfrentando dificultades, comparte más detalles del error para poder ayudarte mejor. 😊

sI QUIERES MÁS AYUDA UNOS EXPERTOS DE DESARROLLO A MEDIDA PIUEDEN AYUDARTE