Netlify y Bootstrap

Aprende a desplegar tus aplicaciones Angular en Netlify y a integrar Bootstrap mediante diferentes métodos, desde CDN hasta paquetes npm.

Despliegue en Netlify

Existen varias formas de subir un proyecto a Netlify. La forma más profesional es vinculando un repositorio de GitHub (lo cual permite despliegues automáticos al hacer push), pero también existe un método manual rápido.

Método manual (Drag & Drop)

Generar el Build: Antes de subir nada, debemos compilar nuestro proyecto de Angular para optimizarlo y "comprimirlo". Ejecutamos en la terminal:
```
ng build
```
Localizar los archivos: Tras finalizar el build, Angular creará una carpeta llamada dist/. Dentro encontraremos otra carpeta con el nombre de nuestro proyecto (o simplemente browser en versiones recientes).
Subir a Netlify: Arrastra esa carpeta final directamente a la zona de carga de Netlify.

[!CAUTION] Este método es poco óptimo para el desarrollo continuo. Si realizas cambios en el código, deberás ejecutar ng build y volver a arrastrar la carpeta manualmente. Lo ideal es usar la integración con Git.

Recomendación sobre repositorios

Al trabajar con Angular, lo ideal es tener un repositorio por proyecto. Evita subir una carpeta contenedora con múltiples aplicaciones, ya que esto complica los procesos de CI/CD (Integración y Despliegue Continuo) y duplica innecesariamente archivos pesados como los node_modules.

Integración de Bootstrap en Angular

Hay tres formas principales de añadir Bootstrap a tu aplicación:

CDN: Copiar los enlaces de CSS y JS de la web oficial y pegarlos en el index.html. Es lo más rápido pero menos profesional.
npm (Instalación local): Ejecutar el comando para instalarlo como dependencia del proyecto:
```
npm install bootstrap
```
Luego, debes referenciar el archivo CSS en el array styles de tu archivo angular.json.
ng-bootstrap / ngx-bootstrap: Utilizar librerías específicas diseñadas para Angular:
```
ng add @ng-bootstrap/ng-bootstrap
```
Este método es el más performante ya que permite importar solo los módulos que necesites (ej: solo el carrusel o solo los modales), optimizando el tamaño final de la aplicación.

Uso de Templates (Ejemplo Jumbotron)

Bootstrap ofrece una sección de "Examples" con estructuras ya listas para usar. Un ejemplo clásico es el Jumbotron.

Cómo importar un template:

Descarga el código del ejemplo.
Abre el archivo index.html del template en tu editor.
Copia únicamente lo que se encuentra dentro de las etiquetas <body>. No incluyas las etiquetas <body> ni <html>, ya que tu aplicación Angular ya tiene su propia estructura base.
Pega ese contenido en el archivo .html de tu componente de Angular.
Asegúrate de tener Bootstrap correctamente instalado para que los estilos se apliquen de forma automática.