Migrar desde SvelteKit

SvelteKit es un framework para construir aplicaciones web sobre Svelte.

Similitudes clave entre SvelteKit y Astro

SvelteKit y Astro comparten algunas similitudes que te ayudarán a migrar tu proyecto:

Tanto SvelteKit como Astro son frameworks modernos de JavaScript para generadores de sitios estáticos y server-side rendering.
Tanto SvelteKit como Astro usan una carpeta src/ para los archivos de tu proyecto y una carpeta especial para enrutamiento basado en archivos. Crear y gestionar páginas para tu sitio debería resultarte familiar.
Astro tiene una integración oficial para usar componentes de Svelte y soporta instalar paquetes NPM, incluyendo varios para Svelte. Podrás escribir componentes de UI de Svelte, y puede que puedas conservar algunos o todos tus componentes y dependencias existentes.
Tanto Astro como SvelteKit te permiten usar un CMS headless, APIs o archivos Markdown para datos. Puedes continuar usando tu sistema de creación de contenido preferido, y podrás conservar tu contenido existente.

Diferencias clave entre SvelteKit y Astro

Cuando reconstruyas tu sitio de SvelteKit en Astro, notarás algunas diferencias importantes:

Los sitios de Astro son apps multi-página, mientras que SvelteKit por defecto es SPA (single-page application) con server-side rendering, pero también puede crear MPA, SPA tradicionales, o puedes mezclar y combinar estas técnicas dentro de una app.
Componentes: SvelteKit usa Svelte. Las páginas de Astro se construyen usando componentes .astro, pero también pueden soportar React, Preact, Vue.js, Svelte, SolidJS, AlpineJS y plantillas HTML crudo.
orientado a contenido: Astro fue diseñado para mostrar tu contenido y permitirte optar por la interactividad solo cuando sea necesario. Una app existente de SvelteKit podría estar construida para alta interactividad del lado del cliente. Astro tiene capacidades integradas para trabajar con tu contenido, como la generación de páginas, pero puede requerir técnicas avanzadas de Astro para incluir elementos que son más difíciles de replicar usando componentes .astro, como dashboards.
Markdown-ready: Astro incluye soporte integrado para Markdown, e incluye una propiedad especial de frontmatter YAML layout usada por archivo para plantillas de página. Si estás convirtiendo un blog basado en Markdown de SvelteKit, no tendrás que instalar una integración de Markdown separada y no configurarás un layout mediante un archivo de configuración. Puedes traer tus archivos Markdown existentes, pero puede que necesites reorganizarlos ya que el enrutamiento basado en archivos de Astro no requiere una carpeta para cada ruta de página.

Cambiar de SvelteKit a Astro

Para convertir un blog de SvelteKit a Astro, comienza con nuestra plantilla de inicio del tema de blog, o explora más temas de blog de la comunidad en nuestro showcase de temas.

Puedes pasar un argumento --template al comando create astro para iniciar un nuevo proyecto de Astro con uno de nuestros starters oficiales. O, puedes iniciar un nuevo proyecto desde cualquier repositorio existente de Astro en GitHub.

npm create astro@latest -- --template blog

pnpm create astro@latest --template blog

yarn create astro --template blog

Trae tus archivos Markdown (o MDX, con nuestra integración opcional) existentes como contenido para crear páginas Markdown o MDX.

Aunque el enrutamiento basado en archivos y los componentes de layout son similares en Astro, puede que quieras leer sobre la estructura de proyecto de Astro para aprender dónde deben ubicarse los archivos.

Para convertir otros tipos de sitios, como un portafolio o sitio de documentación, consulta más plantillas oficiales de inicio en astro.new. Encontrarás un enlace al repositorio de GitHub de cada proyecto, así como enlaces de un clic para abrir un proyecto funcional en los entornos de desarrollo en línea StackBlitz y CodeSandbox.