Aquí, utilizaremos la misma aplicación que creamos en la sección Creando un Blog Dinámico con ButterCMS, Angular
Dado que tenemos una aplicación Angular lista, navega a la carpeta de la aplicación, que está dentro de la muestra en nuestro caso. Debemos navegar a la carpeta de la aplicación porque el comando ng build solo funciona dentro de la carpeta de la aplicación Angular.
Es recomendable crear una nueva rama en nuestro repositorio antes de construir y crear una solicitud de extracción desde esa rama después de construir, pero esto no es obligatorio.
El CLI de Angular tiene el comando build, que construye la aplicación Angular y guarda los archivos resultantes en una carpeta.
El siguiente comando nos ayuda a construir nuestra aplicación Angular:
ng build --output-path docs --base-href /nombre-repositorio/
Desglosemos este comando y sus opciones:
buildnos ayuda a construir la aplicación Angular.output-pathse utiliza para generar la salida en una carpeta diferente en lugar del dist predeterminado.base-hrefnos permite indicarle a la aplicación la ruta base.
En nuestro caso, el nombre del repositorio que creé es blogpe, por lo que el comando será:
ng build --output-path docs --base-href /blogpe/
La ruta de salida se establece como docs ya que sabemos que GitHub Pages busca archivos en dos carpetas, root y docs. En root tenemos todos los demás datos de la aplicación, por lo que no podemos usarlo aquí. En su lugar, hemos dado una carpeta de salida separada llamada docs que vamos a usar para alojar en GitHub Pages.
El base-href es un argumento importante ya que lo usamos para establecer la ruta base para resolver URL relativas a hojas de estilo, scripts y muchos otros recursos.
Salida de construcción Una vez que se complete la construcción, encontraremos una nueva carpeta llamada docs que se ha creado dentro de la carpeta de muestra.
Explorar la carpeta docs nos puede dar una idea de cómo el comando de construcción entrega la salida.
Podemos encontrar un archivo HTML, algunos archivos JS y algunos otros archivos. Esta es la salida de la construcción. Los archivos en esta carpeta son suficientes para ejecutar la aplicación Angular.
Si alojamos esta carpeta en un servidor, nos mostrará nuestra aplicación Angular. Muchos servidores permiten alojar una carpeta como un servidor web. Podemos pasar la carpeta a uno de esos servidores y verificar nuestra salida. Eso es lo que haremos en la próxima sección.