Para crear un proyecto con Svelte, lo más sencillo es aprovechar la plantilla oficial que nos ofrece la página web de Svelte y utilizar Vite como herramienta para el desarrollo. Vite nos permite no solo probar la aplicación en tiempo real durante el desarrollo, sino también generar un bundle optimizado para producción, que es un único archivo .js que el navegador puede descargar y ejecutar eficientemente.
El proceso para iniciar un proyecto es bastante directo. En lugar de usar el comando genérico que crea un proyecto llamado myapp, podemos personalizar el nombre para que sea más descriptivo. Por ejemplo, podemos ejecutar en la línea de comandos:
npm init vite primer-svelte --template svelte
Aquí le indicamos a npm que queremos crear un proyecto con Vite llamado primer-svelte y que use la plantilla para Svelte. Es importante destacar que la pronunciación correcta de Vite es “vite” con sonido francés, aunque a veces se pronuncie “vait”.
Después de ejecutar este comando, es posible que nos pregunte si queremos instalar create vite; seguimos las instrucciones que nos da. Luego, entramos en la carpeta del proyecto con:
cd primer-svelte
Y ejecutamos:
npm install
para instalar todas las dependencias necesarias. Esto puede tardar un poco, así que es un buen momento para explorar qué archivos y carpetas se han creado.
Al abrir el proyecto en un editor como Visual Studio Code, veremos varios elementos. Algunos, como node_modules o package.json, son comunes en proyectos de Node.js y no requieren mucha explicación. Pero hay carpetas que sí son clave para entender cómo funciona un proyecto Svelte.
La carpeta src contiene el código fuente de nuestra aplicación. Aquí es donde estarán los componentes de Svelte, que son archivos con extensión .svelte. Estos componentes son la base para construir la interfaz y la lógica de nuestra aplicación. Dentro de src suele haber una subcarpeta llamada lib, que sirve para organizar componentes que queramos reutilizar o agrupar de forma separada.
También encontraremos una carpeta llamada assets, donde podemos colocar imágenes u otros recursos que queramos importar directamente en nuestro código. Por ejemplo, podemos importar una imagen con una sentencia import y luego usarla en una etiqueta <img> dentro de un componente.
Además, existe la carpeta public, destinada a almacenar recursos estáticos que queremos servir tal cual, sin procesamiento. Aquí podemos poner el favicon, archivos PDF u otros elementos que el servidor entregará directamente.
En la raíz del proyecto está el archivo vite.config.js, que contiene la configuración de Vite. Normalmente no es necesario modificarlo, ya que viene preparado con el plugin vite-plugin-svelte, que se encarga de transformar los archivos .svelte en archivos .js y .css que el navegador puede entender.
Para ver nuestra aplicación en acción, simplemente ejecutamos:
npm run dev
Este comando lanza un servidor de desarrollo con Vite y nos muestra una URL local que podemos abrir en el navegador. La aplicación que veremos es interactiva y nos da una idea de lo que podemos construir con Svelte. Aunque la apariencia puede variar según la versión de Svelte que estemos usando, la funcionalidad básica estará lista para que empecemos a trabajar.
Con esta base lista, el siguiente paso es comenzar a crear nuestros propios componentes de Svelte y construir aplicaciones más complejas y personalizadas.