Cómo implementar aplicaciones angulares en Heroku

Siempre ha parecido "fácil" hasta que lo intentas. Habiendo implementado otras aplicaciones en heroku, me encontré con una serie de desafíos implementando Angular 4 recientemente, pero finalmente lo logré. Así que escribo para explicar en detalle cómo lo hice.

Este artículo le mostrará guías sobre cómo implementar sus aplicaciones Angular 2/4 fácilmente en Heroku, lo que es más importante, evitando dificultades comunes.

Este no es un tutorial para ayudarlo a aprender Angular. Se supondrá que ha completado el desarrollo y está listo para implementar. Sin embargo, configuraremos el proyecto angular básico desde el inicio y la implementación. Este tutorial cubrirá:

  • Crear proyecto angular básico
  • Configuración de la implementación automática de GitHub a Heroku
  • Implementación de la aplicación Angular en el servidor Heroku

Configure su aplicación angular

Haciendo uso de la CLI angular, configure un nuevo proyecto ejecutando:

ng nueva implementación de demostración

A partir de esto, nuestra aplicación se llamará demo-deploy. Espere unos minutos para configurar el nuevo proyecto e instalar paquetes npm.

Aplicación de inicio

Cambie el directorio a un nuevo proyecto y ejecútelo usando los comandos a continuación. Esto se abrirá en el nuevo navegador en el puerto 4200 por defecto. es decir, http: // localhost: 4200.

cd demo-deploy
ng servir

Aplicación angular te da la bienvenida

Nuestra aplicación angular básica está lista y ejecutándose localmente. Vamos a empujar a github

Crea su repositorio de GitHub y Push

Aquí, crearemos un nuevo repositorio de github y aplicaremos nuestra aplicación.

  • Inicie sesión en github y cree un nuevo repositorio. No es necesario inicializar el repositorio con README
  • Abra una nueva pestaña en su terminal / CMD. O presione Ctrl + C para dejar de ejecutar la aplicación. Luego ejecute los siguientes comandos:

git remote add origin
git add.
git commit -m "confirmación inicial"
git push -u maestro de origen

Ahora nuestra aplicación está en github.

Configurar la implementación automática de GitHub a Heroku

La ventaja de este paso es que, una vez que presiona un cambio en su repositorio de github, empuja automáticamente el cambio a su base de código en heroku, que luego entra en vigencia en la web. Esto significa que solo tendrá que enviar los cambios a github y listo.

Si aún no tiene una cuenta, cree una en el sitio web de heroku. Es gratis. Inicie sesión en su tablero y cree una nueva aplicación.

crear una nueva aplicación en heroku

Haz clic en Crear aplicación

En el menú Implementar, en Método de implementación, seleccione GitHub. Si aún no lo ha hecho, le pedirá que inicie sesión en su cuenta de github para que pueda conectarse a ella.

Ingrese el nombre del repositorio de GitHub y haga clic en Buscar. Una vez que se muestra el repositorio a continuación, haga clic en Conectar. ¡Viola!

Uh, espera Dos pasos más simples.

  1. En Implementaciones automáticas, seleccione la rama maestra y haga clic en Habilitar implementaciones automáticas.

2. En Implementaciones manuales, haga clic en Implementar rama. Esto es para empujar nuestro nuevo código a heroku.

Bien, hemos terminado con esta etapa realmente. Puede tardar un poco, pero le mostrará un mensaje desplegado con éxito una vez hecho, de esta manera:

Si hace clic en Ver, se abrirá una nueva pestaña pero su aplicación no se mostrará. La siguiente serie de pasos lo guiará en la configuración y aceleración de su aplicación angular.

Configure su aplicación angular para implementar correctamente en Heroku

Los siguientes son pasos listos para la producción para implementar de manera fácil y adecuada su aplicación sin inconvenientes.

Asegúrese de tener la última versión de angular cli y angular compilador cli.

Instálelos en su aplicación ejecutando estos comandos en su terminal:

npm install @ angular / cli @ latest @ angular / compiler-cli --save-dev

En su package.json, copie

"@ angular / cli”: “1.4.9”,
"@ angular / compiler-cli": "^ 4.4.6",

de devDependencies a dependencias

Crear secuencia de comandos postinstall en package.json

En "scripts", agregue un comando postinstall de esta manera:

"postinstall": "ng build --aot -prod"

EDITAR: Es posible que obtenga un error al ejecutar el comando postinstall. Esto funciona en su lugar:

"heroku-postbuild": "ng build --prod"

Esto le dice a Heroku que construya la aplicación usando el compilador Ahead Of Time (AOT) y que esté lista para la producción. Esto creará una carpeta dist desde donde se lanzarán todas las versiones convertidas en html y javascript de nuestra aplicación.

Agregar motores Node y NPM

Deberá agregar los motores Node y NPM que Heroku usará para ejecutar su aplicación. Preferiblemente, debe ser la misma versión que tiene en su máquina. Entonces, ejecute node -v y npm -v para obtener la versión correcta e incluirla en su archivo package.json de la siguiente manera:

Copiar mecanografiado a dependencias.

Copie "typecript": "~ 2.3.3" de devDependencies a dependencias para informar también a Heroku qué versión de mecanografía usar.

Instalar Enhanced Resolve 3.3.0

Ejecute el comando npm install advanced-resolve@3.3.0 --save-dev

Instale el servidor para ejecutar su aplicación

Localmente ejecutamos ng serve desde la terminal para ejecutar nuestra aplicación en el navegador local. Pero necesitaremos configurar un servidor Express que ejecute nuestra aplicación lista para producción (desde la carpeta dist creada) solo para garantizar una carga ligera y rápida.

Instale el servidor Express ejecutando:

npm install express path --save

Cree un archivo server.js en la raíz de la aplicación y pegue el siguiente código.

Cambiar comando de inicio

En package.json, cambie el comando "start" a node server.js para que se convierta en:

"start": "nodo server.js"

Así es como se ve el paquete completo.json. El suyo puede contener más dependiendo de los paquetes específicos de su aplicación.

Empuje los cambios a GitHub:

git add.
git commit -m "actualizaciones para implementar en heroku"
git push

En este punto, su aplicación en Heroku tomará automáticamente los cambios de GitHub y se actualizará.

Además, buscará en su package.json e instalará paquetes.

Ejecutará el postinstall y luego el nodo server.js para activar su aplicación.

Puede consultar la pestaña Actividad y abrir el registro de compilación para ver cómo se ejecuta realmente.

No debe encontrarse con ningún problema. Seguí mientras escribía esta publicación también y.

¡¡Viola!! Nuestra aplicación angular está lista y en vivo!

Por seguir hasta esta etapa, gracias.

Puedes seguirme en Twitter o aquí en Medium.

¡Decir queso! … Comente a continuación, también si encontró algún problema o desea sugerir mejores formas.