Lemoncode TV

Creando un proyecto con Svelte

Uno de los desafíos que nos podemos encontrar cuando nos metemos con un nuevo framework o librería es como crear un proyecto en blanco, aquí nos podemos enfrentar a configuraciones de bundlings o tirar de Clis.

Para poder jugar con Svelte, hasta hace poco, podíamos utilizar varias aproximaciones:

• Para una prueba rápida desde el navegador podemos tirar del REPL
• Si queremos usar un CLI hasta hace no mucho la herramienta aconsejado era usar deGit (ojo.... hasta hace poco ;))
• Otra opción es usar Svelte Toolkit, que además nos monta "framework" de trabajo, está última opción esta en Beta y sujeta en cambios.

En este tutorial vamos a cubrir la opción que viene a sustituir a deGit, en este caso tiramos de plantilla de Vite.

Manos a la obra

• Lo primero vamos a ver que realmente el equipo de Svelte nos aconseja tirar de Vite, si intentamos crear un proyecto con deGit mira que warning más interesante nos da:

npx degit sveltejs/template miprueba

Si abrimos el readme sel proyecto, nos encontramos con el siguiente texto en la cabecera del mismo:

# This repo is no longer maintained. Consider using `npm init vite` and selecting the `svelte` option or — if you want a full-fledged app framework and don't mind using pre-1.0 software — use [SvelteKit](https://kit.svelte.dev), the official application framework for Svelte.

• Bueno, vamos a darle una probada al cli de Vite, para ello partimos de un directorio en blanco y le decimos que queremos montar un nuevo proyecto que llamaremos prueba si te fijas esto nos lleva a un proceso guiado, en el que por ejemplo podemos elegir que queremos que nuestro proyecto tenga soporte a TypeScript

npm init vite

En el primer paso elegimos nombre del proyecto.

En el segundo el framework que vamos a usar en este caso svelte

Y como variante elegimos svelte-ts (ya que queremos trabajar con TypeScript en este proyecto)

• Y con esto se nos crea el proyecto dentro de la carpeta prueba y sólo tenemos que:

Meternos en la carpeta

cd prueba

Instalar las dependencias

npm install

Y ejecutar en local nuestro proyecto

npm run dev

Y ya tenemos nuestro proyecto funcionando

¿Te apuntas a nuestro máster?

Si te ha gustado este ejemplo y tienes ganas de aprender Front End guiado por un grupo de profesionales ¿Por qué no te apuntas a nuestro Máster Front End Online Lemoncode? Tenemos tanto edición de convocatoria con clases en vivo, como edición continua con mentorización, para que puedas ir a tu ritmo y aprender mucho.