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á:

El tipo de proyecto (elige "Skeleton project" para empezar desde cero)
Si quieres TypeScript (recomendado para proyectos intermedios)
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

Node.js 18+ instalado y verificado
Proyecto SvelteKit creado con el asistente interactivo
Dependencias instaladas correctamente (npm install completado sin errores)
Servidor de desarrollo ejecutándose (npm run dev muestra la aplicación en localhost:5173)
Estructura de directorios entendida (src/routes, static, etc.)
Primera modificación realizada en +page.svelte
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:

Abre una terminal y ejecuta npm create svelte@latest proyecto-practico
En el asistente, selecciona "Skeleton project" como plantilla
Habilita TypeScript cuando te pregunte
Añade ESLint y Prettier para mantener calidad de código
Navega al directorio del proyecto con cd proyecto-practico
Instala las dependencias con npm install
Inicia el servidor de desarrollo con npm run dev
Abre src/routes/+page.svelte y crea un componente que muestre tu nombre y la fecha actual
Verifica que TypeScript esté funcionando añadiendo una interfaz simple
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.

Configura tu proyecto SvelteKit desde cero