Introducción A Los Híbridos Svekyll - Svelte Y Jekyll

Svekyll es un generador de sitios estáticos que combina la simple convención de Jekyll con el asombroso poder de Svelte . Con Svekyll, puede aplicar temas fácilmente con un solo cambio en su config.ymlarchivo. Además, Svekyll admite Tailwind CSS y daisyUI . Extender estos temas requiere menos trabajo que usar un marco CSS.

En este artículo, aprenderemos cómo comenzar con Svekyll, Jekyll y Svelte. También cubriremos los mejores casos de uso para cada uno, así como algunas características existentes y futuras de Svekyll. ¡Empecemos!

Prerrequisitos

Para seguir este artículo, necesitará lo siguiente:

• Conocimientos básicos de HTML, CSS y JavaScript.
• El terminal que elijas
• Un editor de código

¿Qué es Jekyll?

Jekyll es un generador de sitios estáticos de código abierto que le permite escribir su código en markdown y convertirlo en diseños. Cuando crea una plantilla con contenido, puede ejecutar Jekyll y obtendrá un sitio completo de páginas HTML estáticas individuales. Luego, puede cargar las páginas en cualquier servidor de su elección, dejando su sitio web estático en funcionamiento.

Casos de uso de Jekyll

Para obtener una comprensión más clara de Jekyll, repasemos brevemente algunos de sus casos de uso.

Entrega más rápida de páginas

Cuando se realiza una solicitud del cliente al servidor de su aplicación, normalmente, su servidor tendría que comunicarse con la base de datos para obtener una respuesta de la base de datos de su aplicación.

Sin embargo, con Jekyll, su servidor no tiene que comunicarse con la base de datos en cada solicitud realizada, lo que invariablemente conduce a una entrega de páginas más rápida y eficiente a los usuarios de su aplicación.

Seguridad

Como se explicó anteriormente, el servidor de la aplicación no tiene que comunicarse con la base de datos en cada solicitud. Por lo general, en el caso de una brecha de seguridad en la base de datos de su aplicación, podría correr el riesgo de perder sus datos. Sin embargo, con Jekyll, su aplicación es más segura.

Menos mantenimiento y costo reducido

Jekyll es una forma económica de alojar sitios web. Debido a que Jekyll carece de una base de datos, requiere menos mantenimiento, por lo que se ahorra el costo de las tarifas de mantenimiento. Además, las aplicaciones web creadas con Jekyll se alojan de forma gratuita en las páginas de GitHub .

Soporte para blogs

Jekyll es consciente de los blogs, lo que significa que puede escribir su contenido en rebajas.

¿Qué es Svelte?

Svelte es una herramienta de JavaScript para crear componentes de interfaz de usuario como React, Angular o Vue. Sin embargo, a diferencia de estas bibliotecas y marcos, Svelte es un compilador que convierte el código declarativo en código imperativo que funciona con la API del navegador nativo. Como resultado, puede obtener código de alto rendimiento en paquetes pequeños.

Los componentes se crean en .sveltearchivos, que constan de tres partes principales:

1. Un script que contiene su código escrito en JavaScript, que también podría estar escrito en TypeScript.
2. Una etiqueta de estilo representada como <style>para su CSS, que también puede usar un preprocesador como SASS
3. Una plantilla representada como HTML con varios tipos de sintaxis para escribir código declarativo.

En una situación en la que necesite un estado reactivo, puede definir una variable con la letpalabra clave y luego hacer referencia a ella en el archivo HTML usando llaves [].

Cuando se trata de comunicación entre componentes, Svelte proporciona múltiples estrategias para compartir datos entre componentes. Para componentes más complejos, Svelte tiene una API de contexto , al igual que React.

Svelte también tiene tiendas que son como observables. Puede compartirlos en cualquier lugar de los componentes y suscribirse a ellos en la plantilla colocando un signo de dólar delante de ellos.

