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.

No encontrado – problema en la implementación de la aplicación React en Heroku

01 Aug, 2023 Programación

Tengo una aplicación TypeScript React en la carpeta “frontend” con la carpeta “build” lista después de ejecutar “npm run build” dentro de la carpeta “frontend”, y una carpeta “backend” que tiene “server.js” que tiene el siguiente código.

import express from 'express';
import path from 'path';

const app = express();

const dirname = path.resolve();
if (process.env.NODE_ENV === 'production') {
  app.use(express.static(path.join(dirname, '/frontend/build')));
  app.get('*', (req, res) => {
    res.sendFile(path.resolve(dirname, 'frontend', 'build', 'index.html'));
  });
}

const PORT = process.env.PORT || 5000;

app.listen(PORT, () => console.log(`Servidor funcionando en el puerto ${PORT}`));

En la carpeta raíz que contiene las carpetas “frontend” y “backend”, tengo un archivo “.env” que tiene “NODE_ENV = production” y “Procfile” que tiene “web: node backend/server.js”. Además, en la carpeta raíz, tengo un archivo “package.json” que tiene el script “start”: “node backend/server”.

Con todo esto, sigo los siguientes pasos en mi terminal para implementar mi aplicación en Heroku:
– Ingreso a Heroku con el comando “heroku login”.
– Creo una nueva aplicación en Heroku con el comando “heroku create my-app”. En este punto, ingreso la variable de entorno “NODE_ENV” en Heroku y la establezco en “production”.
– Ingreso el comando “heroku git:remote -a my-app”.
– Y finalmente, ingreso el comando “git push heroku master”.

El proceso de implementación no muestra errores, pero cuando abro mi aplicación, muestra “No encontrado” en la página.

Llevo intentando durante 3 días implementar mi aplicación sin éxito. Agradezco cualquier ayuda para implementar la aplicación en Heroku.

Tags:  , , ,

Answer

  1. Avatar for davy.ai
    davy.ai

    Solución

    Basado en el código y la información proporcionada, parece que el problema radica en la ruta utilizada en el método app.use() del archivo server.js.

    En lugar de usar path.join(__dirname, '/frontend/build'), debería ser path.join(__dirname, '../frontend/build') para señalar correctamente a la carpeta de compilación en el directorio frontend.

    El código actualizado debería lucir así:

    import express from 'express';
import path from 'path';

const app = express();

const __dirname = path.resolve();
if (process.env.NODE_ENV === 'production') {
  app.use(express.static(path.join(__dirname, '../frontend/build')));
  app.get('*', (req, res) => {
    res.sendFile(path.resolve(__dirname, 'frontend', 'build', 'index.html'));
  });
}

const PORT = process.env.PORT || 5000;

app.listen(PORT, () => console.log(`Servidor en ejecución en el puerto ${PORT}`));

    Una vez realizado este cambio, puedes seguir el mismo proceso de implementación que antes:

    • Iniciar sesión en Heroku utilizando heroku login
    • Crear una nueva aplicación en Heroku utilizando heroku create my-app. En este punto, establece la variable de entorno NODE_ENV en Heroku y configúrala en production.
    • Ingresar heroku git:remote -a my-app
    • Y finalmente git push heroku master

    Esto debería implementar correctamente tu aplicación en Heroku sin errores.

Comments are closed.