Para poder usar Svelte necesitas tener instalado NPM, el gestor de dependencias de Javascript. Para comprobar si lo tienes correctamente instalado ejecuta en una terminal:
npm -v
Si al ejecutarlo te sale una versión es que lo tienes bien instalado, y si te aparece que no existe el comando es que no lo has instalado o que lo has instalado mal.
Lo siguiente es posicionarse en la terminal en la carpeta en la que quieras crear un proyecto con Svelte y ejecutar:
npm create svelte@latest nombre_proyecto
Sustituye nombre_proyecto por el nombre que le quieras dar a tu proyecto.
En la terminal probablemente te aparezca un mensaje tal que así:
Need to install the following packages:
create-svelte@4.2.0
Ok to proceed? (y) y
Yo le he dado a la tecla y
para aceptar y le he dado a Enter
.
Las preguntas que te hace el instalador
Luego te preguntará que tipo de proyecto quieres crear. La primera opción, la de "SvelteKit demo app" te crea un mini proyecto de ejemplo para que veas un ejemplo real de uso de Svelte. La segunda opción te lo crea vacío y la última es una plantilla para crear librerías con Svelte.
Si te apetece ver el ejemplo de app dale a la primera opción, yo le voy a dar a la segunda opción (pulsando la flecha hacia abajo) para que me cree el proyecto vacío.
Aquí mucha gente se va a preguntar por qué SvelteKit y no Svelte asecas. Pues bien, al parecer han sustituido el antiguo generador de proyectos y ahora la forma estándar de usar Svelte es mediante SvelteKit.
Por si te lo preguntas, SvelteKit sería como el Nuxt o el Next de Svelte, aunque en este caso también te deja hacer el build de los proyectos en modo SPA sin SSR, igual que antiguamente en Svelte.
A la siguiente pregunta de Typescript yo le he dado que no, para no complicarme la vida, pero si ya estás habituado a proyectos con Typescript puedes darle a la segunda opción. La primera opción nunca la he probado, pero me suena que el creador de Svelte ya dijo que le gustaba mucho hacer proyectos con sistema de tipado básico mediante JSDoc.
Por último, te pregunta si quieres añadir alguna utilidad más (para ello muevete con las flechas y pulsa Espacio
para activar o desactivar las opciones que quieras). Yo recomiendo activar Eslint y Prettier ya que son linters que te van avisar de algunos errores y problemas de estilos en tu código.
Presiona Enter
cuando termines de seleccionar opciones.
Por si tienes curiosidad, la opción de Playwright es para hacer testing end to end haciendo pruebas con un navegador como si fueras un usuario real y la de Vitest es para tests unitarios y otros tipos de tests.
Arranque del proyecto
A continuación haz cd (o el comando que sea en tu terminal para moverse entre carpetas) para moverte a la carpeta que se acaba de crear:
cd nombre_proyecto
Instala las dependencias del proyecto con:
npm install
Y por último ejecuta:
npm run dev
Si abres tu navegador en la URL de http://localhost:5173 verás que aparece un mensaje default de Svelte. Al ejecutar el comando dev
aparte nos da hot reload es decir, cuando cambies un fichero del código, sin tener que recargar la página del navegador vas a poder ver los cambios.
¡Y listo! Te recomiendo ahora mirar la Estructura de ficheros de proyectos Svelte para saber para qué sirve cada fichero y carpeta que te ha generado Svelte.