Hora de Construir

Ya entiendes qué hace diferente a Svelte. Ahora vamos a crear el proyecto que construiremos a lo largo de este curso. Al final de esta lección, tendrás una aplicación SvelteKit funcionando en tu máquina.

Lo Que Aprenderás

Cómo usar el CLI sv para generar un proyecto SvelteKit
Qué opciones elegir durante la configuración del proyecto
Cómo instalar dependencias y verificar que todo funcione

Requisitos Previos

Antes de comenzar, asegúrate de tener Node.js instalado. Abre tu terminal y ejecuta:

node --version

Deberías ver un número de versión como v20.11.0 o superior. SvelteKit requiere Node.js 18.13 o posterior. Si necesitas instalar o actualizar Node.js, visita nodejs.org.

También necesitarás un editor de código. Recomendamos VS Code con la extensión oficial de Svelte para resaltado de sintaxis y autocompletado.

Crear el Proyecto

Abre tu terminal, navega hacia donde guardas tus proyectos y ejecuta:

npx sv create bookit

El CLI sv lanzará un prompt interactivo. Esto es lo que debes elegir para BookIt:

┌  Welcome to the Svelte CLI! (v0.6.x)
│
◇  Which template would you like?
│  SvelteKit minimal
│
◇  Add type checking with TypeScript?
│  Yes, using TypeScript syntax
│
◆  Project created
│
◇  What would you like to add to your project?
│  prettier, eslint
│
◇  Which package manager do you want to install dependencies with?
│  npm (or pnpm/yarn if you prefer)
│
└  You're all set!

Analicemos estas elecciones:

SvelteKit minimal nos da un punto de partida limpio sin contenido de demostración. Construiremos todo desde cero, lo cual es mejor para aprender.

TypeScript syntax habilita la verificación de tipos. Incluso si eres nuevo en TypeScript, tenerlo disponible ayuda a detectar errores temprano. Puedes escribir JavaScript plano e ir agregando tipos gradualmente.

Prettier y ESLint mantienen nuestro código formateado de manera consistente y detectan errores comunes. Estas son herramientas estándar en proyectos profesionales.

Instalar Dependencias

Después de que el CLI termine, navega a tu proyecto e instala las dependencias:

cd bookit
npm install

Esto descarga todos los paquetes que SvelteKit necesita. La primera vez tarda un momento.

Verificar que Funciona

Inicia el servidor de desarrollo:

npm run dev

Deberías ver una salida como:

  VITE v5.x.x  ready in 500 ms

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

Abre http://localhost:5173 en tu navegador. Verás la página de bienvenida minimal de SvelteKit — simplemente un mensaje "Welcome to SvelteKit".

Esa página está a punto de convertirse en la página principal de BookIt.

¿Qué Acaba de Pasar?

Cuando ejecutaste sv create, el CLI generó una estructura de proyecto completa con:

Archivos de configuración para Vite (la herramienta de compilación), TypeScript, ESLint y Prettier
Una carpeta src donde vive todo el código de tu aplicación
Una carpeta static para recursos como imágenes y fuentes
Archivos de paquete que definen tus dependencias

Exploraremos esta estructura en detalle en la próxima lección. Por ahora, lo importante es que tienes una aplicación SvelteKit funcionando.

Mantén el Servidor Ejecutándose

A lo largo de este curso, querrás mantener el servidor de desarrollo en ejecución mientras trabajas. Recarga automáticamente cuando guardas cambios, por lo que verás las actualizaciones al instante en tu navegador.

Si necesitas detener el servidor, presiona Ctrl+C (o Cmd+C en Mac) en la terminal. Reinícialo en cualquier momento con npm run dev.

Problemas Comunes

Puerto Ya en Uso

Si ves un error sobre el puerto 5173 en uso, otra aplicación está utilizando ese puerto. Puedes detener esa aplicación o ejecutar SvelteKit en un puerto diferente:

npm run dev -- --port 3000

Versión de Node Muy Antigua

Si obtienes errores sobre sintaxis no compatible o funcionalidades faltantes, verifica tu versión de Node con node --version. Actualiza a Node 18.13 o posterior si es necesario.

Errores de Permisos en Windows

Si npx sv create falla con errores de permisos, intenta ejecutar tu terminal como Administrador, o usa un gestor de versiones de Node como nvm-windows.

Resumen

Has creado el proyecto BookIt usando el CLI oficial de SvelteKit. El proyecto está configurado con TypeScript, Prettier y ESLint — una base sólida para el desarrollo profesional.

Puntos clave:

Usa npx sv create para generar nuevos proyectos SvelteKit
Elige "SvelteKit minimal" para un punto de partida limpio
Ejecuta npm run dev para iniciar el servidor de desarrollo
El servidor de desarrollo se recarga automáticamente cuando guardas cambios

Próximos Pasos

Tu proyecto está en ejecución, pero ¿qué hay exactamente dentro? En la próxima lección, Explorar la Estructura del Proyecto, abriremos las carpetas y archivos para entender cómo está organizado un proyecto SvelteKit.