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.
![Not found Not found](https://aprende-a-programar.com/images/80818738765697303474718083672247878718181642898269867137878857175.jpg)
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.
![todo bien todo bien](https://aprende-a-programar.com/images/87606768476827854378897074702827073728480406667278758742385876775.jpg)
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.