Cómo implementar la combinación de Nestjs y React en Heroku

Answer

1. 

   davy.ai

   August 5, 2023 at 12:29 pm

   Aquí tienes una guía paso a paso sobre cómo implementar una aplicación web que utiliza NestJS y ReactJS en Heroku:

   1. Asegúrate de tener una cuenta de Heroku configurada y haber instalado la CLI de Heroku en tu máquina local.
   2. Crea una nueva aplicación en Heroku ejecutando el siguiente comando en tu terminal:

      heroku create <nombre-de-la-aplicacion>
      

      Reemplaza <nombre-de-la-aplicacion> por el nombre que deseas darle a tu aplicación en Heroku.

   3. A continuación, configura los buildpacks para tu aplicación. Dado que NestJS se basa en NodeJS, necesitaremos usar el buildpack de NodeJS y, como también estamos utilizando ReactJS, necesitaremos el buildpack de create-react-app. Ejecuta el siguiente comando en tu terminal:

      heroku buildpacks:set heroku/nodejs
      heroku buildpacks:add --index 1 heroku/create-react-app
      

      Esto configurará nuestra aplicación para utilizar tanto los buildpacks de NodeJS como de create-react-app.

   4. Ahora, necesitamos configurar nuestra aplicación para que se inicie correctamente cuando se implemente en Heroku. Necesitaremos crear un archivo Procfile en el directorio raíz de nuestro proyecto. Este archivo le indica a Heroku qué comando ejecutar para iniciar nuestra aplicación. Crea el archivo y agrega la siguiente línea:

      web: node server.js
      

      Esto asume que tu archivo principal de NestJS se llama server.js. Si se llama de otra manera, reemplaza el nombre del archivo en esta línea.

   5. Tenemos que asegurarnos de que Heroku sepa qué scripts ejecutar al implementar nuestra aplicación. Agrega la siguiente sección a tu archivo package.json:

      "scripts": {
       "start": "node server.js",
       "build": "cd client && npm install && npm run build"
      }
      

      Esto le indicará a Heroku que ejecute el script start para iniciar nuestra aplicación y el script build para compilar nuestro cliente de ReactJS.

   6. Necesitamos decirle a NestJS que sirva nuestro cliente de ReactJS cuando se solicite. En tu archivo principal de NestJS (por ejemplo, server.js), agrega el siguiente código:

      const express = require('express');
      const path = require('path');
      
      const app = express();
      
      app.use(express.static(path.join(__dirname, 'client/build')));
      
      app.get('*', function(req, res) {
       res.sendFile(path.join(__dirname, 'client/build', 'index.html'));
      });
      
      // Iniciar el servidor de NestJS
      app.listen(process.env.PORT || 5000);
      

      Esto servirá nuestro cliente de ReactJS desde el directorio client/build y siempre devolverá el archivo index.html de ese directorio para cualquier ruta solicitada.

   7. Por último, realiza los cambios y realiza un push a tu aplicación de Heroku:

      git add .
      git commit -m "Implementar en Heroku"
      git push heroku master
      

      Esto implementará tu aplicación en Heroku. Una vez que finalice el proceso de implementación, puedes abrir tu aplicación ejecutando:

      heroku open
      

      Esto abrirá tu aplicación en una nueva pestaña del navegador.

   ¡Eso es todo! Deberías tener ahora una aplicación web implementada que utiliza NestJS y ReactJS en Heroku.

Comments are closed.