La implementación de aplicaciones Angular en páginas de GitHub es una excelente manera de alojarlas de forma gratuita. Angular es un marco de JavaScript popular para crear aplicaciones de una sola página.

Angular tiene una interfaz de línea de comandos integral que admite la creación y configuración rápidas de aplicaciones JavaScript. La CLI de Angular tiene varios comandos para crear, construir, servir y generar componentes de aplicaciones.

También puede usar la CLI para implementar aplicaciones Angular en varios destinos, incluidas las páginas de GitHub.

Que necesitas

Para aprovechar al máximo esta guía, debe tener las siguientes habilidades y herramientas:

  • Deberías estar familiarizado con los fundamentos de angular, como el concepto de aplicaciones, configuraciones, URL, etc.
  • Estás familiarizado con los fundamentos de GitHub y Git, como crear una cuenta de GitHub, crear un repositorio de git (repo) y páginas de GitHub (páginas GH).
  • Tiene una aplicación Angular lista para implementar.
    • instagram viewer
  • Su URL base está en la ruta correcta. Las implementaciones en páginas GH fallan debido a la configuración incorrecta de base-href (base-url).
  • Una cuenta de GitHub.
  • Un repositorio de GitHub (repo) con el código de la aplicación.

Ahora que tiene todo esto en su lugar, comencemos el proceso de implementación.

Proceso de implementación

Para comenzar, debería haber creado un repositorio de GitHub para su proyecto y enviado el código al principal/maestro rama.

A continuación, cree una rama de páginas GH.

1. Crear una sucursal de GH-pages

Este es un truco que lo ayudará a obtener el enlace de las páginas GH para ayudar a configurar la base-href.

Primero, cree páginas GH en su repositorio local con el siguiente comando:

git rama gh-páginas

A continuación, echa un vistazo desde la sucursal principal a GH-pages para transferir todo el código.

git checkout gh-pages

Luego, envíe GH-pages a GitHub para crear una rama remota de GH-pages.

git push origin gh-pages

En la barra de herramientas debajo del nombre del repositorio, haga clic en Configuración > Páginas.

Bajo Construir y desplegar, seleccionar Implementar desde una sucursal. A continuación, seleccione páginas gh como el nombre de la sucursal, luego haga clic en Ahorrar. Esto creará un enlace de páginas de GH en la parte superior derecha debajo de la etiqueta de páginas de GH.

A continuación, copie este enlace al sitio publicado como se ilustra a continuación. Utilizará el enlace para configurar la base-ref durante la implementación.

3. Instalar Angular-CLI-GHpages

El paquete angular-cli-ghpages es una herramienta que utiliza la CLI de Angular con fines de implementación.

Vuelve a tu repositorio de proyectos local. Luego instale y ejecute angular-cli-ghpages con este comando:

ng agregar angular-cli-ghpages

4. Implementar la aplicación

Para compilar la aplicación en producción, debe conectarla a un servidor remoto en GitHub.

Configure su aplicación en un servidor remoto ejecutando el siguiente comando:

ng desplegar --base-href=https://GithubUserName.github.io/GithubRepoName/

Recuerde reemplazar el enlace anterior con el enlace en vivo de las páginas de GH

Una compilación exitosa se verá como la siguiente ilustración:

A continuación, navegue a GitHub y haga clic en el enlace de las páginas de GH para ver su proyecto implementado.

¡Felicitaciones, ha implementado su aplicación Angular!

Si el enlace muestra solo el archivo LÉAME, vuelva a la configuración de las páginas GH de GitHub. Asegúrese de que la rama seleccionada sea gh-pages y no la rama principal o maestra. Luego dale cinco minutos y vuelve a cargar. A veces, GitHub tarda en reflejar los cambios.

Para obtener más información sobre cómo puede usar Angular CLI en la implementación, visite el documentación angular.

Cómo implementar una aplicación angular en las páginas de GitHub

Hay varias formas de implementar aplicaciones Angular en páginas GH, pero este método es el más fácil. Configura su enlace de repositorio de páginas GH y lo usa con Angular-CLI para implementar su aplicación en las páginas de GitHub.

Hay mucho más que puede hacer con Angular y Angular CLI. Siéntete libre de explorar. Utilice la CLI para implementar aplicaciones en páginas GH para obtener visibilidad y alojamiento gratuitos para sus aplicaciones.