Saltar al contenido

Desplegando el uso del CLI en angular

Hasta ahora, hemos creado nuestro directorio de construcción, llamado dist, en el que se generan los archivos relacionados con la construcción que pueden ser utilizados para subir al servidor para desplegar nuestra aplicación Angular.

Antes de desplegar nuestra aplicación, debemos tener en cuenta que hemos creado una simple aplicación estática que no tiene backend, por lo que las páginas GitHub serán una excelente opción para el despliegue del sitio estático.

Desplegando el uso del CLI en angular
Desplegando el uso del CLI en angular

Pero para desplegar la aplicación angular en las páginas GitHub, necesitamos tener las páginas GitHub CLI, que pueden ser instaladas usando el siguiente comando.

1npm i -g angular-cli-ghpages

powerhell

Después de ejecutar el comando anterior, el CLI de las páginas de GitHub se instalará globalmente para que podamos usarlo cuando queramos.

Nuestro siguiente paso es entrar en github.com y crear un nuevo repositorio en el que desplegaremos nuestra aplicación Angular. La página del repositorio se ve así.

Como pueden ver en la imagen de arriba, hemos creado un nuevo repositorio llamado ngdeploydemo. Haz clic en el botón de generar y se creará el repositorio vacío.

El siguiente paso es confirmar nuestro código en el repositorio de GitHub, y para ello, asumo que ya tienes Git instalado en tu máquina.

Abre la línea de comandos y escribe los siguientes comandos uno por uno.

Paso 1.

Copia la URL de tu repositorio de Github.com y úsala junto con el comando, así.

1git remote add origin https://github.com/your_user_name/repo_name.git

powerhell

Paso 2.

Presione todos los cambios usando el comando de abajo.

1git push -u origen maestro

powerhell

Después, usa los siguientes tres comandos diferentes para empujar y confirmar el código con el mensaje apropiado.

Estos comandos empujarán nuestro código fuente al repositorio vacío, luego irán al repositorio y lo refrescarán, y verás que el código se empuja con éxito.

12345git add .git commit -m "commit message "git push -u origin master

powerhell

Hasta ahora, hemos configurado y empujado el código en el repositorio, y ahora podemos desplegar nuestra aplicación en las páginas de GitHub.

Ahora tenemos que cambiar nuestro directorio a /dist, así.

1cd /dist

powerhell

Y usa el comando oficial de las páginas de GitHub como se describe a continuación.

1angular-cli-ghpages

powerhell

O más precisamente, podemos usar una forma diferente y fácil de hacerlo, explicada a continuación.

1ngh --dir=dist/ngdeploydemo

powerhell

ngh es un comando oficial para las páginas de GitHub, y debemos especificar el directorio de construcción usando la opción –dir junto con un nombre de proyecto adecuado, que se crea en el directorio de construcción.

Si se fija en el símbolo del sistema, la salida debería ser así.

Por fin podemos ver el mensaje:

Publicado con éxito a través de angular-cli-pages