Sube a Heroku proyecto de Express.js y TypeScript

Sube un proyecto de React y Express TypeScript a Heroku.

Denisse Avatar

Por:

Denisse Abreu
Julio 14, 2022 3pm ET

Eng/Spa 4-min

Hola 👋🏼 esta es la segunda parte de nuestro proyecto, Crea un proyecto React y Express js con TypeScript. En este tutorial, lo uniremos todo y subiremos el proyecto a Heroku. Asumiremos que tiene experiencia previa en el manejo de Heroku y el uso de comandos de Git. ¡Comencemos!

1. Configura React.

  • Usando la línea de comando o el Git Bash, vaya a la carpeta del cliente y ejecute: npm run build este comando compilará y minificará el código de React.
Terminal
cd client npm run build
  • Vaya a index.ts y cambie el 'get request'. Vamos a dirigir al servidor Express donde se encuentra la carpeta build de React.
index.ts
  • Usando la línea de comando, regrese al servidor, abra una nueva terminal y ejecute: npm run dev. Deberías ver en http://localhost:8000/ el formulario de inicio de sesión desde el servidor Express 👍.
Terminal
cd.. npm run dev

2. Configuración para producción y Git.

  • Antes de subir el proyecto a Heroku, debemos hacer algunos cambios. Primero, agregue a index.tx una declaración condicional para servir la carpeta de client en producción.
index.ts
  • En segundo lugar, vaya a client package.json y configure un proxy.
client/package.json
  • En tercer lugar, vaya a App.tsx, ubicado en la carpeta client, y cambie la función getData().
client/src/App.tsx
  • Cuarto, vaya a la raíz del proyecto y cree un archivo .gitignore.
.gitignore
/node_modules .env
  • Quinto, vaya al client .gitignore y elimine /build (necesitaremos la carpeta build en producción); puede agregar todos los archivos de desarrollo que quiera para evitar enviarlos a Heroku.
client/.gitignore
// delete /build // add tsconfig.json /public /src
  • Por último, ejecute npm run build en el servidor para aplicar todos los cambios nuevos e inicialice un repositorio git en la raíz del proyecto. Consulte la Guía de instalación de Git si no lo tienes en tu computadora.
Git Bash
$ npm run build $ git init $ git add . $ git commit -m "first commit"

3. Configuración de Heroku.

Abra una cuenta con Heroku; si no tienes una, es gratis, y tienen todas las herramientas que necesitas para tus proyectos de desarrollo. Siga la Guía de instalación de CLI de Heroku y siga las instrucciones de cómo implementar aplicaciones node js en Heroku. Cree un Procfile en la raíz del proyecto e inserte este comando web: npm start.

Git Bash
$ git add . $ git commit -m "Se agregó un Procfile." $ heroku login $ heroku create $ git push heroku main
  • Cuando Heroku finalice la compilación, devolverá la nueva URL de Heroku; visítelo y verifique que el formulario de inicio de sesión esté allí. La solicitud no funcionará hasta que agreguemos la nueva URL a la aplicación React.

Heroku CLI

  • Por último; cree un archivo .env.production en la raíz de la carpeta client, copie la ruta URL que Heroku asignó a su proyecto y péguela allí; inserte .env.production en el .gitignore, ejecute un npm run build nuevamente, commit los nuevos cambios a Git y envía todo a Heroku. Ahora, el sistema de inicio de sesión debería funcionar correctamente.
client/.env.production
Git Bash
$ cd client $ npm run build $ cd.. $ git add . $ git commit -m "Url agregado a .env.production." $ git push heroku main