Haciendo deploy de una app en angular a heroku

¿Qué es Heroku?

Heroku es uno de los PaaS más utilizados actualmente en entornos empresariales, debido a su fuerte enfoque en simplificar el despliegue de aplicaciones. Además, te permite manejar los servidores, sus configuraciones, el escalamiento y la administración. En Heroku, solo debes especificar qué lenguaje de backend estás utilizando o qué base de datos vas a emplear, y luego puedes enfocarte únicamente en el desarrollo de tu aplicación.

Ahora te mostraré los pasos para desplegar tu aplicación Angular en Heroku.

Paso 1

Vas a necesitar algo para servir tus archivos, y para eso utilizaremos Express. También necesitaremos una 'ruta' para configurar nuestro servidor (a menos que prefieras codificarlas directamente).

npm install --save express path

Paso 2

Ahora, si queremos que Heroku construya nuestro proyecto en sus servidores, necesitamos decirle dos cosas.

1. Cómo construir nuestro proyecto, y
2. Con qué versiones de Node.js y npm funciona nuestro código.

Puedes hacer esto agregando la siguiente configuración en el archivo package.json.

"scripts": {
    ...
    "postinstall": "ng build --prod"
  },
  "engines": {
    "node": "8.11.3",
    "npm": "6.1.0"
  },

Recuerda reemplazar las versiones de Node.js y npm por las que tienes instaladas.
Puedes averiguarlas con el siguiente comando:

node --version
npm --version

Paso 3

De forma predeterminada, Angular separa las implementaciones que considera son solo para 'desarrollo'. Sin embargo, dado que Heroku está construyendo nuestro código, debemos asegurarnos de que pueda ejecutar esos módulos.

Para hacer esto usted puede mover @angular/cli, @angular/compiler-cli, typescripty "@angular-devkit/build-angular": "~0.6.8"__ __ * de nuestros devDependencies a las dependencias. O podemos hacer que Heroku instale esos módulos por su cuenta.

Personalmente, prefiero la primera opción, ya que te permite especificar las versiones. Sin embargo, si prefieres la segunda opción, deberías agregar lo siguiente debajo de postinstall.

 "preinstall": "npm install -g @angular/cli @angular/compiler-cli typescript",

Paso 4

Crea nuestro archivo de servidor. En el directorio principal de tu aplicación (el que contiene el package.json), crea un archivo llamado server.js y agrega lo siguiente:

const path = require('path');
const express = require('express');
const app = express();

// Serve static files
app.use(express.static(__dirname + '/dist/MY_APP_NAME'));

// Send all requests to index.html
app.get('/*', function(req, res) {
  res.sendFile(path.join(__dirname + '/dist/MY_APP_NAME/index.html'));
});

// default Heroku port
app.listen(process.env.PORT || 5000);

Recuerde reemplazar MY_APP_NAME (ambos) al nombre de su aplicación.

Paso 5

Ahora, para crear un Procfile para decirle a Heroku "cómo" queremos que se ejecute nuestra aplicación. En su directorio de proyecto (el mismo que contiene el package.json) cree un archivo llamado Procfile y coloque lo siguiente

 web: node server.js

Paso 6. Paso final

Ahora podemos compilar nuestra aplicación npm install y ejecutarla con 'node server.js'.
Si todo funciona, ahora deberíamos ver un sitio de trabajo en http: // localhost: 5000

Para empujar a heroku, asumiendo que tienes el cli instalado.
Si no es así (https://devcenter.heroku.com/articles/heroku-cli#download-and-install)

 heroku create
 git add .
 git commit -m "initial heroku deploy'
 git push heroku master

Hecho!. Ahora debería ver un enlace de despliegue. Ábrelo y deberías ver tu sitio.

Comments

[Miguel]

Muy útil, aunque yo revisaría la redacción en algunas partes. ¿Por qué es necesario todo esto y no se puede hacer ng build? Me gustaría leer sobre ello.

[Gerald González Zeledón]

Hola Miguel, gracias por tu comentario, daré una revisada de tu observación.
En efecto se utilizó el ng build solo que implícitamente, se puede ver en el paso #4. Además de ello es necesario hacer toda esta configuración por que esta es una de las alternativas que Heroku recomienda en su documentación para hacer el deploy en su plataforma.
Si quieres ver otra forma más sencilla de hacer un deploy con angular, te invito a revisar el post de Deploy de una app angular a GithubPages

[Miguel]

Muchas gracias Gerald, siento que mi primer comentario me haya quedado un poco brusco 😁