0

quiero subir una aplicación con backend en nodejs y frontend en react sin crear 2 proyectos en heroku.

Los directorios de mi aplicación están así:

  • Mi Aplicación

    • app - "Esta carpeta contiene el frontend creado con create-react-app"
    • routes
    • server.js

Quiero que al abrir la aplicación de heroku se muestre el frontend pero tambien este sirviendo datos la api del backend.

¿Es posible hacer esto?

1 respuesta 1

3

Claro que puedes integrar el "frontend" y el "backend" dentro de un mismo proyecto, dado al final el "frontend" se terminará sirviendo a través de un servidor http (backend).

Para explicar esto me basaré en el framework de Express en el backend, ya que no lo mencionas.

Solo hay que hacer build del proyecto (npm run build), lo cual nos generará el código de producción en una carpeta llamada dist, re-nombraremos esa carpeta a public y configuraremos el servidor para que tome esa carpeta como un directorio de archivos estáticos, para lo cual utilizaremos la función de express “static”.

Solo te recomendaría que definas las rutas de tu servidor iniciando con '/api/' para no confundirlas con alguna ruta de archivos estáticos, por ejemplo: 'http://.../api/users'.

Tomando en cuenta lo anterior tu archivo “server.js” deberá lucir como el siguiente código:

/**
 * REST API
 */

// Dependecies
const express = require('express');
const path = require('path');
const history = require('connect-history-api-fallback');

// Initialize http server
const app = express();

// Middleware
app.use(history()); // Colocamos este middleware cuando estamos usando el BrowserRouter
app.use('/', express.static(path.join(__dirname, '/public/')));

// Routes

// test route
app.get('/api/test', (req, res, next) => {
  try {
    res.status(200).send('hello world');
  } catch (err) {
    next(err);
  }
});

// start the server
app.listen(process.env.PORT || 3000, () => {
  console.log('server on port', process.env.PORT || 3000);
});
2
  • Si utilizara React para el Frontend, ¿También serviría?, porque que yo sepa React requiere también de ejecutarse por un servidor, no se si en react funcionaria simplemente metiendo los archivos de producción a la carpeta de archivos estáticos. Commented el 9 feb. 2022 a las 18:24
  • Que tal @YahirAntonio, sí funcionaría, si no estás usando características de pre-rendering, tu código de react no se ejecuta en el servidor. Solo hay que hacer el build de tu proyecto y servirlo como archivos estáticos (carpeta dist usualmente). Hay un punto a cuidar, y es el tipo de router que utilizas, si usas el hash router no necesitas hacer nada, pero si usas el browser router tendrías que usar un middleware llamado connect-history-api-fallback o algo similar. Commented el 10 feb. 2022 a las 19:44

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.