Free Event Series! Navigating Hypergrowth: Conversations with leaders who’ve seen success at scale. Register now.

By Tara Z. Manicsic in Guides & Tutorials

Primeros pasos con Netlify y Angular

Esta página está disponible en English, Español, Français.

¡Hola! Bienvenido al comienzo de su viaje con Netlify y Angular. Nos complace que nos acompañe. En Netlify, queremos facultarlo para hacer increíbles proyectos web con facilidad, desde el desarrollo local hasta la implementación global. En esta publicación, lo guiaré a través de los primeros pasos de conexión e implementación de su aplicación de Angular con nuestra web y las herramientas de la interfaz de línea de commandos de Netlify. Si tiene preguntas o comentarios, revise nuestra comunidad para obtener respuestas de nuestro equipo y de otros usuarios de Netlify. Comencemos.

Uso de la interfaz de usuario web de Netlify

Cuando vaya a netlify.com, puede conectar su cuenta a un repositorio Git mediante el inicio de sesión en GitHub, GitLab o Bitbucket. Netlify hace el trabajo de vincular su cuenta a sus repositorios. En primer lugar, vaya a la página de Sites (Sitios) (https://app.netlify.com/teams//sites) y, luego, haga clic en el botón “New site from Git” (Nuevo sitio desde Git). Esto abrirá su cuenta de Git elegida y mostrará una lista de todos los proyectos de esa cuenta. A continuación, solo tiene que seleccionar el proyecto, elegir la rama (Branch to deploy), completar el commando de compilación (Build command) y el directorio de publicación (Publish directory).

Para Angular, es muy probable que el comando de compilación sea ng build --prod. Puede establecer la configuración del entorno de forma definitiva en la opción que mejor se adapte a su proyecto en particular. Si siente curiosidad, también puede consultar más información sobre el uso del comando ng build de la interfaz de línea de comandos de Angular aquí, en sus documentación. El directorio de publicación está solicitando la carpeta en la que se encuentra su proyecto. Cuando se utiliza el comando ng build en la interfaz de línea de comandos de Angular, el proyecto se guarda en la carpeta dist (abreviatura de distribuible) en el nombre del proyecto. Si personalizó donde desea el resultado de la compilación del proyecto, deberá indicar esa ubicación.

Para recapitular, la configuración más frecuencia es la siguiente:

Comando de creación: ng build –prod

Directorio de publicación: dist/{Nombre del proyecto} (p. ej., dist/anglify)

Esa es toda la información necesaria para implementar su proyecto de Angular en Netlify con la interfaz de usuario web. Una vez que se haya iniciado la configuración y la implementación, puede realizar un seguimiento del progreso y ver los registros en la página de descripción general del proyecto (https://app.netlify.com/sites/{nombre del proyecto}/overview) o de deploys (https://app.netlify.com/sites/{nombre del proyecto}/deploys). También puede encontrar el enlace para su sitio en esas dos páginas.

Tres maneras de actualizar su proyecto 😙👌

Una de las maneras más fáciles de crear un deploy del sitio una vez que lo haya conectado al repositorio del proyecto es con git push. Cuando se conecta a través de su repositorio, Netlify establece automáticamente un canal de CI/CD (integración continua/implementación continua). Consulte más información acerca de la integración continua de Netlify en nuestra documentación. También puede generar un deploy del proyecto si va a la página de “Deploys” de su proyecto y hace clic en el botón “Trigger deploy”. Este botón le ofrece la opción de hacer un deploy de forma simple o borrando la caché y, a continuación, comenzar la actualización del sitio. Por último, si no desea enviar el código o presionar los botones, puede arrastrar y soltar la carpeta del proyecto (por ejemplo, dist/{project-name}) en esta sección de la página de “Deploys”:

drag and drop section on the deploys page

Allí están las opciones de interfaz de usuario web para crear un deploy. Ahora, visitemos mi lugar favorito, la terminal.👩🏻‍💻!

Uso de la interfaz de línea de commandos de Netlify

Como usuario de angular, me sentí muy malcriado con todo el trabajo que hace la interfaz de línea de commandos de Angular (genera componentes [ng generate], integra paquetes [ng add], se actualiza [ng update], etc.). Me alegró mucho saber que podía permanecer en la línea de commandos con la interfaz de línea de commandos de Netlify.

Por cierto, la interfaz de línea de comandos de Netlify es un proyecto de código abierto✨. Únase a la diversión.

La interfaz de línea de commandos se puede instalar mediante el administrador de paquetes que elija y, si lo desea, puede instalarla globalmente mediante la bandera -g. Para conectarse a su cuenta, solo ejecute netlify login.

Código para ejecutar en la línea de commandos

npm install netlify-cli -g && netlify login

Una vez que haya iniciado sesión, puede ir al directorio de su proyecto y ejecutar netlify init para configurarlo en Netlify. Tendrá la opción de conectarlo a uno de sus sitios existentes de Netlify o crear y configurar un nuevo sitio. Si el proyecto tiene un repositorio remoto de Git asignado a origin, la interfaz de línea de commandos lo encontrará y le preguntará si desea utilizarlo para vincular el sitio. Sin embargo, hay otras opciones. Para encontrar el sitio, puede buscar, ver los sitios actualizados recientemente o usar el ID del sitio. Eso es todo lo que hay que hacer para vincular el proyecto a su cuenta de Netlify. Por lo tanto, con la implementación continua predeterminada de Netlify, si se realiza un envío a ese repositorio, se implementará automáticamente el sitio. Fácil como un domingo por la mañana (esperando que sean muy sencillos para usted).

Si está muy emocionado y quiere implementar su sitio antes de que haya creado un repositorio, puede hacerlo. Al igual que antes, solo tiene que ejecutar netlify init, pero esta vez lo solicitará cuando no vea un repositorio de git. La interfaz de línea de comandos le pide que elija la opción para implementar el sitio manualmente o crear uno. Después de optar por implementar manualmente, le pedirá cierta información sobre el proyecto y, a continuación, lo agregará a su cuenta. A partir de este momento, puede simplemente ejecutar netlify deploy de forma habitual.

De manera predeterminada, netlify deploy generará un deploy en una url de borrador. Esta información, junto con el enlace y la información de compilación, se muestra en la salida después de ejecutar el commando deploy. Queríamos asegurarnos de que expresamente desee que el deploy sea de producción. Por lo tanto, cuando el sitio esté completamente listo, agregue la bandera --prod. Después de ejecutar netlify deploy --prod, se le solicitará el directorio de publicación.

Puede establecer la configuración de compilación en un archivo de configuración netlify.toml 😛para que deje de molestarlo solicitando el directorio de publicación en cada implementación. Revise los documentos para obtener más información.

Una vez que se inicia el deploy, se mostrará la URL de administrador (para estado, registros y más), la URL activa y la ID del sitio.

Actualización con redirecciones

Para asegurarse de que las rutas funcionan (actualizaciones y otras operaciones manejadas por el enrutador de Angular), debe agregar alguna lógica de redireccionamiento. Una de las maneras más sencillas de hacerlo es mediante la configuración de redirección en el archivo de configuración de Netlify, netlify.toml, que se mencionó anteriormente. Así se verá el archivo:

[build]
  publish = "dist/anglify"
  command = "ng build --prod"
[[redirects]]
  from = "/*"
  to = "/index.html"
  status = 200

Listo para la implementación

Ahora tiene los primeros pasos para mostrarle al mundo sus increíbles creaciones de Angular:

  • vinculación con los repositorios de Git
  • lo que, a su vez, agrega implementación continua
  • deploys a partir de órdenes de publicación, deploys a pedido, o deploys por “arrastrar y soltar”
  • instalación de la interfaz de línea de commandos de Netlify
  • vinculación y deploy de proyectos desde dicha interfaz de línea de commandos de Netlify

Hay mucho más que puede hacer con la interfaz de usuario web y la interfaz de línea de commandos de Netlify. Ahora que ha configurado sus proyectos y ya ha hecho un excelente trabajo en su implementación (qué genio), recomiendo encarecidamente que revise nuestros documentos.

Estos son algunos otros recursos que lo ayudarán a hacerse más experto todavía 😍:

¡Disfruten programando!