javascript

Publicar app de Node.js en Heroku

En este artículo vas a aprender cómo subir tu aplicación web de Node.js en Heroku, sin importar el framework que uses (por ejemplo, express) de manera fácil, rápida y gratuita.

Recuerda que para publicar tu app de Node en Heroku debes tener una cuenta de Heroku (no importa si es gratuita) e instalar la CLI de Heroku.

También debes contar con Git, si no lo tienes, mira cómo comenzar con GitHub desktop.

¿Qué vamos a hacer?

Te voy a mostrar un ejemplo para publicar una app de Node.js a la nube en Heroku. En concreto, usaré una app de demostración de express que publiqué hace tiempo.

En resumen es:

  • Instalar CLI de heroku
  • Agregar git a tu proyecto (o clonarlo si ya lo usas)
  • Usar heroku login para iniciar sesión
  • Ejecutar heroku create nombre_de_app dentro de tu proyecto
  • Crear Procfile y ajustar puerto en caso de que tu app sea web
  • Ejecutar git push heroku master
  • Probar tu app web

Login en Heroku

Una vez que tengas la CLI de heroku ejecuta:

heroku login

Iniciar sesión en Heroku desde la cli de Heroku

Inicia sesión en el navegador, autoriza la app y listo.

Preparar proyecto

Tu proyecto debe ser un proyecto de Git, ya mencioné que puedes usar Github desktop. Si sabes usar la línea de comandos de git también es válido, el punto es que tu proyecto debe usar git.

Abre la línea de comandos y navega a tu proyecto (cd nombre_de_proyecto), después ejecuta:

heroku create nombre-de-tu-app

Eso modificará el repositorio de git para que luego lo puedas publicar en Heroku.

Por otro lado, en tu app debe estar definido el package.json pues Heroku leerá las dependencias del mismo e instalará los módulos por ti.

Ahora necesitamos dos cosas:

  • El Procfile
  • Ajustar el puerto, en caso de que tu app sea una app web

Procfile en node

Este archivo indica cómo se va a ejecutar tu app de Node en Heroku. Cuando desarrollamos localmente probablemente escribimos:

node index.js

Exactamente eso debemos indicar en el Procfile, así:

web: node index.js

Como puedes ver, es un archivo sin extensión. Indica que el tipo de proceso es web, y para ejecutarse debe invocar a node index.js

Haz commit de este archivo como normalmente lo haces.

Ajustar puerto

En Heroku no vamos a tener cualquier puerto disponible, pues lo provee, digamos, el sistema. El puerto estará en process.env.PORT así que si tenemos un código algo así:

const express = require("express"),
    path = require("path"),
    app = express(),
    puerto = 3000; // <-- este es el puerto local

Debemos cambiarlo para que, si está definido el puerto en el entorno, use ese en su lugar. Así:

const express = require("express"),
    path = require("path"),
    app = express(),
    puerto = process.env.PORT || 3000; // Si está definido en el entorno, usarlo. Si no, el 3000

Fue un ejemplo, en tu código puedes definir el puerto en otro lugar, pero así es en el mío.

También haz commit de este cambio, es decir, tu flujo de trabajo no va a cambiar, sigue subiendo tus cambios.

Ahora sí, publicar

Cuando hayas hecho commit y todo esté listo, ejecuta:

git push heroku master

Estamos subiendo nuestros cambios a la rama master de heroku. Verás algo así:

Y al final te dará la URL de tu proyecto:

Localizar web en donde está la app de Heroku

La cual puedes visitar y estará lista para lo que quieras:

Actualizar app

Si después haces cambios en tu aplicación, haz lo siguiente:

  1. Cambia el código, plantilla, archivo necesario
  2. Haz commit y sube tus cambios a GitHub como normalmente se hace
  3. Después ejecuta (dentro del directorio de tu app) git push heroku master y tu app será desplegada

Conclusión y notas finales

De este modo puedes subir tus apps de Node y Express (u otro framework) a la nube de manera gratuita y fácil. Recuerda que el plan gratuito tiene sus restricciones pero de eso no vamos a hablar aquí.

Por cierto, por ahora vimos cómo hacerlo sin base de datos, en el futuro espero escribir sobre cómo usar las bases de datos de Heroku.

Mira el código del proyecto en mi GitHub. Aprende en mi blog más cosas sobre JavaScript en general

Estoy aquí para ayudarte 🤝💻


Estoy aquí para ayudarte en todo lo que necesites. Si requieres alguna modificación en lo presentado en este post, deseas asistencia con tu tarea, proyecto o precisas desarrollar un software a medida, no dudes en contactarme. Estoy comprometido a brindarte el apoyo necesario para que logres tus objetivos. Mi correo es parzibyte(arroba)gmail.com, estoy como@parzibyte en Telegram o en mi página de contacto

No te pierdas ninguno de mis posts 🚀🔔

Suscríbete a mi canal de Telegram para recibir una notificación cuando escriba un nuevo tutorial de programación.
parzibyte

Programador freelancer listo para trabajar contigo. Aplicaciones web, móviles y de escritorio. PHP, Java, Go, Python, JavaScript, Kotlin y más :) https://parzibyte.me/blog/software-creado-por-parzibyte/

Entradas recientes

Creador de credenciales web – Aplicación gratuita

Hoy te voy a presentar un creador de credenciales que acabo de programar y que…

17 horas hace

Desplegar PWA creada con Vue 3, Vite y SQLite3 en Apache

Ya te enseñé cómo convertir una aplicación web de Vue 3 en una PWA. Al…

1 semana hace

Arquitectura para wasm con Go, Vue 3, Pinia y Vite

En este artículo voy a documentar la arquitectura que yo utilizo al trabajar con WebAssembly…

1 semana hace

Vue 3 y Vite: crear PWA (Progressive Web App)

En un artículo anterior te enseñé a crear un PWA. Al final, cualquier aplicación que…

1 semana hace

Errores de Comlink y algunas soluciones

Al usar Comlink para trabajar con los workers usando JavaScript me han aparecido algunos errores…

1 semana hace

Esperar promesa para inicializar Store de Pinia con Vue 3

En este artículo te voy a enseñar cómo usar un "top level await" esperando a…

1 semana hace

Esta web usa cookies.