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 instalado, deberá obtenerlo. Puede instalar instalando Node.JS, . npm npm 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 para moverse a la carpeta en la que desea crear su nueva aplicación Svelte. cd 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 ejecutando el siguiente comando en la carpeta de su aplicación Svelte: http://localhost:3000 npm run dev Si visita en su navegador, debería ver algo como esto: http://localhost:3000 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 . Otra forma de hacer esto es crear una nueva carpeta llamada about y poner index.svelte en esa carpeta, funcionará. http://localhost:3000/about http://localhost:3000/about Inténtalo tú mismo Cree una nueva página dentro de su carpeta /src/routes, llamada about.svelte. Ahora, cuando vaya a , podrá acceder a esa página. Del mismo modo, puede intentar crear una carpeta llamada about con un archivo colocado dentro llamado index.svelte http://localhost:3000/ 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 . Necesitamos usar el nuevo adaptador y cambiar nuestro objeto dentro del archivo de configuración. Puede reemplazar el contenido de su 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: svelte.config.js kit.adapter svelte.config.js // 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 , como se muestra en la sección anterior, puede ejecutar su nueva aplicación Svelte localmente ejecutando el siguiente comando en su directorio Svelte: Si está ejecutando su aplicación en un servidor Node.JS y ha actualizado su adaptador node build/index.js Ahora, cuando navegue a , su aplicación Svelte debería mostrarse, solo que esta vez estará lista para la producción. http://localhost:3000/ 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: Cómo configurar SvelteKit y crear la estructura básica de su aplicación Svelte. Cómo usar rutas en SvelteKit, para que pueda tener varias páginas en su aplicación. Cómo actualizar su archivo de configuración para usar el adaptador correcto, en función de dónde desea implementar su aplicación. 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í

Twitter

2022 - HackerNoon Contributor of the Year - Coding

2022 - HackerNoon Contributor of the Year - Coding Skills

2022 - HackerNoon Contributor of the Year - Java

2022 - HackerNoon Contributor of the Year - Javascript

2022 - HackerNoon Contributor of the Year - Website Development

2022 - Tip Your Hat Tutorials Best Tutorials

Coding Guru of 2022

Nominated for 2022 - HackerNoon Contributor of the Year - Javascript

Nominated for 2022 - HackerNoon Contributor of the Year - Coding

Nominated for 2022 - HackerNoon Contributor of the Year - Coding Skills

Nominated for 2022 - Tip Your Hat Tutorials Best Tutorials

Nominated for 2022 - HackerNoon Contributor of the Year - Java

Nominated for 2022 - HackerNoon Contributor of the Year - Website Development

Nominated for Coding Guru of 2022

Nominated for 2022 - HackerNoon Contributor of the Year - Typescript

Este audio es producido en el idioma original de la historia!

Demasiado Largo; Para Leer

Making security fun one episode at a time

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

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

Demasiado Largo; Para Leer

Company Mentioned

Johnny Simpson

About Author

ETIQUETAS

Languages

ESTE ARTÍCULO FUE PRESENTADO EN...

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

Demasiado Largo; Para Leer

Company Mentioned

Johnny Simpson

About Author

ETIQUETAS

Languages

ESTE ARTÍCULO FUE PRESENTADO EN...

HISTORIAS RELACIONADAS