Cómo implementar una aplicación angular

FrontEnd: Angular y GitHub

Recientemente trabajé en un proyecto personal divertido, creando una herramienta basada en la web para la gestión de clientes y construí mi aplicación front-end con angular. Ahora, si eres nuevo en Angular como yo, es bastante confuso y no hay muchas directivas sobre cómo hacer que tu aplicación esté disponible para que otras personas la utilicen (llevar una aplicación angular del entorno de desarrollo a un entorno en vivo que los usuarios puedan acceso y uso).

Entonces, para el propósito de este artículo, exploraremos cómo implementar o publicar una aplicación Angular en las páginas de GitHub.

Supongo que ya ha creado una aplicación angular o está trabajando en una y está familiarizado con CLI angular, Git y Github. La CLI Angular facilita la creación de una aplicación que ya funciona, desde el primer momento. Ya sigue nuestras mejores prácticas. Si no lo tiene instalado, le recomiendo que lo haga.

  • Instalación angular de CLI
npm install -g @ angular / cli

Si no tiene un proyecto angular para implementar, puede simplemente crear un proyecto de demostración y seguirlo ejecutando el comando "ng new" seguido del nombre de su aplicación. Decidí llamar al mío "my-app-demo", el tuyo tendrá un nombre diferente o puedes nombrarlo como quieras:

ng nueva demostración de mi aplicación

Una vez creado, cambie el directorio de trabajo al directorio de su aplicación y ejecútelo para asegurarse de que todo funciona correctamente:

cd my-app-demo
ng servir --abrir

Ng "servir" seguido de la bandera "- abrir" se iniciará automáticamente y abrirá el navegador web. si simplemente escribió "ng serve" y una vez que su aplicación esté en funcionamiento, visite la página http: // localhost: 4200 para asegurarse de que todo funcione bien. La demostración de mi aplicación se ve así:

captura de pantalla del terminal - mac

El siguiente paso es asegurarse de tener instalado el paquete ghpages en su computadora. El paquete ghpages se usa para implementar su archivo de compilación en las páginas de GitHub. ejecuta el siguiente comando para instalarlo globalmente:

npm install -g angular-cli-ghpages
  • Crear un repositorio de GitHub
  • Enviar contenido a su repositorio de GitHub

Siga los pasos de configuración rápida a continuación. Al configurar un repositorio remoto, asegúrese de reemplazar la ruta con la ruta correcta a su repositorio remoto:

echo "# my-app-demo" >> README.md
git init
git add.
git commit -m "primer compromiso"
git remote add origin https://github.com/githubusername/reponame.git
git push -u maestro de origen

Ahora, ejecutando "ng build", cree una carpeta de distribución que contenga todos los archivos necesarios para que sus proyectos se ejecuten en un entorno de producción o servidor host.

ng build --prod

Agregar el indicador de producción "- prod" a ng build reduce significativamente el tamaño de sus archivos de paquete. Si su aplicación no integra ningún tipo de back-end, simplemente puede tomar el contenido de su carpeta dist y subirlo a un servidor a través de FTP y su aplicación funcionará bien.

También puede especificar la referencia base de sus archivos de compilación con el siguiente comando:

ng build --prod --base-href // urlOfYourSubfolderDomain

Implemente su aplicación en páginas de Github

Para implementar en las páginas de Github, necesitamos ejecutar "ng build" con el indicador base-href y se ve así:

ng build --prod --base-href https://yourGithub-username.github.io/reponame/

Asegúrese de poner su nombre de usuario de Github y el nombre del repositorio remoto que asoció con el repositorio local de su aplicación angular. El mío se ve así:

Captura de pantalla del terminal - mac

Es muy importante agregar la barra "/" después del nombre del repositorio al final de la ruta, de lo contrario no funcionaría.

Ahora, una vez hecho, puede ejecutar ngh para invocar la herramienta de interfaz de línea de comando hgpage que instalamos anteriormente.

Resulta que Angular 6 cambió "outputPath" de angular.json: "dist /" en "outputPath": "dist / [PROJECTNAME]", que colocó todo en la carpeta dist en una subcarpeta, lo que rompe la funcionalidad de ngh.
ngh

Si está utilizando Agular 6 y superior, ejecute:

ngh --dir dist / [NOMBRE DEL PROYECTO]

Aquí está la captura de pantalla cuando ejecuté ngh después de arruinar ng build en mi demo del proyecto:

Aquí está la captura de pantalla cuando ejecuté ngh en un proyecto que fue construido recientemente con la versión Angular 6:

Después de publicar con éxito, simplemente continúe y visite la URL que especificó en su bandera base-href para ver su implementación y publicación de la aplicación angular en ejecución. Aquí está mi captura de pantalla:

¡Eso es todo! ahora puede seguir adelante y realizar cambios en su aplicación, simplemente repita los procesos de compilación e implementación cada vez que quiera compartirlo con otros en su organización o si simplemente quiere publicarlo.

Si te ha gustado este artículo, también te puede gustar "Cómo construir una aplicación bidireccional para Internet de las cosas / Chat con Python"
¡¡¡Salud!!!