Svelte - Instalación

• Si estás en entorno Windows te recomendamos instalarte Git Bash

• Seguimos con NodeJS.

  • Si estás en entorno Linux/Mac recomendamos que descargues Node desde nvm (Node Version Manager) y luego instales la versión lts/jod: nvm install lts/jod que es la que recomendaremos para 2025

  • Si estás en Windows instalate la versión actual

• Luego NPM (Node Package Manager), con el que vamos a hacer los builds de nuestras aplicaciones.

  • Para familiarizarte con el manejo de dependencias, te dejamos este artículo

    • Y como en realidad vamos a usar Yarn como manejador de dependencias, hay que instalarlo con npm

npm install --global yarn

El editor de texto que vamos a soportar en la cursada es Visual Studio Code (hay una versión portable si estás en una máquina sin privilegios de administrador).

Dentro de Visual Studio Code, te recomendamos que crees un perfil vacío y lo asocies a tus nuevos proyectos Svelte (podés ver cómo se trabaja con perfiles en VSCode en este video. También te dejamos este tutorial muy piola - en inglés y la documentación oficial).

Podés importar este archivo que trae todas las extensiones para Svelte

O si no, podés instalar las extensiones del Visual Studio Code manualmente. Para 2025 son los siguientes:

Necesarios

• Svelte for VS Code (Svelte): plugin para soportar Svelte en VSCode

• Vitest (Vitest): plugin para poder ejecutar los tests de frontend en el VSCode

• ESLint (Microsoft): para disparar el linter de la sintaxis de TS

• Github Actions (Github): te ayuda con el archivo de configuración de CI para Github Actions

• Git Extension Pack - Don Jayamanne: utilidades para el trabajo con Git

• Playwright Test for VSCode (Microsoft): plugin para ejecutar tests e2e de Playwright

Evitá la extensión Svelte 3 Snippets porque te sugerirá código desactualizado

Opcionales

• Svelte snippets: autocompletado de código para Svelte

• Svelte Dark: tema oscuro de Svelte

• Playwright Snippets (Nitay Neeman): snippets de código que expanden tests e2e de Playwright

Typescript es el lenguaje de programación base en el que vamos a trabajar. Tranquilo, es muy similar a los lenguajes orientados a objetos en los que ya trabajaste. Para iniciarte o para hacer consultas te dejamos estos links:

• Documentación oficial de Typescript: tiene una intro de 5 minutos, otros tutoriales cortos y el Handbook para sacarse dudas

• Aprendiendo Typescript en 30 minutos: muy buen tutorial para comenzar explicando los conceptos más salientes

• El cheatsheet o guía rápida para tener a mano mientras programan

• Tips: Typing destructured objects parameters

npx sv create proyecto-svelte

┌  Welcome to the Svelte CLI! (v0.6.5)

│

◇  Which template would you like?

│  SvelteKit minimal

│

◇  Add type checking with Typescript?

│  Yes, using Typescript syntax

│

◆  Project created

│

◆  What would you like to add to your project? (use arrow keys / space bar)

│  ◻ prettier

│  ◼ eslint

│  ◼ vitest

