Sube un proyecto de React y Express TypeScript a Heroku.

Por:

Denisse Abreu
Julio 14, 2022 3pm ET

Eng/Spa 4-min

# Crea la carpeta Build de React # Prepare React para producción e inicialize Git # Prepare React para Heroku

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. Crea la carpeta Build de 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. Prepare React para producción e inicialize 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. Prepare React para Heroku.

Abra una cuenta con Heroku; si no tienes una, tienen todas las herramientas que necesitas para tus proyectos en producción. Tenga en cuenta que a partir del 28 de noviembre de 2022, Heroku no tendrá planes gratuitos, pero tiene planes de bajo costo para quienes comienzan en el desarrollo web. 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