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
Paso 2
Vas a necesitar un proyecto angular, ejecuta el siguiente comando para crear tu proyecto
ng new app-name
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
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/
Paso 4.1 (opcional) *
Por si el comando anterior no llegase a funcionar, existe otro comando que crea la rama y la sube al repositorio de la misma forma. Debes asegurarte de tener instalada la dependencia angular-cli-ghpages globalmente, como se describe en el paso anterior, y luego ejecutar este comando.
ngh --dir=dist /RickAndMorty --no-silent
Paso 5
Una vez que desplegué su aplicación angular diríjase a su repositorio y en la sección de settings
de clic en la siguiente sección para obtener la url de la pagina
le mostrara la url y ya podrá acceder a ella para ver su app
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!!
Top comments (1)
buen tutorial, tengo una consulta, pero para hacer ello ya tu proyecto que esta en local debe estar enlazado a tu repo no ?
Cuando hago un nuevo cambio en local primero debo hacer push al repositorio remoto y luego hacer ng deploy --base-href=/RickAndMorty/ :?