Creo que a muchos de nostros nos ha pasado que cuando publicamos una Static Web App en Azure parece que todo va bien hasta que, ZAS! accedes directamente a una URL que deberia de leer una variable de la url, o es una url de una ruta que si existe, pero nos da el error de 404: Not Found.
Bueno pues la explicación es muy simple, hay que configurar una dirección de navigationFallback que realice un rewrite y que lea siempre el archivo index.html. Ahora lo curioso es, si es tan necesario ¿porque no se configura por defecto al publicar? Bueno la respuesta a esta pregunta creo que se podria decir qeu es, porque VisualStudio no sabe si vas a publicar en una Static Web App o en otro lugar.
Como solucionar este "problemilla".
La solución a este problema pasa por agregar un archivo JSON de configuración en la raiz de nuestro proyecto. El archivo debe de llamarse staticwebapp.config.json y el contenido mínimo que debe de tener es el siguiente:
{
"navigationFallback": {
"rewrite": "/index.html",
"exclude": [ "/images/*.{png,jpg,gif}", "/css/*" ]
}
}
En lo personal yo suelo usar en el exclude que la carpeta de images sea como la del css es decir images/*" así si un dia pongo otra imagen o una subcarpeta lo coge todo dentro de las exclusiones.
Una vez que pondamos este archivo volvemos a publicar, o si lo estamos trabajando con un workflow the Github Actions pues hacer el comit y esperar a que termine.
Listo! ahroa nuestra Static Web App funciona correctamente.
Rutas adicionales
Si dispones de una API, por ejemplo, utilizando una Azure Fuction, puedes además configurar la ruta con accesso modificando el archivo de la siguiente forma.
{
"navigationFallback": {
"rewrite": "index.html",
"exclude": [ "/static/*", "/api/*", "/images/*.{png,jpg,gif}", "/css/*" ]
},
"routes": [
{
"route": "/api/*",
"allowedRoles": [ "anonymous" ]
}
]
}Conclusiones
Bueno hay muchas mas cosas para configurar, pero eso ya os lo dejo de tarea. Aqui toda la información oficial en este link.
Happy coding
Actualizado: 15 de Junio de 2024.