DEV Community

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

Posted on • Updated on • Originally published at github.com

Haciendo deploy de una app en angular a GitHub Pages

Muchos de nosotros cuando terminamos un proyecto y este es más frontend que backend queremos compartirlo con nuestros amigos o simplemente queremos mostrarlo en nuestro portafolio, es por ello que acá te muestro una pequeña guía en donde te muestro paso a paso a hacer un deploy a un host gratuito, está vez lo haremos con GithubPages.

Paso 1

Vas a necesitar crear un repositorio en tu github

Creación del repositorio

Paso 2

Vas a necesitar un proyecto angular, ejecuta el siguiente comando para crear tu proyecto

ng new app-name
Enter fullscreen mode Exit fullscreen mode

Paso 3

Instale Angular CLI gh-pages (https://www.npmjs.com/package/angular-cli-ghpages)

Hay una herramienta a su disposición que puede utilizar para implementar fácilmente su aplicación angular en gh-pages, la herramienta angular-cli-pages.
La herramienta angular-cli-pages se usa como un comando en la CLI angular con el propósito de la implementación.

Para instalarlo, ejecutemos este comando en nuestra terminal

npm i angular-cli-ghpages
ng add angular-cli-ghpages
Enter fullscreen mode Exit fullscreen mode

Nota:

Este comando instalará angular-cli-ghpages globalmente en su sistema operativo. No es necesario que lo instale de nuevo en caso de que necesite usarlo en el futuro, no es necesario ejecutar nuevamente el primer comando una vez este instalado globalmente.

Paso 4

Implementar en gh-pages

Después de crear la aplicación, ahora puede implementarla en Github Pages usando la herramienta angular-cli-ghpages

Ejecute el siguiente comando en su terminal para implementar la aplicación, asegurese de escribir correctamente el nombre de su proyecto y que se encuentre dentro de las diagonales //

ng deploy --base-href=/RickAndMorty/
Enter fullscreen mode Exit fullscreen mode

Paso 5

Una vez que desplegué su aplicación angular diríjase a su repositorio y en la sesscion de settings

Configuración del repositorio

de clic en la siguiente sección para obtener la url de la pagina

Configuración del repositorio

le mostrara la url y ya podrá acceder a ella para ver su app

Configuración del repositorio

web

Nota

GitHubPages dura al rededor de 30 segundos en aplicar los cambios y mostra la app, siga los pasaos a como se inidcan para que no resiva el 404 de github

te dejo el link del proyecto del ejemplo: Rick&MortyApp

Espero esto te ayude en tus implementaciones y pruebas. Saludos!!

Discussion (0)