Ejercicios Prácticos para el Capítulo 12: Despliegue de Aplicaciones JavaScript

Estos ejercicios prácticos están diseñados para consolidar tu comprensión del despliegue de aplicaciones JavaScript, centrándose en el uso de control de versiones, empaquetadores, ejecutores de tareas y plataformas modernas de despliegue como Netlify y Vercel. Al completar estos ejercicios, ganarás experiencia práctica en la preparación y despliegue eficiente de aplicaciones web.

Ejercicio 1: Control de Versiones con Git

Objetivo: Inicializar un nuevo repositorio de Git, añadir los archivos de tu proyecto, hacer un commit y subirlos a un repositorio remoto en GitHub.

Solución:

Crear un Repositorio Local:

Navega al directorio de tu proyecto en la terminal.
Inicializa el repositorio:

git init

Añade archivos al área de preparación:
git add .
Realiza el commit de los cambios:
git commit -m "Initial commit"

Crear un Repositorio Remoto en GitHub:

Ve a GitHub y crea un nuevo repositorio.
Copia la URL del repositorio remoto proporcionada por GitHub.

Vincular el Repositorio Local con el Remoto y Hacer Push:
- Añade el repositorio remoto:

git remote add origin YOUR_REPOSITORY_URL

Empuja tu código a GitHub:
git push -u origin master

Ejercicio 2: Configurando Webpack para un Proyecto Simple

Objetivo: Configurar Webpack para empaquetar archivos JavaScript y CSS para un proyecto simple.

Solución:

Instalar Webpack y Cargadores:
- Instala Webpack y los cargadores necesarios:

npm install --save-dev webpack webpack-cli css-loader style-loader

Crear webpack.config.js:

Configura la configuración:

const path = require('path');

module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist')
  },
  module: {
    rules: [
      {
        test: /\\.css$/,
        use: ['style-loader', 'css-loader']
      }
    ]
  }
};

Añade un archivo CSS simple a tu proyecto y requiérelo en tu index.js.

Ejecutar Webpack:
- Añade un script de construcción en tu package.json:

"scripts": {
  "build": "webpack"
}

Construye el proyecto:
npm run build

Ejercicio 3: Desplegando un Sitio Estático en Netlify

Objetivo: Desplegar un sitio web estático simple en Netlify utilizando el despliegue continuo desde un repositorio de Git.

Solución:

Prepara Tu Proyecto:
- Asegúrate de que tu proyecto tenga un index.html y cualquier archivo CSS/JS asociado.
- Si aún no lo has hecho, sube tu proyecto a GitHub.
Configura Netlify:
- Regístrate en Netlify e inicia sesión.
- Haz clic en "Nuevo sitio desde Git" y selecciona tu repositorio de GitHub.
- Configura los ajustes de construcción si es necesario (para sitios estáticos, típicamente no se necesita un comando de construcción; solo configura el directorio de publicación si tu index.html no está en la raíz).
Desplegar:
- Sigue las indicaciones para desplegar tu sitio.
- Netlify proporcionará una URL para ver tu sitio en vivo.

Estos ejercicios proporcionan escenarios prácticos para aplicar los conceptos aprendidos en el Capítulo 12, desde usar Git para control de versiones, configurar Webpack para el empaquetado de activos, hasta desplegar un sitio usando Netlify. Completar estas tareas mejorará tu capacidad para gestionar y desplegar aplicaciones web de manera efectiva, asegurando que sean accesibles y eficientes para los usuarios finales.