Instalación y Configuración de Proyecto Web con Git y Webpack

¿Cómo clonar e instalar el proyecto?

Para comenzar a trabajar con el proyecto que optimizaremos, lo primero que debemos hacer es clonar el repositorio y garantizar que todas las dependencias se instalen correctamente. A continuación, encontrarás una serie de pasos para lograrlo en tu propio entorno de desarrollo.

• Clonación del repositorio:
  1. Abre tu terminal y navega a una carpeta donde deseas clonar el proyecto. En este ejemplo, el nombre de la carpeta es "Platzi".
  2. Accede al repositorio del proyecto en GitHub, y utiliza el botón "Clone or download" para copiar la URL.
  3. En tu terminal, ejecuta el siguiente comando para clonar el repositorio:

git clone <URL del repositorio>

Este paso creará una nueva carpeta con el nombre del proyecto.

• Instalación de dependencias:
  1. Ingresa a la carpeta del proyecto clonado.
  2. Ejecuta el siguiente comando para instalar las dependencias necesarias:

npm install

Mientras las dependencias se instalan, puedes explorar la estructura del proyecto abriéndolo en Visual Studio Code.

¿Cómo está estructurado el proyecto?

El proyecto que tenemos a mano es una aplicación relativamente típica que utiliza diversas herramientas y librerías para su funcionamiento óptimo. Veamos algunos de los aspectos más relevantes.

• Estructura de archivos:

  • La aplicación cuenta con un archivo index.html que carga archivos de JavaScript e imágenes.
  • El archivo JavaScript principal, index.js, se encuentra en la carpeta src y es responsable de interactuar con una API para obtener y presentar información relevante sobre animes populares.

• Generación de archivos de bundle: La magia del proyecto se encuentra en cómo Webpack genera los archivos de bundle. Webpack toma el archivo fuente (source.index.js) y genera un archivo optimizado para el navegador.

• Uso de Hyperscript: El proyecto utiliza una librería llamada Hyperscript que simplifica la creación de elementos HTML con JavaScript. Esto es especialmente útil para aquellos familiarizados con frameworks como React.

• Conexión con una API: Nos conectamos a una API de "kitsub.io" para renderizar elementos de anime en el cliente. Esto nos permite mostrar información actualizada sobre tendencias de anime.

¿Cómo ejecutar el proyecto?

Una vez que todas las dependencias estén instaladas, puedes ejecutar el proyecto localmente para ver cómo funciona. Aquí te explicamos cómo hacerlo.

1. Asegúrate de que todas las dependencias estén correctamente instaladas y no hay errores.
2. Ejecuta el siguiente comando para iniciar el servidor Webpack:

npm run start

El comando anterior iniciará un servidor en el puerto localhost:8080.

3. Abre tu navegador y navega a la dirección http://localhost:8080 para ver el proyecto en acción.

La página mostrará información sobre animes de moda, los de mejor calificación y los más populares, coherente con los datos obtenidos de la API mencionada.

¿Cómo generar un reporte de Lighthouse?

Antes de comenzar con las optimizaciones es fundamental entender el estado actual de la aplicación. Para ello, podemos generar un informe de Lighthouse.

• Ejecuta Lighthouse en tu navegador para obtener un diagnóstico completo del rendimiento, accesibilidad y mejores prácticas del proyecto.

Con esta información inicial, podremos identificar las áreas más débiles de nuestra aplicación y priorizar las mejoras.

Continúa aprendiendo y siempre revisa y verifica que hayas podido instalar y correr el proyecto sin problemas. En la próxima clase, profundizaremos en aspectos fundamentales sobre el navegador, pieza clave para próximas optimizaciones. ¡Sigue adelante, tu aprendizaje vale la pena!