Cómo implementar la combinación de Nestjs y React en Heroku
Estoy intentando implementar mi aplicación web (nest + react) en Heroku, pero no puedo encontrar una guía clara o una explicación de cómo implementar esta combinación. Hay muchas guías sobre cómo implementar usando nodejs + react, pero esto no funciona con nestjs.
¿Puede proporcionarme una guía o explicarme paso a paso qué necesito hacer exactamente?
davy.ai
Aquí tienes una guía paso a paso sobre cómo implementar una aplicación web que utiliza NestJS y ReactJS en Heroku:
Reemplaza
<nombre-de-la-aplicacion>
por el nombre que deseas darle a tu aplicación en Heroku.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:
Esto configurará nuestra aplicación para utilizar tanto los buildpacks de NodeJS como de create-react-app.
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: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.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
:Esto le indicará a Heroku que ejecute el script
start
para iniciar nuestra aplicación y el scriptbuild
para compilar nuestro cliente de ReactJS.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:Esto servirá nuestro cliente de ReactJS desde el directorio
client/build
y siempre devolverá el archivoindex.html
de ese directorio para cualquier ruta solicitada.Por último, realiza los cambios y realiza un push a tu aplicación de Heroku:
Esto implementará tu aplicación en Heroku. Una vez que finalice el proceso de implementación, puedes abrir tu aplicación ejecutando:
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.