Crea una Web Fullstack con Svelte 5 y SvelteKit

En este tutorial con Svelte 5 y SvelteKit aprenderás a desarrollar un blog fullstack donde los usuarios podrán registrarse, iniciar sesión, escribir comentarios y los administradores podrán redactar posts.

Diferencias entre Svelte 5 y SvelteKit

Svelte 5 y SvelteKit son herramientas relacionadas, pero tienen propósitos distintos y se complementan para el desarrollo de aplicaciones web. Aquí está la diferencia y cómo funcionan juntos:

Svelte 5

Es un framework de front-end centrado en la creación de interfaces de usuario altamente reactivas. 

A diferencia de otros frameworks, Svelte realiza el trabajo pesado durante la etapa de compilación, transformando tu código en JavaScript puro optimizado. 

Esto significa que no hay una gran librería ejecutándose en el navegador, por lo que el rendimiento es superior.

• Usos principales: Crear componentes, manejar la lógica de la interfaz de usuario y gestionar estados reactivos.
• Fortalezas: Simplicidad, velocidad y enfoque en una experiencia de desarrollo sin sobrecarga.

SvelteKit

Es un framework basado en Svelte que proporciona herramientas adicionales para construir aplicaciones web completas, tanto en front-end como back-end. 

Ofrece un sistema de enrutamiento basado en archivos, renderizado en el lado del servidor (SSR), generación de sitios estáticos (SSG), y manejo de datos en endpoints.

• Usos principales: Crear aplicaciones web con rutas dinámicas, integrar datos desde una API o base de datos, manejar autenticación, y optimizar el SEO con SSR.
• Fortalezas: Convierte Svelte en un entorno fullstack con todas las funcionalidades necesarias para el desarrollo web moderno.

Cómo funcionan juntos

Svelte es el núcleo donde defines la lógica de tus componentes y su diseño, mientras que SvelteKit expande estas capacidades para gestionar rutas, llamadas a la API, y la arquitectura general de tu aplicación. En esencia:

1. Svelte: Se utiliza para diseñar y programar los componentes individuales de la UI, como formularios, botones y vistas.
2. SvelteKit: Proporciona la infraestructura para unir estos componentes en una aplicación completa, ofreciendo manejo de rutas, datos dinámicos y renderizado eficiente.

Por ejemplo, en una aplicación como un blog:

• Con Svelte creas componentes como el formulario de login, la lista de posts, o el editor de comentarios.
• Con SvelteKit configuras rutas como /login, /posts, o /api/comments, integras bases de datos o autenticación, y decides si los datos deben cargarse en el cliente o renderizarse en el servidor.

Ambas herramientas juntas te permiten crear aplicaciones web completas con un enfoque modular, eficiente y fácil de escalar.

Qué necesito saber para seguir este tutorial

Es imprescindible que conozcas CSS, HTML y JavaScript. Aunque en este tutorial trabajaremos con TypeScript, si conoces JavaScript será fácil el salto. Si quieres saber más de TypeScript, te dejo estos dos tutoriales donde explico las bases de este lenguaje.

Aprende TypeScript Desde Cero: Qué es, instalación y tipado

Programación Orientada a Objetos en TypeScript: Guía Completa

También necesitarás tener instalado Node.js en tu ordenador. Aunque no es 100% necesario, sería importante que tuvieras unas nociones antes de empezar con este tutorial. Puedes descargar Node.js desde el siguiente enlace:

https://nodejs.org/en/download/package-manager.

Creación de nuestro proyecto

El proyecto que vamos a construir va a ser un blog basado en mi web cosasdedevs.com en el que podremos registrarnos, conectarnos a una base de datos, escribir comentarios y si somos administradores podremos publicar posts.

Para crear nuestro proyecto, primero vamos a lanzar el siguiente comando en nuestra terminal:

npx sv create blog-svelte

Aparecerá un asistente para la configuración del proyecto. Yo he seleccionado los siguientes puntos.

• Como plantilla SvelteKit minimal.
• Elegimos que sí usaremos TypeScript.
• Como extras he añadido prettier y eslint.
• El sistema para instalar las dependencias en mi caso será npm.

Una vez termina de instalar las dependencias, podemos seguir los pasos que nos indica el asistente para ejecutar el proyecto y ver la página base de Svelte.

cd blog-svelte && npm run dev -- --open

Si abrimos el proyecto con un editor de código, deberíamos ver una estructura como esta:

blog-svelte/
├ src/
│ ├ lib/
│ │ ├ server/
│ │ │ └ [your server-only lib files]
│ │ └ [your lib files]
│ ├ params/
│ │ └ [your param matchers]
│ ├ routes/
│ │ └ [your routes]
│ ├ app.html
│ ├ error.html
│ ├ hooks.client.js
│ ├ hooks.server.js
│ └ service-worker.js
├ static/
│ └ [your static assets]
├ tests/
│ └ [your tests]
├ package.json
├ svelte.config.js
├ tsconfig.json
└ vite.config.js

Directorio  src: contiene el núcleo del proyecto. Todo su contenido es opcional excepto la carpeta routes y el archivo app.html.

• Directorio  lib: guardaremos código reutilizable como utilidades o componentes. Además, gracias a Svelte tenemos un atajo para acceder a los archivos de este directorio escribiendo $lib. Más adelante veremos como funciona.
• Directorio  server: contendrá código que solo queramos que se ejecute desde el lado del servidor. Svelte prevendrá que intentes importar estos archivos del lado del cliente.
• Directorio  routes: definirá las rutas de la aplicación y será donde construyamos nuestras páginas.
• Archivo app.html: es la plantilla base con marcadores para insertar el contenido dinámico de SvelteKit.
• Archivo error.html: será la página que mostraremos cuando todo falle.
• Hooks (hooks.client.js, hooks.server.js): La versión client se ejecutará solo en el cliente durante la navegación entre rutas y la versión server se ejecutará cada vez que recibamos una petición al servidor.
• Directorio static: almacenará archivos estáticos como robots.txt o favicon.png que se sirven sin procesar.
• Directorio tests: Si se incluye Playwright, las pruebas de navegador se alojan aquí.

Aparte de estas carpetas y archivos, en el directorio principal tenemos los siguientes archivos:

• svelte.config.js: Configuración de Svelte y SvelteKit.
• tsconfig.json/jsconfig.json: Configuración de TypeScript o comprobación de tipos en JavaScript.
• vite.config.js: Configuración de Vite con el plugin @sveltejs/kit/vite.

Con esto podremos dar por cerrado este tutorial, en el siguiente veremos como crear la cabecera de nuestro blog y como funciona el sistema de enrutamiento.

Espero que este post te ayude y como siempre, te recomiendo seguirme en Twitter para estar al tanto de los nuevo contenido. Ahora también puedes seguirme en Instagram donde estoy subiendo tips, tutoriales en vídeo e información sobre herramientas para developers.

Por último os dejo mi guía para aprender a trabajar con APIs donde explico todo el funcionamiento de una API, el protocolo HTTP y veremos como construir una API con arquitectura REST.

Nos leemos 👋.