Tu Flujo de Trabajo de Desarrollo

Construir BookIt implica realizar cientos de pequeños cambios — editar componentes, ajustar estilos, agregar funcionalidades. El servidor de desarrollo hace que este proceso sea rápido al mostrar tus cambios instantáneamente en el navegador, sin necesidad de refrescar manualmente.

Lo Que Aprenderás

Cómo iniciar y usar el servidor de desarrollo de SvelteKit
Qué es Hot Module Replacement (HMR) y por qué es importante
Comandos de terminal y atajos de teclado para el desarrollo
Cómo configurar tu editor para la mejor experiencia

Inicia el Servidor de Desarrollo

Si el servidor no está ejecutándose desde la Lección 1.2, inícialo ahora:

cd bookit
npm run dev

Verás una salida como esta:

  VITE v5.4.11  ready in 438 ms

  ➜  Local:   http://localhost:5173/
  ➜  Network: use --host to expose
  ➜  press h + enter to show help

Abre http://localhost:5173 en tu navegador. Mantén tanto tu editor como el navegador visibles — idealmente uno al lado del otro.

Hot Module Replacement

El servidor de desarrollo usa Hot Module Replacement (HMR). Cuando guardas un archivo, Vite detecta el cambio y actualiza solo ese módulo en tu navegador — sin necesidad de recargar la página completa.

Veámoslo en acción. Abre src/routes/+page.svelte y cámbialo a:

<!-- filename: src/routes/+page.svelte -->
<h1>Welcome to SvelteKit</h1>
<p>We're building BookIt!</p>

Guarda el archivo. Tu navegador se actualiza instantáneamente. Sin botón de refresco, sin esperas.

Ahora agrega un poco de estilo:

<!-- filename: src/routes/+page.svelte -->
<h1>Welcome to SvelteKit</h1>
<p>We're building BookIt!</p>

<style>
  h1 {
    color: #2563eb;
  }
</style>

Guarda nuevamente. El encabezado se vuelve azul de inmediato.

Este ciclo de retroalimentación instantánea es la razón por la que el desarrollo moderno se siente tan diferente al ciclo de "editar, guardar, cambiar al navegador, refrescar, esperar" del pasado.

Comandos de Terminal

Mientras el servidor de desarrollo está en ejecución, puedes presionar teclas en la terminal para acciones rápidas:

Tecla	Acción
`h + enter`	Mostrar menú de ayuda
`r + enter`	Reiniciar el servidor
`u + enter`	Mostrar URL del servidor
`o + enter`	Abrir en el navegador
`c + enter`	Limpiar la consola
`q + enter`	Salir

La más útil es o + enter para abrir rápidamente tu aplicación si cerraste la pestaña del navegador.

Múltiples Terminales

Con frecuencia necesitarás la terminal para otras tareas mientras el servidor de desarrollo está en ejecución — instalar paquetes, ejecutar scripts o usar git. Tienes algunas opciones:

Opción 1: Múltiples pestañas de terminal. La mayoría de los terminales admiten pestañas. Mantén el servidor de desarrollo en una pestaña y usa otras para los comandos.

Opción 2: Terminal integrada de VS Code. Presiona Ctrl+` (acento grave) para abrir el panel de terminal. Haz clic en el ícono + para agregar más terminales.

Opción 3: Ejecutar en segundo plano. En Mac/Linux, agrega & para ejecutar en segundo plano: npm run dev &. (Aunque perderás los atajos de teclado.)

Para este curso, recomendamos mantener el servidor de desarrollo visible para que puedas ver cualquier mensaje de error.

Configuración del Editor

Una buena configuración del editor detecta errores antes de que guardes. Aquí está la configuración recomendada para VS Code:

Instala la Extensión de Svelte

Busca "Svelte for VS Code" en el panel de extensiones, o instálala desde la línea de comandos:

code --install-extension svelte.svelte-vscode

Esta extensión proporciona:

Resaltado de sintaxis para archivos .svelte
Autocompletado para la sintaxis específica de Svelte
Verificación de errores mientras escribes
Ir a la definición para componentes y variables

Habilitar Formato al Guardar

Abre la configuración de VS Code (Cmd+, en Mac, Ctrl+, en Windows) y busca "format on save". Habilítalo.

Luego busca "default formatter" y configúralo en Prettier para un formato consistente.

Configuraciones Recomendadas

Agrega estas configuraciones a tu VS Code para la mejor experiencia con Svelte:

{
  "editor.formatOnSave": true,
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "[svelte]": {
    "editor.defaultFormatter": "svelte.svelte-vscode"
  },
  "svelte.enable-ts-plugin": true
}

Cuando Algo Sale Mal

A veces el servidor de desarrollo se confunde, especialmente después de instalar nuevos paquetes o realizar cambios grandes. Aquí te mostramos cómo solucionar problemas comunes:

Los Cambios No Se Muestran

Primero, verifica que hayas guardado el archivo (busca el punto en la pestaña en VS Code). Si está guardado, intenta:

Forzar la recarga del navegador: Cmd+Shift+R (Mac) o Ctrl+Shift+R (Windows)
Reiniciar el servidor de desarrollo: presiona r + enter en la terminal, o detente con Ctrl+C y ejecuta npm run dev nuevamente

Errores de Compilación

Si ves una superposición de error en rojo en el navegador, lee el mensaje con cuidado. Generalmente apunta al archivo y número de línea exactos. Corrige el error, guarda, y la superposición desaparece.

Puerto Ya en Uso

Si ves "Port 5173 is already in use", detén el otro proceso o usa un puerto diferente:

npm run dev -- --port 3000

El Ciclo de Desarrollo

Este es el flujo de trabajo que usarás a lo largo de este curso:

Edita un archivo .svelte en tu editor
Guarda el archivo (Cmd+S o Ctrl+S)
Observa el cambio instantáneamente en tu navegador
Repite

Sin paso de compilación. Sin recarga manual. Solo un ciclo estrecho entre escribir código y ver resultados.

Este es el entorno que usaremos para construir cada funcionalidad de BookIt.

Resumen

El servidor de desarrollo de SvelteKit impulsado por Vite te brinda retroalimentación instantánea a través de Hot Module Replacement. Combinado con la extensión de Svelte para VS Code, tienes un entorno de desarrollo que detecta errores temprano y muestra los cambios de inmediato.

Puntos clave:

npm run dev inicia el servidor de desarrollo
Los cambios aparecen instantáneamente gracias a Hot Module Replacement
La extensión de Svelte para VS Code proporciona resaltado de sintaxis y verificación de errores
Presiona r + enter en la terminal para reiniciar el servidor si es necesario

Próximos Pasos

Tu entorno de desarrollo está listo. En la próxima lección, Realiza Tu Primer Cambio, transformaremos la página de inicio predeterminada en la página de bienvenida de BookIt — tu primera contribución real a la aplicación.