Svekyll toma el poder de Jekyll para crear sitios estáticos y lo combina con el poder de Svelte para una gran interfaz de usuario, ¡brindándote un poderoso sitio estático con una maravillosa interfaz de usuario! Ahora, echemos un vistazo a algunos casos de uso de Svekyll.

Casos de uso de Svekyll

Los blogs de Svekyll responden muy bien y son rápidos; puede crear un blog básico en menos de cinco segundos. Veamos algunos de los casos de uso de Svekyll.

Visualización compleja

Svekyll usa Svelte para la interfaz de usuario de su sitio estático, lo que proporciona ganancias de rendimiento que provienen de un marco sin tiempo de ejecución. Por lo tanto, las páginas interactivas con una gran cantidad de elementos DOM e interacciones del usuario son más rápidas y receptivas.

Curva de aprendizaje simple

Svekyll tiene una curva de aprendizaje simple que requiere solo conocimientos básicos de HTML, CSS y JavaScript, así como familiaridad con Jekyll y Svelte.

Sitios más rápidos

Los sitios creados con Svekyll son más rápidos y tienen paquetes de tamaños más pequeños, que funcionan bien con dispositivos que tienen una potencia de procesamiento limitada y conexiones de red más lentas.

Ahora que estamos familiarizados con Svekyll, repasemos algunas de sus características actuales y futuras.

Características de Svekyll

Materia delantera de YAML

La portada de YAML se utiliza para mantener los metadatos de una página y su contenido. Puede personalizar cualquier .mdarchivo utilizando la interfaz de usuario de YAML. Svekyll le permite agregar material frontal de YAML dentro de su publicación, luego úselo dentro de su plantilla de la siguiente manera:

___
Title: "YAML front matter"
description: "A simple way to include yfm" 
published: true
my key: "some value"
___
Mykey: {my key}

La información dentro del bloque de código es prefabricada, que define cierta información básica sobre el contenido almacenado en pares clave-valor, mientras que YAML es el idioma predeterminado para preámbulo en Svekyll.

Svekyll y Tailwind CSS

Tailwind CSS es una biblioteca CSS de utilidad para crear interfaces de usuario personalizadas. En lugar de definir clases como button, Tailwind CSS define clases como display-flex.

En lugar de definir una carta, definimos todas las piezas que componen esa carta. Esto puede parecer estresante porque hay muchas clases para definir, sin embargo, lo hará más fácil cuando quiera hacer cambios y redefinir clases en su código. Tailwind CSS elimina las clases no utilizadas, y funciona extraordinariamente bien con Svekyll.

Para diseñar Svekyll, agregue al user.cssarchivo. Tenga en cuenta que el estilo y la estructura de Svekyll están incluidos en el Svekyll.cssarchivo. Para evitar conflictos de fusión ascendentes, no debe cambiar este archivo.

No es difícil modificar clases individuales en Tailwind CSS, facilitando cualquier edición futura. Eche un vistazo a un ejemplo de Tailwind CSS en el bloque de código a continuación:

.sveyll-header {
        @apply p-8
        bg-green 300
        border-green 600
        hover: bg-red-600;
}

Puede consultar los temas compatibles con Svekyll .

margaritaUI

daisyUI es una biblioteca de componentes Tailwind CSS para crear HTML limpio con clases de componentes y temas personalizables. Puede usar Svekyll con marcos de componentes de Tailwind CSS como daisyUI debido al soporte listo para usar de Svekyll para Tailwind CSS . Aunque puede usar CSS estándar con Svekyll, recomiendo encarecidamente Tailwind CSS.

Mención web

Webmention es una herramienta de comentarios y fuentes JSON que puede incrustar en su blog. En el momento de escribir este artículo, Webmention está en versión alfa y no está disponible para su uso. Webmention se parece más a una herramienta de sesión / comentario normal de forma predeterminada, pero puede mostrarla como desee personalizando su estilo. Para usar Webmention, debe agregar un sitio, pero primero debe agregar su _config.yml.:

