Product, Engineering, Web
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 .
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
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:
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á.
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
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;
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.
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.
En esta guía, hemos visto cómo usar SvelteKit para crear su primera aplicación Svelte con rutas. Veamos lo que hemos aprendido:
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í
Introducción a la creación de una aplicación Svelte con SvelteKit | HackerNoon