Cómo implementar una aplicación NodeJS en Heroku desde Github (sin instalar Heroku en su máquina)

Como desarrollador web, nada es más satisfactorio que poder mostrar (y presumir) tu trabajo al pie de la letra. No solo a través de las imágenes o videos en Twitter, sino también dejándolos interactuar con él, especialmente si está trabajando en algunos proyectos secundarios interesantes o solicitando un puesto.

Y, afortunadamente, ahora con todos los proveedores de la nube, compartir su trabajo es imprescindible y es un paso básico en su viaje.

En esta demostración, veremos cómo implementar su genial aplicación NodeJS en Heroku. Al final de esta demostración, tendremos una aplicación básica de Hello World ejecutándose en un dominio público al que cualquier persona puede acceder.

Para esta demostración, supongo que tiene Node instalado en su máquina. De lo contrario, puede descargarlo desde el sitio web de Nodejs.org. Los pasos son simples y se pueden encontrar en línea fácilmente.

También necesitará una cuenta de GitHub para alojar nuestro código en línea. Si no tiene una cuenta, puede crear una gratis en Github.com. Con una cuenta gratuita, puede crear repositorios públicos ilimitados. Usaremos el sistema de control de versiones de Git para impulsar nuestros cambios a Github.

PASO 1: Crea esa aplicación genial

Ahora creemos esa aplicación Cool Node en la que has estado pensando.

Cree una carpeta en su máquina local y asígnele un nombre (de su elección), diga MyCoolApp.

Agregue un archivo con el nombre package.json y pegue el contenido a continuación. Este archivo es información básica de nuestro paquete. (Esto también se puede crear escribiendo el comando npm init y aceptando todas las configuraciones predeterminadas).

{ "name": "coolnodeapp", "version": "1.0.0", "description": "node app ", "main": "app.js", "scripts": { "start": "node app.js" }, "repository": { "type": "git", "url": "" }, "author": "", "license": "ISC", "bugs": { "url": "" }, "homepage": "" }

Un cambio muy importante a tener en cuenta es esta línea:

"start": "node app.js"

Después de la implementación, Heroku ejecutará este comando para iniciar su aplicación.

Agregue un archivo, app.js y pegue el siguiente código. Este será el punto de partida de nuestra aplicación.

const http = require('http'); const port = process.env.PORT || 3000 const server = http.createServer((req, res) => { res.statusCode = 200; res.setHeader('Content-Type', 'text/html'); res.end('

Hello World

'); }); server.listen(port,() => { console.log(`Server running at port `+port); });

Este código básicamente abre un puerto en el servidor local y sirve algo de HTML.

Tenga en cuenta el bloque de código más importante aquí:

const port = process.env.PORT || 3000

Esto es extremadamente importante cuando desea implementar su aplicación en la nube. El servidor de aplicaciones se inicia en un puerto aleatorio en la nube. Si codifica un número de puerto, como en todas las guías de introducción, y lo implementa en la nube, es posible que el número de puerto específico no esté disponible. La aplicación nunca se iniciará. Por lo tanto, es mejor obtener el número de puerto asignado por la instancia en la nube e iniciar el servidor HTTP.

Guarde el archivo y ejecute el siguiente comando en la ventana del símbolo del sistema (que está abierta dentro de la carpeta):

node app.js

Con esto, Node iniciará el servidor y mostrará el siguiente mensaje:

Ahora, si abrimos // localhost: 3000 / en el navegador, veremos esto:

¡Frio! Acabamos de crear una aplicación básica de NodeJs.

PASO 2: Enviar a GitHub

Ahora queremos subir nuestro código a GitHub. De esta manera, podremos editar nuestro código desde cualquier lugar y también implementar los cambios comprometidos en la nube al instante.

Creemos un repositorio en GitHub haciendo clic en Nuevo repositorio.

Asígnele un nombre, una descripción y haga clic en Crear repositorio:

GitHub creará un repositorio y te dará algunos comandos que puedes ejecutar localmente para que puedas clonar tu carpeta local con tu repositorio de GitHub.

En el símbolo del sistema, ejecute los siguientes comandos en esta secuencia.

  1. Inicialice el repositorio de Git en el nivel raíz:
git init

2. Agregue todos los archivos a su Git local (preparación). Note el último punto:

git add . 

3. Confirme sus cambios en su Git local:

git commit -m “first commit”

4. Enlace a su repositorio de GitHub. (Cambie la URL para que apunte a su repositorio).

git remote add origin //github.com/rramname/MyCoolNodeApp.git

5. Y empuja tu cambio:

git push — set-upstream origin master

Debería ver mensajes como los siguientes en el símbolo del sistema.

Ahora, si abre GitHub y actualiza el repositorio, debería poder ver el código.

PASO 3: Implementar en Heroku

Ahora viene la diversión, la razón por la que has sobrevivido a todo esto: el despliegue.

Si no tiene una cuenta con Heroku, puede abrir una gratuita completando este sencillo formulario. (Y aquí, no es necesario que proporcione la información de la tarjeta de crédito :))

Una vez que tenga su cuenta lista, inicie sesión con sus credenciales.

Haga clic en Nuevo en la esquina superior derecha y seleccione "Crear nueva aplicación".

Asigne un nombre a su aplicación (se incluirá en la URL pública de su aplicación) y haga clic en Crear aplicación.

This step will take you to the dashboard of your app. Open Deploy tab and scroll to the “Deployment method” section.

Select GitHub as the method.

It will show a “Connect to GitHub” option where we can provide our GitHub repository. If you are doing it for the first time, Heroku will ask permission to access your GitHub account.

Here, you can search for your GitHub repository and click connect:

If it’s able to find and connect to the GitHub repository, the Deployment section will show up where you can select if you want Automatic Deployment (as soon as the changes are pushed to GitHub, Heroku will pick them up and deploy) or Manual Deployment.

Click Enable Automatic Deploys (because it’s less overhead for demo apps :) ). You can also select the GitHub branch if you need to, but for this demo we will deploy from the master branch.

Now we need to tell Heroku that our app is a NodeJs app. For that, we will need the NodeJs build back.

Open the Settings tab and locate Buildpacks and click “Add buildpack”.

Select nodejs from the options and click Save changes.

Now, go back to the Deploy tab, and click Deploy Branch at the bottom.

Heroku will take the code and host it. Open the Activity tab and there you can see the progress:

And that’s it!

Open the settings tab and scroll down to the Domains and certificates section. Here, you can see the URL of your app that was just deployed. Copy and paste that URL in the browser and… Hoooorah!!

We just created our own web application that can be accessed over the internet.

Great!

Please go ahead and share with others!

Happy Hosting :)