El Proyecto | Sobre nosotros | Contribuir | Donaciones | Licencia
HOME Mis cursos Finalizados
◄ Anterior
◄

Construcción y Despliegue de Aplicaciones Angular

Siguiente ►
►

En este tema, aprenderás cómo construir y desplegar aplicaciones Angular de manera eficiente. Este proceso es crucial para llevar tu aplicación desde el entorno de desarrollo hasta un entorno de producción donde los usuarios finales puedan acceder a ella.

  1. Preparación para la Construcción

1.1 Configuración del Archivo angular.json

El archivo angular.json es el corazón de la configuración de tu proyecto Angular. Aquí puedes definir cómo se debe construir tu aplicación.

{
  "projects": {
    "your-app-name": {
      "architect": {
        "build": {
          "options": {
            "outputPath": "dist/your-app-name",
            "index": "src/index.html",
            "main": "src/main.ts",
            "polyfills": "src/polyfills.ts",
            "tsConfig": "tsconfig.app.json",
            "assets": [
              "src/favicon.ico",
              "src/assets"
            ],
            "styles": [
              "src/styles.css"
            ],
            "scripts": []
          }
        }
      }
    }
  }
}

1.2 Configuración de Entornos

Angular permite definir configuraciones específicas para diferentes entornos (desarrollo, producción, etc.). Esto se hace en el archivo angular.json y en los archivos de entorno (environment.ts).

{
  "projects": {
    "your-app-name": {
      "architect": {
        "build": {
          "configurations": {
            "production": {
              "fileReplacements": [
                {
                  "replace": "src/environments/environment.ts",
                  "with": "src/environments/environment.prod.ts"
                }
              ],
              "optimization": true,
              "outputHashing": "all",
              "sourceMap": false,
              "extractCss": true,
              "namedChunks": false,
              "aot": true,
              "extractLicenses": true,
              "vendorChunk": false,
              "buildOptimizer": true
            }
          }
        }
      }
    }
  }
}

  1. Construcción de la Aplicación

Para construir tu aplicación Angular, utiliza el comando ng build. Este comando compila tu aplicación y la coloca en el directorio especificado en outputPath.

ng build --prod

2.1 Opciones de Construcción

  • --prod: Construye la aplicación en modo producción.
  • --aot: Habilita la compilación anticipada (Ahead-of-Time).
  • --output-hashing: Agrega un hash a los nombres de los archivos de salida para el almacenamiento en caché.

  1. Despliegue de la Aplicación

3.1 Despliegue en un Servidor Web

Una vez que tu aplicación está construida, puedes desplegarla en cualquier servidor web. Los archivos generados en el directorio dist/your-app-name son los que necesitas para el despliegue.

Ejemplo: Despliegue en Apache

  1. Copia los archivos del directorio dist/your-app-name a la carpeta raíz de tu servidor Apache.
  2. Configura el archivo .htaccess para redirigir todas las solicitudes a index.html.
<IfModule mod_rewrite.c>
  RewriteEngine On
  RewriteBase /
  RewriteRule ^index\.html$ - [L]
  RewriteCond %{REQUEST_FILENAME} !-f
  RewriteCond %{REQUEST_FILENAME} !-d
  RewriteRule . /index.html [L]
</IfModule>

3.2 Despliegue en Firebase Hosting

Firebase Hosting es una opción popular para desplegar aplicaciones Angular.

  1. Instala Firebase CLI:
npm install -g firebase-tools
  1. Inicia sesión en Firebase:
firebase login
  1. Inicializa Firebase en tu proyecto:
firebase init
  1. Selecciona "Hosting" y sigue las instrucciones para configurar tu proyecto.
  2. Despliega tu aplicación:
firebase deploy

3.3 Despliegue en GitHub Pages

GitHub Pages es otra opción para desplegar aplicaciones Angular.

  1. Instala angular-cli-ghpages:
npm install -g angular-cli-ghpages
  1. Construye tu aplicación:
ng build --prod --base-href "https://<username>.github.io/<repository>/"
  1. Despliega tu aplicación:
npx angular-cli-ghpages --dir=dist/your-app-name

  1. Ejercicio Práctico

Ejercicio: Despliegue en Firebase Hosting

  1. Construye tu aplicación: Usa el comando ng build --prod.
  2. Configura Firebase: Sigue los pasos para inicializar Firebase en tu proyecto.
  3. Despliega tu aplicación: Usa el comando firebase deploy.

Solución

  1. Construcción:
ng build --prod
  1. Configuración de Firebase:
firebase init
  1. Despliegue:
firebase deploy

Conclusión

En esta sección, has aprendido cómo construir y desplegar aplicaciones Angular. Este proceso es esencial para llevar tu aplicación desde el desarrollo hasta la producción. Ahora estás listo para compartir tu aplicación con el mundo. En el próximo tema, exploraremos el control de versiones con Git, una herramienta fundamental para gestionar el código de tu proyecto.

◄ Anterior
◄
Siguiente ►
►

Curso de Angular 2+

Módulo 1: Introducción a Angular

Módulo 2: Conceptos Básicos de TypeScript

Módulo 3: Componentes y Plantillas

Módulo 4: Directivas y Pipes

Módulo 5: Servicios e Inyección de Dependencias

Módulo 6: Enrutamiento y Navegación

Módulo 7: Formularios en Angular

Módulo 8: Cliente HTTP y Observables

Módulo 9: Gestión de Estado

Módulo 10: Pruebas en Angular

Módulo 11: Temas Avanzados

Módulo 12: Despliegue y Mejores Prácticas

El Proyecto | Sobre nosotros | Contribuir | Donaciones | Licencia
© Copyright 2024. Todos los derechos reservados