Site:logrocket.com
comments:
    webmentions:
         enabled:true
      #feed:"https:// your url goes here.... 
Links:
          link:https//githib.com/logrocket
          text:"Github"
          icon:'github'

Debes tener ambos comentarios configurados con Webmention. También debe tener presencia en una red social, como una cuenta de Twitter o GitHub, para que Webmentions pueda autenticarlo.

A continuación, visite Webmentions.io , luego ingrese la dirección de su página web y autentíquese. Ahora, iniciará sesión en birdy.gy para comenzar una colección. Webmentions proporcionará comentarios hechos a través de servicios sociales y luego le proporcionará un feed JSON.

Alojamiento extraestático

ExtraStatic proporciona una de las formas más rápidas de administrar su página en Internet. ExtraStatic ofrece alojamiento Svekyll de primera clase. ExtraStatic aloja solo blogs estáticos, y Svekyll ha optimizado su CI específicamente para Svekyll. Con el alojamiento ExtraStatic Svekyll, los cambios se actualizan en menos de diez segundos.

Una característica que se agregará a ExtraStatic es la opción de cobrar micropagos de Ethereum, lo que le permite recibir fácilmente los pagos de Ethereum de sus lectores.

Optimización de motores de búsqueda

SEO, optimización de motores de búsqueda, aumenta la visibilidad de su sitio al mejorar la clasificación de su sitio en los motores de búsqueda.

Una de las principales ventajas de utilizar un sitio web estático es que son más rápidos que los sitios web dinámicos. De forma predeterminada, Svekyll optimiza cada publicación y página para SEO, lo que ayuda a que su sitio tenga una clasificación más alta que muchos sitios web dinámicos. Cada publicación de blog está optimizada de acuerdo con el título y la descripción que se encuentran en el tema principal de YAML.

Para personalizar el SEO, tendrá que importar la tienda de SEO, luego establecer el título y la descripción que elija de la siguiente manera:

<script>
       import seo from '$lib/store';
       $seo { tittle: "This is my title", description: "This is my description"}
</script>

La modificación del SEO le proporciona todos los beneficios de la indexación estática de una sola página en los motores de búsqueda.

Conclusión

En este artículo, cubrimos Svelte y Jekyll, aprendiendo cómo los combina Svekyll para producir sitios web estáticos asombrosos. Aunque algunas de las funciones de Svekyll no están disponibles en el momento de escribir este artículo, Svekyll es una herramienta increíble para crear sitios estáticos que debería probar. Déjanos un comentario a continuación y cuéntanos lo que piensas. ¡Espero que hayas disfrutado de este artículo!

Enlace: https://blog.logrocket.com/getting-started-svekyll-svelte-jekyll-hybrid/

#svelte 

What is GEEK

Buddha Community

Introducción A Los Híbridos Svekyll - Svelte Y Jekyll

Svekyll es un generador de sitios estáticos que combina la simple convención de Jekyll con el asombroso poder de Svelte . Con Svekyll, puede aplicar temas fácilmente con un solo cambio en su config.ymlarchivo. Además, Svekyll admite Tailwind CSS y daisyUI . Extender estos temas requiere menos trabajo que usar un marco CSS.

En este artículo, aprenderemos cómo comenzar con Svekyll, Jekyll y Svelte. También cubriremos los mejores casos de uso para cada uno, así como algunas características existentes y futuras de Svekyll. ¡Empecemos!

Prerrequisitos

Para seguir este artículo, necesitará lo siguiente:

• Conocimientos básicos de HTML, CSS y JavaScript.
• El terminal que elijas
• Un editor de código

¿Qué es Jekyll?

Jekyll es un generador de sitios estáticos de código abierto que le permite escribir su código en markdown y convertirlo en diseños. Cuando crea una plantilla con contenido, puede ejecutar Jekyll y obtendrá un sitio completo de páginas HTML estáticas individuales. Luego, puede cargar las páginas en cualquier servidor de su elección, dejando su sitio web estático en funcionamiento.

