DEV Community

Cover image for Haciendo deploy de una app en angular a heroku
Gerald González Zeledón
Gerald González Zeledón

Posted on • Updated on

Haciendo deploy de una app en angular a heroku

¿Qué es Heroku?

Heroku es uno de los PaaS más utilizados en la actualidad en entornos empresariales por su fuerte enfoque en resolver el despliegue de una aplicación. Ademas te permite manejar los servidores y sus configuraciones, escalamiento y la administración. A Heroku solo le dices qué lenguaje de backend estás utilizando o qué base de datos vas a utilizar y te preocupas únicamente por el desarrollo de tu aplicación.

Ahora te mostrare los paso para desplegar tu aplicacion Angular en Heroku.

Paso 1

Vas a necesitar algo para servir tus archivos. Vamos con el express. También necesitaremos una "ruta" para configurar nuestro servidor (a menos que quiera codificar esos en usted)

npm install --save express path
Enter fullscreen mode Exit fullscreen mode

Paso 2

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

  1. Cómo construir nuestro proyecto y
  2. Con qué versiones de node / npm trabaja nuestro código.

Puedes hacer esto poniendo lo siguiente en package.json


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

Enter fullscreen mode Exit fullscreen mode

Recuerda reemplazar las versiones de node y npm por las que tienes.
Puedes averiguarlo con


node --version
npm --version
Enter fullscreen mode Exit fullscreen mode

Paso 3

De forma predeterminada, el ángulo separa de las implementaciones lo que cree que son adiciones de "desarrollo" únicamente. Sin embargo, dado que Heroku está construyendo nuestro código, debemos darle la capacidad de 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 ya que le permite especificar versiones, sin embargo, si desea hacer la última, debería colocar lo siguiente debajo de postinstall.

 "preinstall": "npm install -g @angular/cli @angular/compiler-cli typescript",
Enter fullscreen mode Exit fullscreen mode

Paso 4

Crea nuestro archivo de servidor. En su directorio de aplicación principal (el que tiene package.json) cree un archivo llamado server.js. 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);

Enter fullscreen mode Exit fullscreen mode

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 con package.json) cree un archivo llamado Procfiley coloque lo siguiente

 web: node server.js
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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

Discussion (3)

Collapse
miguelhv profile image
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.

Collapse
gedgonz profile image
Gerald González Zeledón Author • Edited on

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

Collapse
miguelhv profile image
Miguel

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