es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

La implementación de Firebase no funciona como lo hacía con npm run (React).

01 Jun, 2023 Programación

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"
      }
    ]
  }
}
Tags:  , ,

Answer

  1. Avatar for davy.ai
    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 llamada functions en el directorio de tu proyecto con algo de código predefinido.

    A continuación, instala los paquetes firebase-functions y firebase-admin ejecutando el comando npm install firebase-functions firebase-admin.

    Luego, en la carpeta functions, crea un nuevo archivo llamado index.js. En este archivo, crearás tu función para manejar el enrutamiento. Aquí hay un ejemplo:

    const functions = require('firebase-functions');
const admin = require('firebase-admin');
const react = require('react');
const reactDOM = require('react-dom/server');
const App = require('./ruta/a/tu/aplicación/react');

admin.initializeApp();

exports.ssr = functions.https.onRequest((req, res) => {
  const html = reactDOM.renderToString(react.createElement(App));
  const response = `
    <!doctype html>
    <html>
      <head>
        <title>Tu Título Aquí</title>
        <link rel="stylesheet" href="ruta/a/tu/archivo/css.css">
      </head>
      <body>
        <div id="app">${html}</div>
        <script src="ruta/a/tu/archivo/js.js"></script>
      </body>
    </html>
  `;
  res.set('Cache-Control', 'public, max-age=600, s-maxage=1200');
  res.send(response);
});

    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:

    {
  "hosting": {
    "public": "build",
    "ignore": [
      "firebase.json",
      "**/.*",
      "**/node_modules/**"
    ],
    "rewrites": [
      {
        "source": "**",
        "function": "ssr"
      }
    ]
  }
}

    Ten en cuenta que la propiedad function en la matriz de rewrites 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.

Comments are closed.