Casos de uso de Jekyll

Para obtener una comprensión más clara de Jekyll, repasemos brevemente algunos de sus casos de uso.

Entrega más rápida de páginas

Cuando se realiza una solicitud del cliente al servidor de su aplicación, normalmente, su servidor tendría que comunicarse con la base de datos para obtener una respuesta de la base de datos de su aplicación.

Sin embargo, con Jekyll, su servidor no tiene que comunicarse con la base de datos en cada solicitud realizada, lo que invariablemente conduce a una entrega de páginas más rápida y eficiente a los usuarios de su aplicación.

Seguridad

Como se explicó anteriormente, el servidor de la aplicación no tiene que comunicarse con la base de datos en cada solicitud. Por lo general, en el caso de una brecha de seguridad en la base de datos de su aplicación, podría correr el riesgo de perder sus datos. Sin embargo, con Jekyll, su aplicación es más segura.

Menos mantenimiento y costo reducido

Jekyll es una forma económica de alojar sitios web. Debido a que Jekyll carece de una base de datos, requiere menos mantenimiento, por lo que se ahorra el costo de las tarifas de mantenimiento. Además, las aplicaciones web creadas con Jekyll se alojan de forma gratuita en las páginas de GitHub .

Soporte para blogs

Jekyll es consciente de los blogs, lo que significa que puede escribir su contenido en rebajas.

¿Qué es Svelte?

Svelte es una herramienta de JavaScript para crear componentes de interfaz de usuario como React, Angular o Vue. Sin embargo, a diferencia de estas bibliotecas y marcos, Svelte es un compilador que convierte el código declarativo en código imperativo que funciona con la API del navegador nativo. Como resultado, puede obtener código de alto rendimiento en paquetes pequeños.

Los componentes se crean en .sveltearchivos, que constan de tres partes principales:

1. Un script que contiene su código escrito en JavaScript, que también podría estar escrito en TypeScript.
2. Una etiqueta de estilo representada como <style>para su CSS, que también puede usar un preprocesador como SASS
3. Una plantilla representada como HTML con varios tipos de sintaxis para escribir código declarativo.

En una situación en la que necesite un estado reactivo, puede definir una variable con la letpalabra clave y luego hacer referencia a ella en el archivo HTML usando llaves [].

Cuando se trata de comunicación entre componentes, Svelte proporciona múltiples estrategias para compartir datos entre componentes. Para componentes más complejos, Svelte tiene una API de contexto , al igual que React.

Svelte también tiene tiendas que son como observables. Puede compartirlos en cualquier lugar de los componentes y suscribirse a ellos en la plantilla colocando un signo de dólar delante de ellos.

Svekyll toma el poder de Jekyll para crear sitios estáticos y lo combina con el poder de Svelte para una gran interfaz de usuario, ¡brindándote un poderoso sitio estático con una maravillosa interfaz de usuario! Ahora, echemos un vistazo a algunos casos de uso de Svekyll.

Casos de uso de Svekyll

Los blogs de Svekyll responden muy bien y son rápidos; puede crear un blog básico en menos de cinco segundos. Veamos algunos de los casos de uso de Svekyll.

Visualización compleja

Svekyll usa Svelte para la interfaz de usuario de su sitio estático, lo que proporciona ganancias de rendimiento que provienen de un marco sin tiempo de ejecución. Por lo tanto, las páginas interactivas con una gran cantidad de elementos DOM e interacciones del usuario son más rápidas y receptivas.

Curva de aprendizaje simple

Svekyll tiene una curva de aprendizaje simple que requiere solo conocimientos básicos de HTML, CSS y JavaScript, así como familiaridad con Jekyll y Svelte.

Sitios más rápidos

Los sitios creados con Svekyll son más rápidos y tienen paquetes de tamaños más pequeños, que funcionan bien con dispositivos que tienen una potencia de procesamiento limitada y conexiones de red más lentas.

Ahora que estamos familiarizados con Svekyll, repasemos algunas de sus características actuales y futuras.

