Tras crear un proyecto de Svelte (revisa Crear proyectos Svelte si no sabes cómo), te encontrarás con que se han creado una serie de carpetas y ficheros con el esqueleto de un proyecto.

Ficheros y carpetas a primer nivel

Aparte de los Ficheros comunes en cualquier proyecto frontend que ya deberías conocer, existen estos:

  • svelte-config.js: Contiene la configuración de Svelte. Dentro tienes que poner un adapter, por defecto está el auto. Con los adapters controlas si quieres que el proyecto se compile en modo SPA (Single Page Application), en modo SSR* (Server Side Rendering) o incluso en modo estático.
  • vite.config.js: Contiene la configuración de Vite, el encargado de empaquetar y compilar el proyecto. De no ser que necesites algo muy específico es raro que lo tengas que modificar.

Por último a primer nivel hay un par de carpetas aparte de la de src:

  • .svelte-kit: En esta carpeta Svelte genera ficheros mientras estás desarrollando, puedes ignorarla.
  • node_modules: En esta carpeta se instalan todas las dependencias, si la borras no podrás arrancar el proyecto.
  • static: En esta carpeta tienes que meter todos los ficheros estáticos que quieras usar en tu proyecto (imágenes, vídeos y esa clase de ficheros).
  • tests: Si al generar el proyecto marcaste la opción de testing es posible que se haya generado esta carpeta. Como su nombre indica aquí se meten todos los tests.

Ficheros y carpetas dentro de src

En la carpeta src es donde está el código fuente del proyecto (del inglés source). Aquí dentro te encontrarás con varias carpetas:

  • lib: En esta carpeta puedes meter funciones o piezas que puedes reutilizar en varias partes del resto del código del proyecto. Sería algo así como la carpeta shared en otros lenguajes. Al meter código en esta carpeta luego vas a poder importarlo mediante el alias de $lib.
  • routes: En esta carpeta es donde van a ir cada una de las rutas de la web o aplicación que estés creando. Recuerda que en SvelteKit se crean las rutas mediante los ficheros que se han creado en esta carpeta, por lo que tienes que tener cuidado con los nombres. Más info en Sistema de routing de SvelteKit 🚧.

Por último existe el fichero app.html. Este fichero contiene el <head> general de la web, aquí es donde puedes cargar cualquier cosa que sea global para todas las rutas de la web.

Y poco más. Como ves Svelte no genera demasiados ficheros y carpetas y deja mucha flexibilidad al programador/a a la hora de estructurar su proyecto.

Ahora que sabes la estructura básica te recomiendo que sigas por la parte de Crear un componente en Svelte