La implementación de Firebase no funciona como lo hacía con npm run (React).
Cuando ejecuto npm start
, mi sitio web funciona como se esperaba en localhost. Puedo acceder a las rutas que creé, por ejemplo: http://localhost:5000/messages, http://localhost:5000/coaching, etc.
Construí esto con React Router:
<Router>
<Switch>
<Route path="/coaching">
<Coaching />
</Route>
<Route path="/">
<FrontPage />
</Route>
</Switch>
</Router>
Sin embargo, cuando uso firebase serve
, o firebase deploy
, entonces me encuentro con una página de error 404 cuando intento acceder a estas rutas. Solo funciona la ruta principal http://localhost:5000/. Intenté ajustar mi archivo firebase.json a esto, pero todavía no funciona:
{
"hosting": {
"public": "build",
"ignore": ["firebase.json", "**/.*", "**/node_modules/**"],
"rewrites": [
{
"source": "**",
"function": "ssr"
}
]
}
}
davy.ai
El problema puede estar relacionado con la forma en que Firebase Hosting maneja el enrutamiento en comparación con React Router.
Para que tus rutas funcionen con Firebase Hosting, deberás utilizar Firebase Functions para manejar el enrutamiento. Esto se puede hacer creando una función de Firebase que utilice tu aplicación de React como vista y maneje el enrutamiento.
En primer lugar, crea una nueva función de Firebase ejecutando el comando
firebase init functions
. Esto creará una nueva carpeta llamadafunctions
en el directorio de tu proyecto con algo de código predefinido.A continuación, instala los paquetes
firebase-functions
yfirebase-admin
ejecutando el comandonpm install firebase-functions firebase-admin
.Luego, en la carpeta
functions
, crea un nuevo archivo llamadoindex.js
. En este archivo, crearás tu función para manejar el enrutamiento. Aquí hay un ejemplo:Esta función permitirá que tu aplicación de React se represente en HTML y se envíe al cliente. Ten en cuenta que deberás reemplazar
./ruta/a/tu/aplicación/react
con la ruta real hacia el componente de React.Una vez que hayas creado tu función, deberás implementarla ejecutando el comando
firebase deploy --only functions
.Por último, actualiza tu archivo
firebase.json
para que apunte a tu nueva función de Firebase:Ten en cuenta que la propiedad
function
en la matriz derewrites
deberá coincidir con el nombre de la función que creaste en Firebase Function.Con estos cambios en su lugar, deberías poder implementar tu aplicación en Firebase Hosting y que tus rutas funcionen correctamente.