Características de Svekyll

Materia delantera de YAML

La portada de YAML se utiliza para mantener los metadatos de una página y su contenido. Puede personalizar cualquier .mdarchivo utilizando la interfaz de usuario de YAML. Svekyll le permite agregar material frontal de YAML dentro de su publicación, luego úselo dentro de su plantilla de la siguiente manera:

___
Title: "YAML front matter"
description: "A simple way to include yfm" 
published: true
my key: "some value"
___
Mykey: {my key}

La información dentro del bloque de código es prefabricada, que define cierta información básica sobre el contenido almacenado en pares clave-valor, mientras que YAML es el idioma predeterminado para preámbulo en Svekyll.

Svekyll y Tailwind CSS

Tailwind CSS es una biblioteca CSS de utilidad para crear interfaces de usuario personalizadas. En lugar de definir clases como button, Tailwind CSS define clases como display-flex.

En lugar de definir una carta, definimos todas las piezas que componen esa carta. Esto puede parecer estresante porque hay muchas clases para definir, sin embargo, lo hará más fácil cuando quiera hacer cambios y redefinir clases en su código. Tailwind CSS elimina las clases no utilizadas, y funciona extraordinariamente bien con Svekyll.

Para diseñar Svekyll, agregue al user.cssarchivo. Tenga en cuenta que el estilo y la estructura de Svekyll están incluidos en el Svekyll.cssarchivo. Para evitar conflictos de fusión ascendentes, no debe cambiar este archivo.

No es difícil modificar clases individuales en Tailwind CSS, facilitando cualquier edición futura. Eche un vistazo a un ejemplo de Tailwind CSS en el bloque de código a continuación:

.sveyll-header {
        @apply p-8
        bg-green 300
        border-green 600
        hover: bg-red-600;
}

Puede consultar los temas compatibles con Svekyll .

margaritaUI

daisyUI es una biblioteca de componentes Tailwind CSS para crear HTML limpio con clases de componentes y temas personalizables. Puede usar Svekyll con marcos de componentes de Tailwind CSS como daisyUI debido al soporte listo para usar de Svekyll para Tailwind CSS . Aunque puede usar CSS estándar con Svekyll, recomiendo encarecidamente Tailwind CSS.

Mención web

Webmention es una herramienta de comentarios y fuentes JSON que puede incrustar en su blog. En el momento de escribir este artículo, Webmention está en versión alfa y no está disponible para su uso. Webmention se parece más a una herramienta de sesión / comentario normal de forma predeterminada, pero puede mostrarla como desee personalizando su estilo. Para usar Webmention, debe agregar un sitio, pero primero debe agregar su _config.yml.:

Site:logrocket.com
comments:
    webmentions:
         enabled:true
      #feed:"https:// your url goes here.... 
Links:
          link:https//githib.com/logrocket
          text:"Github"
          icon:'github'

Debes tener ambos comentarios configurados con Webmention. También debe tener presencia en una red social, como una cuenta de Twitter o GitHub, para que Webmentions pueda autenticarlo.

A continuación, visite Webmentions.io , luego ingrese la dirección de su página web y autentíquese. Ahora, iniciará sesión en birdy.gy para comenzar una colección. Webmentions proporcionará comentarios hechos a través de servicios sociales y luego le proporcionará un feed JSON.

Alojamiento extraestático

ExtraStatic proporciona una de las formas más rápidas de administrar su página en Internet. ExtraStatic ofrece alojamiento Svekyll de primera clase. ExtraStatic aloja solo blogs estáticos, y Svekyll ha optimizado su CI específicamente para Svekyll. Con el alojamiento ExtraStatic Svekyll, los cambios se actualizan en menos de diez segundos.

Una característica que se agregará a ExtraStatic es la opción de cobrar micropagos de Ethereum, lo que le permite recibir fácilmente los pagos de Ethereum de sus lectores.

Optimización de motores de búsqueda

