Introducción a la creación de una aplicación Svelte con SvelteKit

Svelte es un marco ligero para crear aplicaciones web. Cuando lo usa, se parece mucho a otros marcos frontend como React y Vue, pero deja atrás el DOM virtual. Eso, junto con otras optimizaciones, significa que funciona mucho menos en el navegador, lo que optimiza la experiencia del usuario y el tiempo de carga.

En esta guía, repasaremos cómo configurar su primera aplicación Svelte usando SvelteKit. Svelte tiene varias formas diferentes de crear aplicaciones, y SvelteKit es uno de los paquetes oficiales de Svelte para hacerlo. Si está interesado en otros marcos, puede disfrutar de una guía similar que tenemos sobre cómo crear su primera aplicación Vue .

Creando tu primera aplicación Svelte

Para comenzar, abra una nueva ventana de terminal e inicie su aplicación esbelta con el siguiente comando. Tenga en cuenta que si no tiene npm instalado, deberá obtenerlo. Puede instalar npm instalando Node.JS, a través del enlace aquí .

Una vez que haya instalado Node.JS y NPM, ejecute el siguiente comando. Sin embargo, antes de hacer eso, asegúrese de usar cd para moverse a la carpeta en la que desea crear su nueva aplicación Svelte.

 npm init svelte@next my-svelte-app

Cuando ejecute este comando, generará automáticamente una plantilla Svelte en una carpeta llamada my-svelte-app. Svelte lo guiará a través de una serie de opciones. Seleccione sus preferencias. La siguiente imagen muestra las que he seleccionado. A los efectos de esta guía, utilizaré el proyecto Skeleton.

Finalmente, ejecute el siguiente comando para ingresar a su directorio esbelto:

 cd my-svelte-app

Y luego instale todas sus dependencias usando la siguiente línea:

 npm i

Estructura de archivos esbelta

Si está familiarizado con otros marcos, Svelte le resultará familiar. Aquí hay una descripción general de la estructura de archivos en Svelte, para el proyecto que acabamos de hacer:

 static <-- where we store all of our public assets like favicons, images, and fonts |- favicon.png <-- our favicon tests <-- a folder to store our tests |- test.js <-- an example test using @playwright src <-- our main Svelte app files |- routes <-- a folder to store all of our routes in |-- index.svelte <-- our index route file. This will be the file displayed at the route of the site |- app.d.ts <-- our core Svelte app file |- app.html <-- our main index file where the app will appear .gitignore <-- files we wish to ignore for git .npmrc <-- config file for npm .prettierrc <-- config file for prettier .eslintrc.cjs <-- config file for eslint package.json <-- our NPM installed packages playwright.config.js <-- config file for playwright svelte.config.js <-- config file for svelte itself tsconfig.json <-- config file for typescript

Nuestra aplicación Svelte básica está lista para funcionar. Si desea ver cómo se ve, puede publicarlo en su computadora local en la URL http://localhost:3000 ejecutando el siguiente comando en la carpeta de su aplicación Svelte:

 npm run dev

Si visita http://localhost:3000 en su navegador, debería ver algo como esto:

Creación de nuevas páginas o rutas en Svelte

Para hacer una nueva ruta en Sveltekit, simplemente crea un nuevo archivo dentro de la carpeta de rutas. Por ejemplo, si crea un archivo llamado about.svelte, aparecerá en http://localhost:3000/about . Otra forma de hacer esto es crear una nueva carpeta llamada about y poner index.svelte en esa carpeta, http://localhost:3000/about funcionará.

Inténtalo tú mismo

Cree una nueva página dentro de su carpeta /src/routes, llamada about.svelte. Ahora, cuando vaya a http://localhost:3000/ , podrá acceder a esa página. Del mismo modo, puede intentar crear una carpeta llamada about con un archivo colocado dentro llamado index.svelte

Cómo ejecutar su aplicación SvelteKit en Node.JS

Para ejecutar su aplicación Svelte en un servidor o localmente en un servidor Node.JS, necesita usar un adaptador. Si desea ejecutar su aplicación Svelte en un servidor de nodos, instale @sveltejs/adapter-node@next a través de la siguiente línea:

 npm i @sveltejs/adapter-node@next

Ahora tenemos que cambiar nuestro archivo svelte.config.js . Necesitamos usar el nuevo adaptador y cambiar nuestro objeto kit.adapter dentro del archivo de configuración. Puede reemplazar el contenido de su svelte.config.js con el código a continuación, pero solo estamos cambiando dos líneas: nuestra importación de adaptador y luego agregando el directorio de compilación en su configuración:

 // We have changed the adapter line to use adapter-node@next import adapter from '@sveltejs/adapter-node@next'; import preprocess from 'svelte-preprocess'; /** @type {import('@sveltejs/kit').Config} */ const config = { // Consult https://github.com/sveltejs/svelte-preprocess // for more information about preprocessors preprocess: preprocess(), kit: { // We have changed this to point to a build directory adapter: adapter({ out: 'build' }) } }; export default config;

Otros adaptadores SvelteKit

Si desea ejecutar su aplicación Svelte en Cloudflare, Netlify o Vercel, entonces necesita usar uno de estos adaptadores, no necesita hacer nada. Todos estos están incluidos de manera predeterminada en adapter-auto, así que solo cambie su archivo svelte.config.js si no planea usar un servidor Node.JS.

Cómo construir su aplicación SvelteKit para producción

Ahora que hemos configurado nuestro adaptador, construyamos nuestra aplicación. En SvelteKit, es fácil hacer que su aplicación esté lista para ejecutarse en un entorno de producción. Simplemente ejecute el siguiente comando, que creará una nueva carpeta llamada .svelte-kit con todos sus archivos listos para producción.

 npm run build

Ahora, si desea obtener una vista previa de su compilación de producción, simplemente ejecute el siguiente comando:

 npm run preview

Si está ejecutando su aplicación en un servidor Node.JS y ha actualizado su adaptador , como se muestra en la sección anterior, puede ejecutar su nueva aplicación Svelte localmente ejecutando el siguiente comando en su directorio Svelte:

 node build/index.js

Ahora, cuando navegue a http://localhost:3000/ , su aplicación Svelte debería mostrarse, solo que esta vez estará lista para la producción.

Conclusión

En esta guía, hemos visto cómo usar SvelteKit para crear su primera aplicación Svelte con rutas. Veamos lo que hemos aprendido:

1. Cómo configurar SvelteKit y crear la estructura básica de su aplicación Svelte.
2. Cómo usar rutas en SvelteKit, para que pueda tener varias páginas en su aplicación.
3. Cómo actualizar su archivo de configuración para usar el adaptador correcto, en función de dónde desea implementar su aplicación.
4. Cómo compilar y ejecutar su aplicación localmente en un servidor Node.JS.

A continuación, puede intentar jugar con Svelte para comenzar a personalizar su aplicación. Para más contenido web, no olvides seguirme en Twitter .

También publicado aquí