Despliegue de API en Heroku con Express y TypeScript

¿Cómo preparar un proyecto de Express con TypeScript para producción?

Llevar un proyecto de desarrollo a producción es un hito emocionante que marca la culminación del esfuerzo y la dedicación de un equipo. En este artículo, vamos a guiarte a través de los pasos esenciales para preparar un proyecto de Express con TypeScript para su despliegue en producción, utilizando un servicio en la nube como Heroku.

¿Cómo configurar el proyecto para el despliegue?

Para comenzar, es esencial establecer algunas configuraciones clave en tu proyecto de Express que has creado con TypeScript. Asegúrate de seguir los siguientes pasos:

1. Configuración de variables de entorno y puerto predeterminado:

   • Reemplaza el puerto fijo en el código con una variable de entorno. Esto se realiza así:

     process.env.PORT || 3005
     

   Este cambio permite que la aplicación use un puerto proporcionado en entornos de producción mientras mantiene un valor por defecto para el desarrollo local.

2. Subir cambios a un repositorio remoto:

   • Utiliza los comandos de Git para agregar y confirmar tus cambios:

     git add .
     git commit -m "update port"
     git push origin <nombre-rama>
     

   Estos pasos asegurarán que todos los cambios recientes en el proyecto estén en tu repositorio de hosting antes de proceder al despliegue.

¿Cómo desplegar en Heroku?

Heroku es una plataforma popular para alojar aplicaciones web, y usarla es un proceso sencillo pero efectivo. Sigue estas recomendaciones para desplegar tu proyecto:

1. Creación de una cuenta y habilitación de la cuenta de pago:

   • Regístrate en Heroku. Nota: necesitarás una tarjeta de crédito para crear una cuenta completa incluso si planeas usar la capa gratuita. No te cobrarán sin tu consentimiento.

2. Creación de una aplicación en Heroku:

   • Dirígete al panel de Heroku y crea una nueva aplicación. Elige un nombre único y, en este caso, recomendamos incluir un identificador relevante como "platzi-store-ts".

3. Conectar el repositorio:

   • Puedes vincular directamente tu cuenta y repositorio de GitHub a Heroku para facilitar el proceso de despliegue.

4. Despliegue del proyecto:

   • Selecciona la rama adecuada desde donde deseas desplegar. Luego, simplemente despliega por primera vez y espera a que el servidor instale las dependencias y compile el proyecto.

¿Cómo verificar y conectar tu backend con el front?

Una vez que el despliegue haya finalizado, recibirás una URL que podrás usar para conectar tu API backend con tu frontend. Para verificar que todo funcione correctamente sigue estos pasos:

1. Verifica el acceso a la API:

   • Accede a la URL proporcionada por Heroku y asegúrate de que tu API esté funcionando esperando recibir un JSON como respuesta.

2. Actualizar el frontend:

   • Asegúrate de que tu frontend utilice la nueva URL del backend, permitiendo así que ambas partes de tu aplicación interactúen en producción.

3. Prueba de red (opcional):

   • Inspecciona el tráfico de red en el navegador para ver cómo se gestionan las solicitudes desde y hacia tu API.

Este proceso asegura que tu aplicación está lista para abrirse al mundo real y ofrece una experiencia fluida tanto para los desarrolladores como para los usuarios. Recuerda compartir tus logros y aprovechar las herramientas de Heroku para mantener tu aplicación actualizada y eficiente.