SEO, optimización de motores de búsqueda, aumenta la visibilidad de su sitio al mejorar la clasificación de su sitio en los motores de búsqueda.

Una de las principales ventajas de utilizar un sitio web estático es que son más rápidos que los sitios web dinámicos. De forma predeterminada, Svekyll optimiza cada publicación y página para SEO, lo que ayuda a que su sitio tenga una clasificación más alta que muchos sitios web dinámicos. Cada publicación de blog está optimizada de acuerdo con el título y la descripción que se encuentran en el tema principal de YAML.

Para personalizar el SEO, tendrá que importar la tienda de SEO, luego establecer el título y la descripción que elija de la siguiente manera:

<script>
       import seo from '$lib/store';
       $seo { tittle: "This is my title", description: "This is my description"}
</script>

La modificación del SEO le proporciona todos los beneficios de la indexación estática de una sola página en los motores de búsqueda.

Conclusión

En este artículo, cubrimos Svelte y Jekyll, aprendiendo cómo los combina Svekyll para producir sitios web estáticos asombrosos. Aunque algunas de las funciones de Svekyll no están disponibles en el momento de escribir este artículo, Svekyll es una herramienta increíble para crear sitios estáticos que debería probar. Déjanos un comentario a continuación y cuéntanos lo que piensas. ¡Espero que hayas disfrutado de este artículo!

Enlace: https://blog.logrocket.com/getting-started-svekyll-svelte-jekyll-hybrid/

#svelte 

Top 10+ iPhone App Development Companies in Los Angeles 2020 – TopDevelopers.co

Profusely examined top iPhone App Development companies in Los Angeles with ratings & reviews to help find the best iPhone App Developers to build your solution.

#iphone app development service providers in los angeles #top iphone app development companies in los angeles #best iphone app developers at los angeles #hire iphone app developers los angeles #los angeles #expert iphone app developers

Best iOS / iPhone App Developers in Los Angeles

Looking for a top iPhone app development company? You want to make certain you build an excellent client community with application development technology that sees you as a talker of all trends in the industry. Failure to navigate the iPhone app wave will get you into trouble.

AppClues Infotech is the fastest rising iPhone application development company in Los Angeles, with a strong team of top experts providing custom iOS application development services that provide cost-effective solutions. We offer total turnkey solutions for those who want to turn their iPhone app ideas into actuality.

Our Services:

• iPhone Application Development
• iPhone/iPad Games Development
• iPhone Application Code Check
• iPhone Social Media Applications
• iPhone Application Testing Services
• iPhone Widget Development
• Custom iPhone Application Development
• iPhone Application Support
• Maintenance & Optimization
• Migration and Porting
• Wearable Integration

Get high-performance and scalable, enterprise-ready iPhone application solutions based on the exact needs and desires of your business. Contact us today and let us talk about how we can assist you to build your online visibility a huge achievement.

For more info:
Website: https://www.appcluesinfotech.com/
Email: info@appcluesinfotech.com
Call: +1-978-309-9910

#app developers in los angeles #los angeles app development #top ios app development company #top mobile app development company in los angeles #mobile app development company in los angeles #iphone app development company los angeles

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 lo tiene npminstalado, deberá obtenerlo. Puede instalar npminstalando 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 cdpara 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 archivo #Svelte

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:

#Creando 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 svelte.config.jsarchivo. Necesitamos usar el nuevo adaptador y cambiar nuestro kit.adapterobjeto dentro del archivo de configuración. Puede reemplazar el contenido de su svelte.config.jscon 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:

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.

Fuente: https://hackernoon.com/getting-started-building-a-svelte-app-with-sveltekit

#svelte #sveltekit 

Svelte Tutorial - Create a Svelte Project

In this Svelte tutorial we’ll be taking a look at creating a Svelte project using the Svelte template. We’ll go over the file structure, install a VS Code extension and look at starting the built-in development server.

For your reference, check this out:
https://svelte.dev/tutorial/basics

#svelte #web-development #svelte