│  ◼ playwright (browser testing - https://playwright.dev)

│  ◻ tailwindcss

│  ◻ drizzle

│  ◻ lucia

│  ◻ mdsvex

│  ◻ paraglide

│  ◻ storybook

└

◇  Which package manager do you want to install dependencies with?

│  yarn

│

◆  Successfully setup add-ons

│

◇  Installing dependencies with yarn...

Repasamos las opciones

• Sveltekit minimal como biblioteca

• usar Typescript (sin JSDoc)

• agregamos eslint, vitest y playwright. Vitest es para hacer tests de frontend y Playwright para tests e2e

• yarn como manejador de dependencias (es un poco más rápido que npm)

Te recomendamos que dentro del proyecto crees una carpeta .vscode y dentro un archivo settings.json que tenga este contenido.

El archivo tsconfig.json define cómo vamos a utilizar el intérprete de Typescript. Es conveniente agregar al final estas líneas:

  "compilerOptions": {

    ...,

    "module": "ES2015",

    "lib": [

      "ES2015"

    ],

    "moduleResolution": ...

Dentro del archivo package.json del raíz de tu proyecto hay que agregar algunos scripts:

 "scripts": {

   "lint": "eslint src",

   "lint:fix": "eslint src --fix",

   "test:unit": ...,

   "test:ci": "npm run test:unit -- --run --coverage"

 },

Cuando agregues los tests e2e podés definir estos scripts:

  "scripts": {

    ...,

    "test": "vitest",

    "test:coverage": "vitest run --coverage",

    "test:manual:e2e": "playwright test --ui",

    "test:all": "npm run test:unit -- --run && npm run test:automated:e2e",

    ...,

  }

• test: corre los tests unitarios

• test:coverage: ejecuta los tests unitarios con reporte de cobertura (local)

• test:manual:e2e: levanta el runner de Playwright, requiere que levantes manualmente el backend

• test:all: ejecuta los tests unitarios y los tests e2e

podés ver el ejemplo de Tareas para ver cómo ejecutar de forma automática y headless los tests end-to-end (y trasladarlo al CI)

Es conveniente hacer el siguiente cambio al archivo svelte.config.js:

...

const config = {

  // agregamos `{ script: true } al preprocesador para tener acceso a los syntactic sugar de TS

  preprocess: vitePreprocess({ script: true }),

  //

Ejecutá este comando para agregar las siguientes dependencias:

yarn add @testing-library/dom @testing-library/jest-dom @testing-library/svelte @testing-library/user-event @types/eslint @vitest/coverage-v8 jsdom @sveltejs/vite-plugin-svelte

Para agregar dependencias de los tests e2e:

yarn add @playwright/test

Tener un archivo `.nvmrc` es conveniente si todo el equipo trabaja con NVM (el versionador de Node). El contenido especifica qué versión de Node vamos a utilizar:

lts/jod

Agregamos estas líneas al archivo .gitignore:

vite.config.ts.timestamp-*

# ... empezamos acá ...

# Coverage

coverage

# VSCode

.history

# Playwright

test-results

Cada vez que grabamos un archivo se ejecuta automáticamente el proceso que analiza el código y diagnostica errores de sintaxis y oportunidades de mejora, proceso que se conoce como Linter. El archivo eslint.config.js debe tener el siguiente contenido.

Indirectamente el plugin de Svelte para VSCode utiliza Prettier, un formateador de código. Agregamos entonces un archivo .prettierrc con el siguiente contenido.

Si queremos ejecutar el proceso que corrige los errores del linter podemos hacerlo desde la línea de comando:

yarn run lint:fix

Si al ejecutar este comando o yarn run lint te aparece este mensaje de error: TypeError: Error while loading rule '@typescript-eslint/no-unused-expressions': Cannot read properties of undefined (reading 'allowShortCircuit') la solución es desinstalar e instalar la versión 8.15.0 ó superior de typescript-eslint:

yarn remove typescript-eslint

yarn add typescript-eslint

El archivo vite.config.ts tiene que incorporar el plugin de testing de Svelte. Te dejamos el ejemplo para que lo copies en tu proyecto.

Te dejamos este archivo de ejemplo que tenés que guardar en .github/workflows/build.yml

• Para agregar el badge del build de Github Actions, seguí estas instrucciones

• Para agregar el badge del porcentaje de cobertura, tenés que agregar la imagen que genera el mismo build de Github Actions (reemplazando XXXXXXX por el nombre de la carpeta donde está tu proyecto):


Para levantar la aplicación Svelte ejecutás

yarn run dev

Luego en un navegador pedís la siguiente url: http://localhost:5173.

Para ejecutar los tests de un proyecto, te posicionás en el directorio raíz y ejecutás desde la consola

yarn test