Configura tu proyecto SvelteKit desde cero

Concepto clave

Configurar un proyecto SvelteKit desde cero es como preparar el terreno para construir una casa. Antes de colocar los cimientos, necesitas asegurarte de que tienes las herramientas adecuadas, el espacio de trabajo organizado y un plano claro. En el desarrollo web, esto significa tener Node.js instalado, un editor de código configurado y una comprensión básica de cómo SvelteKit estructura los proyectos para aplicaciones full-stack.

SvelteKit es un framework que combina el frontend y backend en una sola aplicación, permitiendo renderizado en el servidor (SSR), generación de sitios estáticos (SSG) y APIs integradas. A diferencia de frameworks tradicionales que requieren configuraciones complejas, SvelteKit ofrece una experiencia de desarrollo optimizada desde el primer comando. La configuración inicial establece la arquitectura base que determinará el rendimiento, la escalabilidad y la mantenibilidad de tu aplicación.

Cómo funciona en la práctica

Vamos a crear un proyecto SvelteKit paso a paso. Primero, abre tu terminal y navega al directorio donde quieres crear el proyecto. Luego, ejecuta el comando oficial de creación:

npm create svelte@latest mi-proyecto-sveltekit

Este comando iniciará un asistente interactivo que te preguntará:

1. El tipo de proyecto (elige "Skeleton project" para empezar desde cero)
2. Si quieres TypeScript (recomendado para proyectos intermedios)
3. Opciones adicionales como ESLint y Prettier para mantener código limpio

Después de completar el asistente, navega al directorio del proyecto e instala las dependencias:

cd mi-proyecto-sveltekit
npm install

Finalmente, inicia el servidor de desarrollo para ver tu aplicación en acción:

npm run dev

Verás un mensaje indicando que el servidor está corriendo en localhost:5173. Abre esa URL en tu navegador para ver la página inicial de SvelteKit.

Código en acción

Veamos la estructura básica que SvelteKit genera. El archivo package.json define las dependencias y scripts:

{
  "name": "mi-proyecto-sveltekit",
  "version": "0.0.1",
  "scripts": {
    "dev": "vite dev",
    "build": "vite build",
    "preview": "vite preview",
    "check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
    "check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch"
  },
  "devDependencies": {
    "@sveltejs/kit": "^2.0.0",
    "@sveltejs/adapter-auto": "^3.0.0",
    "svelte": "^4.0.0",
    "vite": "^5.0.0",
    "@sveltejs/vite-plugin-svelte": "^3.0.0"
  },
  "type": "module"
}

Ahora, modifiquemos la página principal. Abre src/routes/+page.svelte y reemplaza su contenido:

<script>
  let count = 0;
  
  function increment() {
    count += 1;
  }
</script>

<h1>Mi Primera App SvelteKit</h1>
<p>Contador: {count}</p>
<button on:click={increment}>Incrementar</button>

<style>
  h1 {
    color: #ff3e00;
  }
  button {
    background-color: #646cff;
    color: white;
    padding: 10px 20px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
  }
</style>

Guarda el archivo y observa cómo el navegador se actualiza automáticamente con los cambios. Esto es Hot Module Replacement en acción, una característica de Vite que mejora la experiencia de desarrollo.

Errores comunes

• Error 1: No tener Node.js actualizado. SvelteKit requiere Node.js 18 o superior. Solución: Verifica tu versión con node --version y actualiza si es necesario.
• Error 2: Olvidar instalar dependencias después de crear el proyecto. Esto causa errores al ejecutar npm run dev. Solución: Siempre ejecuta npm install en el directorio del proyecto.
• Error 3: Configurar adaptadores incorrectos para despliegue. El adaptador por defecto (adapter-auto) detecta automáticamente el entorno, pero para producción específica (como Vercel o Netlify), instala el adaptador correspondiente.
• Error 4: Modificar archivos de configuración críticos sin entender su propósito. Archivos como svelte.config.js o vite.config.js controlan el comportamiento del build. Solución: Estudia la documentación antes de hacer cambios.
• Error 5: Ignorar warnings de TypeScript o ESLint. Estos tools previenen bugs futuros. Solución: Configura tu editor para mostrar warnings y corrígelos progresivamente.

Checklist de dominio

1. Node.js 18+ instalado y verificado
2. Proyecto SvelteKit creado con el asistente interactivo
3. Dependencias instaladas correctamente (npm install completado sin errores)
4. Servidor de desarrollo ejecutándose (npm run dev muestra la aplicación en localhost:5173)
5. Estructura de directorios entendida (src/routes, static, etc.)
6. Primera modificación realizada en +page.svelte
7. Configuración básica revisada (package.json, svelte.config.js)

Configura un proyecto SvelteKit con TypeScript y ESLint

Sigue estos pasos para crear y configurar un proyecto SvelteKit optimizado para desarrollo profesional:

1. Abre una terminal y ejecuta npm create svelte@latest proyecto-practico
2. En el asistente, selecciona "Skeleton project" como plantilla
3. Habilita TypeScript cuando te pregunte
4. Añade ESLint y Prettier para mantener calidad de código
5. Navega al directorio del proyecto con cd proyecto-practico
6. Instala las dependencias con npm install
7. Inicia el servidor de desarrollo con npm run dev
8. Abre src/routes/+page.svelte y crea un componente que muestre tu nombre y la fecha actual
9. Verifica que TypeScript esté funcionando añadiendo una interfaz simple
10. Ejecuta npm run check para validar que no hay errores de TypeScript

Pistas

• Usa new Date().toLocaleDateString() para formatear la fecha
• Crea una interfaz TypeScript para tipar los datos del componente
• Revisa la consola del navegador para debuggear si hay errores

Evalua tu comprension

Completa el quiz interactivo de arriba para ganar XP.

Práctica acompañada: Una interfaz web de principio a fin

Estado, formularios y una API pequeña. Usa este cuaderno como práctica complementaria de la ruta; el material original de la lección continúa siendo tu referencia.

Práctica: cuatro pruebas de comportamiento

Prueba un título normal, solo espacios, 121 caracteres y una falla de red simulada. Registra la respuesta y el estado de la interfaz. Repite usando solo teclado: debes llegar al campo, enviarlo y encontrar el error sin usar el ratón.

Después agrega una segunda tarea y cambia el orden de la lista. Comprueba que cada botón sigue actuando sobre el elemento correcto. Si trabajas con microservicios, dibuja qué servicio posee el dato y qué ocurre si la dependencia no responde. No necesitas una infraestructura distribuida para aprender a definir tiempos de espera y errores comprensibles.

Comprueba tu entrega

Entrega el código, el contrato de API y evidencia de las cuatro pruebas. Indica si los datos se guardan o desaparecen al recargar. Una demostración en memoria debe decirlo para que nadie confunda un prototipo con almacenamiento persistente.

• Abrir el cuaderno ilustrado de 7 páginas
• Descargar PDF, ejercicios y plantillas de esta ruta
• MDN: aprendizaje de desarrollo web · recurso externo
• CS50 Web: HTML y CSS · inglés · video complementario externo