Conoce Tu Espacio de Trabajo

Antes de comenzar a construir BookIt, entendamos con qué estamos trabajando. SvelteKit generó varias carpetas y archivos, cada uno con un propósito específico. Saber dónde va cada cosa te ahorrará confusión más adelante.

Qué Aprenderás

El propósito de cada carpeta en un proyecto SvelteKit
Qué archivos editarás frecuentemente vs. los que casi nunca tocarás
Dónde vivirán las páginas, componentes y datos de BookIt

El Panorama General

Abre la carpeta bookit en tu editor de código. Verás una estructura como esta:

bookit/
├── src/
│   ├── lib/
│   │   └── index.ts
│   ├── routes/
│   │   └── +page.svelte
│   ├── app.d.ts
│   └── app.html
├── static/
├── .gitignore
├── .prettierrc
├── eslint.config.js
├── package.json
├── svelte.config.js
├── tsconfig.json
└── vite.config.ts

No te preocupes por memorizar todo. Nos enfocaremos en lo que importa para construir BookIt.

La Carpeta `src`

Aquí es donde pasarás el 95% de tu tiempo. Todo el código de tu aplicación vive aquí.

`src/routes/`

Esta carpeta define tus páginas. SvelteKit usa enrutamiento basado en archivos, lo que significa que la estructura de carpetas aquí se mapea directamente a las URLs de tu aplicación.

Por ahora solo hay un archivo:

src/routes/
└── +page.svelte    →    http://localhost:5173/

Ese archivo +page.svelte es tu página de inicio. Cuando agreguemos más páginas a BookIt, crearemos más archivos y carpetas aquí:

src/routes/
├── +page.svelte           →    /
├── about/
│   └── +page.svelte       →    /about
├── services/
│   ├── +page.svelte       →    /services
│   └── [slug]/
│       └── +page.svelte   →    /services/lawn-mowing
└── bookings/
    └── +page.svelte       →    /bookings

El nombre de la carpeta se convierte en la ruta URL. Exploraremos el enrutamiento en profundidad en el Módulo 2.

`src/lib/`

Esta es tu biblioteca de componentes y código compartido. Todo lo que quieras reutilizar en múltiples páginas va aquí.

Para BookIt, esta carpeta eventualmente contendrá:

Componentes reutilizables como ServiceCard.svelte y BookingForm.svelte
Funciones utilitarias para formatear precios y fechas
Datos compartidos y definiciones de tipos

SvelteKit proporciona un alias de importación especial para esta carpeta: $lib. En lugar de escribir ../../../lib/components/ServiceCard.svelte, puedes escribir $lib/components/ServiceCard.svelte desde cualquier lugar de tu proyecto.

`src/app.html`

Este es el shell HTML que envuelve toda tu aplicación. Ábrelo y verás:

<!-- filename: src/app.html -->
<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <link rel="icon" href="%sveltekit.assets%/favicon.png" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    %sveltekit.head%
  </head>
  <body data-sveltekit-preload-data="hover">
    <div style="display: contents">%sveltekit.body%</div>
  </body>
</html>

Los marcadores %sveltekit.head% y %sveltekit.body% son donde SvelteKit inyecta el contenido de tu página. Raramente editarás este archivo, pero es útil para agregar meta tags globales o hojas de estilo externas.

`src/app.d.ts`

Este archivo de declaración de TypeScript define tipos que están disponibles en toda tu aplicación. SvelteKit lo usa para cosas como tipar el objeto locals en el código del lado del servidor. No necesitarás tocarlo hasta que lleguemos a la autenticación en los módulos avanzados.

La Carpeta `static`

Los archivos en static/ se sirven tal cual en la URL raíz de tu sitio. Coloca imágenes, fuentes y otros recursos aquí.

Por ejemplo, static/logo.png queda disponible en http://localhost:5173/logo.png.

Para BookIt, agregaremos:

Imágenes de servicios
Un favicon
Cualquier archivo descargable

No pongas aquí archivos que necesiten procesamiento (como Sass o TypeScript). Esos pertenecen a src/.

Archivos de Configuración

Estos archivos configuran varias herramientas de tu proyecto. Raramente los editarás después de la configuración inicial.

`package.json`

Lista las dependencias y scripts de tu proyecto. Los scripts importantes son:

{
  "scripts": {
    "dev": "vite dev",
    "build": "vite build",
    "preview": "vite preview"
  }
}

npm run dev — Inicia el servidor de desarrollo
npm run build — Compila para producción
npm run preview — Previsualiza la compilación de producción localmente

`svelte.config.js`

Configura el compilador de Svelte y SvelteKit. La configuración predeterminada funciona bien para BookIt. Revisaremos este archivo cuando hagamos el despliegue en el Módulo 32.

`vite.config.ts`

Configura Vite, la herramienta de compilación que impulsa el servidor de desarrollo y las compilaciones de producción de SvelteKit. Los valores predeterminados funcionan bien; solo editarás esto para agregar plugins.

`tsconfig.json`

Configuración de TypeScript. Los valores predeterminados están ajustados para SvelteKit y funcionan de inmediato.

`eslint.config.js` y `.prettierrc`

Herramientas de calidad de código. ESLint detecta posibles errores; Prettier formatea tu código de manera consistente. Tu editor puede ejecutarlas automáticamente al guardar.

Archivos que Editarás Frecuentemente

Mientras construyes BookIt, trabajarás principalmente en:

Ubicación	Qué Va Ahí
`src/routes/`	Páginas y layouts
`src/lib/`	Componentes reutilizables y utilidades
`static/`	Imágenes y recursos

Archivos que Raramente Tocarás

Estos son en su mayoría "configura y olvida":

Archivo	Propósito
`svelte.config.js`	Configuración del compilador
`vite.config.ts`	Configuración de la herramienta de compilación
`tsconfig.json`	Configuración de TypeScript
`app.html`	Shell HTML

Una Vista Previa de la Estructura de BookIt

Al final de este curso, tu carpeta src/ se verá algo así:

src/
├── lib/
│   ├── components/
│   │   ├── ServiceCard.svelte
│   │   ├── BookingForm.svelte
│   │   ├── PriceBadge.svelte
│   │   └── ...
│   ├── stores/
│   │   └── cart.ts
│   ├── utils/
│   │   └── format.ts
│   └── data/
│       └── services.ts
├── routes/
│   ├── +layout.svelte
│   ├── +page.svelte
│   ├── about/
│   ├── services/
│   ├── bookings/
│   └── api/
└── app.html

Construiremos esta estructura pieza por pieza. Cada lección agrega algo nuevo en el lugar correcto.

Resumen

Los proyectos SvelteKit tienen una organización clara: las páginas viven en src/routes/, el código compartido vive en src/lib/, y los recursos estáticos van en static/. Los archivos de configuración en la raíz raramente necesitan editarse después de la configuración inicial.

Puntos clave:

src/routes/ define tus páginas — la estructura de carpetas = la estructura de URLs
src/lib/ contiene componentes reutilizables, accesibles mediante $lib
static/ sirve archivos directamente en la raíz de tu sitio
Los archivos de configuración son en su mayoría "configura y olvida"

Próximos Pasos

Ahora sabes dónde va cada cosa. En la siguiente lección, Entendiendo los Archivos .svelte, veremos el interior de un componente Svelte y aprenderemos sobre sus tres secciones: script, markup y style.

Conoce Tu Espacio de Trabajo

Qué Aprenderás

El Panorama General

La Carpeta src

src/routes/

src/lib/

src/app.html

src/app.d.ts

La Carpeta static