Introduccion

1

Empaquetadores Web: Herramientas y Evolución para Desarrolladores

2

Módulos y empaquetadores en JavaScript: fundamentos esenciales

3

Empaquetadores de Módulos en JavaScript: Webpack, Parcel, Sbuild y Más

4

Empaquetadores de Módulos JavaScript: Webpack y Alternativas

Webpack

5

Configuración y Uso de Webpack para Proyectos Web

6

Configuración de Webpack para Aplicación Web Dinámica

7

Creación de una Landing Page con JavaScript y Tailwind CSS

8

Manipulación del DOM con JavaScript: Creación de Funciones y Templates

9

Configuración y despliegue de aplicaciones web con Webpack y GitHub Pages

Parcel

10

Creación de Proyectos Web con Parcel y Fake API de Platzi

11

Creación de una Aplicación Web con Fake API y Parcel

12

Creación de SPA con Vanilla JavaScript y Parcel

13

Configuración y Uso de Parcel para Proyectos Web

ESBuild

14

Configuración de Proyectos React y TypeScript con SBuild

15

Desarrollo de Aplicaciones con React y TypeScript: Primeros Pasos

16

Integración de UseState y UseCallback en React con SBuild

17

Configuración de Servidor Local con sbuild en JavaScript

Rollup

18

Configuración de Proyectos con Roloop y Plugins Avanzados

19

Configuración de Plugins en Rollup para Optimización de Proyectos

20

Construcción de Aplicación Web con JavaScript y Fake API

21

Instalación y configuración de DevServer con Rollup

Vite

22

Configuración y uso de herramientas de empaquetado en JavaScript

Conclusiones

23

Empaquetadores JavaScript: Ventajas y Desventajas

No tienes acceso a esta clase

¡Continúa aprendiendo! Únete y comienza a potenciar tu carrera

Instalación y configuración de DevServer con Rollup

21/23
Recursos

¿Cómo configurar un entorno de desarrollo local con DevServer?

Al comenzar a trabajar en un proyecto, es esencial establecer un ambiente que permita realizar pruebas y ajustes locales de manera eficiente. En este contenido, exploraremos cómo implementar un entorno de desarrollo local utilizando DevServer, una herramienta que facilita la integración continua mediante la visualización instantánea de cambios.

Instalación de DevServer

Para comenzar, es necesario instalar la herramienta DevServer, que brinda las funcionalidades necesarias para el desarrollo local. Sigue estos pasos para realizar la instalación:

  • Ejecuta el siguiente comando en tu terminal para agregar DevServer como dependencia:

    npm install @web/dev-server --save-dev
    

Esta instalación añade las capacidades necesarias para monitorear y visualizar cambios en tiempo real durante el desarrollo.

Agregar scripts al archivo package.json

Una vez instalada la dependencia, debes configurar comandos en el archivo package.json para gestionar tanto el entorno de desarrollo como el empaquetado del proyecto. Estos son los scripts recomendados:

  1. Script start para desarrollo local: Este comando iniciará el servidor de desarrollo. Incluye la configuración necesaria para reconocer el recurso web-dev-server.config.js.

    "start": "web-dev-server --config web-dev-server.config.js",
    
  2. Script build para crear el proyecto: Genera la compilación necesaria para el despliegue.

    "build": "rollup -c",
    

Configuración del archivo web-dev-server.config.js

Ahora, debes crear un archivo web-dev-server.config.js en la raíz del proyecto. Este archivo contendrá configuraciones esenciales que el servidor utilizará para ejecutar el proyecto:

module.exports = {
  port: 3007,
  nodeResolve: true,
  open: true,
  watch: true,
  appIndex: 'this-index.html',
};
  • port: Especifica el puerto que el servidor utilizará.
  • nodeResolve: Permite resolver los módulos Node.
  • open: Abre automáticamente el navegador.
  • watch: Monitorea los cambios en tiempo real.
  • appIndex: Define el archivo de entrada principal del proyecto.

¿Cómo crear el build del proyecto?

Generar el build del proyecto es crucial para experimentar cómo se verá y funcionará el producto final compilado. Utilizando Rolub, puedes crear este build de la siguiente manera:

  1. Ejecuta el comando para generar el compilado:

    npm run build
    
  2. Al completar, analiza los archivos generados en la carpeta dist, donde encontrarás:

    • Assets copiados: como logos y otros elementos visuales.
    • Archivos CSS y JS agrupados: Bundle de estilos y scripts optimizados.
    • Archivos adicionales: Información convertida en blobs de datos para mejorar la eficiencia.

¿Cómo correr el proyecto y visualizar los cambios?

Por último, para visualizar y verificar los cambios realizados en tiempo real, inicia el entorno de desarrollo local:

  1. Ejecuta el comando para iniciar el servidor:

    npm run start
    
  2. Abre la URL generada para visualizar tu proyecto en el navegador.

Esta configuración no solo permite una vista previa del proyecto con rapidez, sino que también optimiza su rendimiento al convertir imágenes y elementos en blobs de datos base 64.

Con estos pasos, tienes una aplicación robusta y lista para seguir mejorando. Experimenta con el CSS, adapta la estructura o incluso integra diferentes APIs. Esta flexibilidad te permitirá avanzar y profundizar en el desarrollo de proyectos cada vez más complejos.

¡Continúa explorando y compartiendo tus creaciones! Recuerda comentar tus proyectos y transformaciones realizadas, ya que es una excelente manera de recibir feedback y seguir aprendiendo juntos. ¡Ánimo con tus nuevas aventuras en desarrollo!

Aportes 9

Preguntas 2

Ordenar por:

¿Quieres ver más aportes, preguntas y respuestas de la comunidad?

me generaba un error al hacer el build del proyecto, lo solucione agregando al package.json
"type": “module”

De igual manera al colocarlo y querer correr el servidor me generaba otro error en el web-dev-server.config.js para enves de colocar module.exports lo que hice fue cambiarlo por export default { …}

Lo dejo por si alguien tiene ese mismo error.

npm install @web/dev-server -D

Para lograr el npm run build tuve que arreglar unas cosas primero.

  1. agregar en el archivo package.json:
 },
  "type": "module"
}

Y cambiar el nombre del archivo de css que está en la ruta src/styles/
styles - por - style

y listo ya tengo el resultado en la carpeta dist

Les recomiendo que agreguen estas opciones en el plugin de html en el archivo rollup.config.js:

html({
  meta: [
    {
      charset: "UTF-8"
    },
    {
      name: "viewport", 
      content: "width=device-width, initial-scale=1.0"
    }
  ]
}),

Esto es para que en su archivo bundle.html cree las dos etiquetas meta de charset y de viewport que son muy importantes en cualquier proyecto web.

rollup -c  |  --config <filename>

Usa un archivo de configuración; si no se especifica buscara por defecto el archivo rollup.config.js

Les comparto mi proyecto y mi repositorio 😎

Que lindo se siente saber solucionar un problema al leer el error <3

Solo hice unos pequeños cambios en el CSS y agregué un poco más de productos para que no se sintiera tan vacía la web.
A si quedo mi proyecto:

Excelente video 😎👍