Configurar un entorno de desarrollo local con Rollup requiere un paso extra que otros bundlers resuelven de forma nativa. Aquí aprenderás a integrar Web Dev Server, definir scripts de build y revisar qué genera Rollup al compilar un proyecto optimizado para producción.

¿Por qué Rollup necesita Web Dev Server para desarrollo local?

Rollup se enfoca en empaquetar, no en servir. Por eso necesitas una herramienta complementaria que levante un servidor, recargue cambios y abra el navegador automáticamente.

La alternativa recomendada es Web Dev Server, una dependencia que instalas como devDependency con el siguiente comando en terminal [00:32]:

bash npm install @web/dev-server -D

Esta herramienta cubre el vacío que deja Rollup en el flujo de trabajo cotidiano y te permite ver tus cambios en tiempo real sin recompilar manualmente.

¿Qué es Web Dev Server? Es un servidor de desarrollo ligero que sirve archivos, recarga cambios y se integra con bundlers como Rollup que no incluyen servidor propio.

¿Cómo configurar los scripts en package.json?

Una vez instalada la dependencia, abre tu archivo package.json y agrega dos scripts esenciales para mover el proyecto entre desarrollo y producción [01:10].

• start: ejecuta web-dev-server --config web-dev-server.config.js para levantar el entorno local.
• build: ejecuta rollup -c para generar el compilado final con la configuración del proyecto.

Con estos dos comandos cubres el ciclo completo: desarrollas con start y publicas con build. Cada uno apunta a un archivo de configuración distinto, lo que mantiene la lógica separada y ordenada.

¿Qué configuración necesita web-dev-server.config.js?

En la raíz del proyecto crea el archivo web-dev-server.config.js y exporta un objeto con las opciones del servidor [01:48]. Esta configuración define cómo se comporta tu entorno local mientras desarrollas.

Las propiedades clave que vas a definir son:

• port: el puerto donde se levanta el servidor, en este caso 3007.
• nodeResolve: en true para que resuelva módulos de Node correctamente.
• open: abre el navegador automáticamente al iniciar.
• watch: recarga la página cuando detecta cambios en los archivos.
• appIndex: la ruta del HTML inicial, apuntando a dist/index.html.

js module.exports = { port: 3007, nodeResolve: true, open: true, watch: true, appIndex: 'dist/index.html', };

Esta configuración mínima ya te da un entorno funcional con hot reload y apertura automática del navegador.

¿Qué genera Rollup al ejecutar el build?

Al correr npm run build, Rollup procesa el proyecto en aproximadamente 18 milisegundos y deposita los archivos en la carpeta dist [02:55]. Y aquí viene lo interesante: el resultado va más allá de un simple bundle de JavaScript.

¿Qué archivos aparecen en la carpeta dist?

El build genera varios artefactos automáticamente, sin que tengas que copiarlos a mano:

• assets/: carpeta con recursos copiados, como el logo del proyecto.
• bundle.css: hoja de estilos renombrada desde styles al nombre configurado.
• bundle.js: el JavaScript empaquetado con toda la lógica de la aplicación.
• bundle.js.map: el source map para depurar en producción.
• index.html: el HTML autogenerado con las referencias a bundle.css y bundle.js.

Lo notable es que no tuviste que crear un template HTML manualmente. El plugin se encargó de inyectar los enlaces correctos.

¿Cómo se optimizan las imágenes en el bundle?

Una de las transformaciones más útiles es que la imagen del logo deja de ser un archivo independiente y se convierte en una variable embebida como bloque de datos en base64 [03:40]. Esto reduce peticiones HTTP y mejora el rendimiento de carga.

¿Qué significa que una imagen esté en base64? Es una forma de representar la imagen como texto dentro del código JavaScript, eliminando la necesidad de descargarla como archivo separado.

¿Cómo verificar que el entorno local funciona?

Con el build listo, ejecuta npm run start y el navegador abrirá la URL del servidor. Vas a ver tu aplicativo con el logo y los llamados a la API funcionando [04:30].

Si inspeccionas el DOM, encontrarás que el header fue creado con createElement, la imagen se inyectó como bloque base64 y los items renderizan sus cards con los datos de la API. Todo generado de forma automática por el flujo de Rollup.

Esta es la razón por la que Rollup es parte fundamental de proyectos como Svelte: produce bundles ligeros, optimiza recursos y mantiene una configuración explícita que tú controlas.

¿Cómo desplegar el proyecto en GitHub Pages?

Para cerrar el flujo, sube tu proyecto a un repositorio y publícalo. Los pasos son los mismos que aplicaste antes con otros bundlers:

1. Instala gh-pages como dependencia de desarrollo.
2. Agrega el script de deploy en package.json.
3. Configura la rama y carpeta de publicación.
4. Guarda tus cambios en el repositorio.
5. Activa Pages desde la configuración del repo.

Después anímate a personalizarlo: ajusta el CSS, cambia la estructura, agrega más items o conecta otra API para mostrar información distinta. Déjame en los comentarios el enlace de tu proyecto y qué cambios hiciste.