¿Cómo crear un proyecto de Svelte?

En el primer capítulo vimos en qué consistía Svelte, y ahora en el segundo capítulo vamos a ver cómo crear un proyecto de Svelte utilizando la línea de comandos. Para ello me he venido a la página web de Svelte. Y es que en verdad, para crear un proyecto de Svelte lo que podemos hacer es utilizar su plantilla. Y estas, son sus instrucciones de instalación.

En este caso, nosotros podemos utilizar Vite en tiempo de desarrollo para probar que nuestra aplicación se ve como debe esperar. Y también cuando hayamos terminado de desarrollar, podremos fabricar un bundle que es un único archivo .js que contendrá todo el código de la aplicación para que el navegador web luego lo descargue y lo ejecute.

Entonces el proceso para crear un proyecto de Svelte es tan fácil como copiar y pegar esto sobre la línea de comandos. Aunque yo os recomiendo que no lo hagáis y que modifiquéis un poquito el comando ya que si no se creará con el nombre my-app. Nosotros lo que tendremos que hacer es poner en la línea de comandos lo siguiente: npm init vite, para decirle que queremos crear un proyecto de Vite. A veces lo pronunciaré bite, pero la forma correcta es veet, porque es una palabra francesa. Y luego el nombre del proyecto que queramos crear, por ejemplo yo lo voy a llamar primer-svelte, porque al fin y al cabo es el primer proyecto de Svelte que creo. Después pondremos dos guiones, después de otro espacio pondremos --template y luego pondremos svelte.

Esto es porque Vite, aparte de poder crear proyectos, que es lo que podemos hacer simplemente si usamos npm init vite, también tiene varias plantillas por si queremos crear ya proyectos preparados, por ejemplo, para Svelte o para otros frameworks. Así que con esto lo que le voy a decir es que quiero que el proyecto sea de Svelte, para que ya me deje una primera versión lista para utilizar.

Una vez que se haya hecho esto, es posible que os pregunte si queréis instalar create-vite, y veréis estas instrucciones. Vamos a ejecutarlas tal cual. Nos vamos con cd a la carpeta del proyecto y hacemos npm install para instalar las dependencias, que esto es algo que tomará un poquito de tiempo de modo que yo voy a aprovechar mientras tanto para ir contando qué es lo que nos ha creado exactamente. Entonces voy a ir abriendo esta carpeta en Visual Studio Code para así presentaros lo que se crea cuando hacemos este npm init.

Dentro nos encontraremos una serie de archivos y una serie de carpetas. ¿Y de aquí qué es lo más importante? Hay algunos archivos que no requieren presentación, como por ejemplo el node_modules o el package.json, sin embargo algunas carpetas sí que son de interés. Por ejemplo, src va a contener el código fuente de nuestro programa de Svelte, donde vamos a tener los componentes Svelte, que son estos archivos que terminan en .svelte. Ya veremos cómo se puede crear este código y cómo interpretar lo que hay aquí dentro, pero por el momento basta decir que nosotros cuando creemos componentes los colocaremos dentro de la carpeta src y en muchos casos dentro de la carpeta lib para poder agrupar esos componentes por separado. También tenemos esta carpeta llamada assets, donde nos encontraremos imágenes que son las que podemos agregar a nuestro proyecto para importarlas posteriormente como hace en este caso, donde pone una etiqueta img src y tal cual importa la imagen usando una sentencia import. Esto ya lo iremos viendo progresivamente. También podemos tener una carpeta public, que es donde dejaremos algunos assets estáticos que queramos servir en bruto, como por ejemplo el favicon o quizás algún archivo estático como un PDF o algo que en general queramos que se sirva tal cual. Y todo esto estará aderezado por un archivo llamado vite.config.js, que contiene la configuración de Vite. Por lo general, salvo que queráis modificar la forma en la que se compila el código, aquí no le meteréis mucha mano, ya que viene con el plugin vite-plugin-svelte listo para utilizar, así que este es quien prácticamente se va a ocupar de hacer esa transformación de archivo .svelte a archivos .js y .css.

Si queremos llevarnos esto al navegador web, todo lo que tenemos que hacer es utilizar el comando npm run dev. Lo estaremos usando todo el tiempo para poder lanzar el servidor de desarrollo. Si ejecutamos npm run dev, esto lanzará un servidor de Vite y nos mostrará una URL que podemos utilizar para ver a través del navegador precisamente esa aplicación de svelte, que en este caso por defecto tendrá este aspecto, aunque es posible que si estáis usando una versión más antigua de Svelte sea ligeramente distinta. Es una aplicación interactiva, podemos hacer clic y esto nos da una pequeña idea del tipo de cosas que podemos hacer con Svelte, aunque a lo largo de este curso os iré contando más cosas que se pueden hacer y haremos aplicaciones parecidas a esta.

Y para ello precisamente casi que mejor empezar de forma práctica. Vamos a ver en el siguiente capítulo cómo crear nuestros primeros componentes de Svelte.