Migration depuis SvelteKit

SvelteKit est un cadre de travail pour la création d’applications web à partir de Svelte.

Principales similitudes entre SvelteKit et Astro

SvelteKit et Astro partagent certaines similitudes qui vous aideront à migrer votre projet :

SvelteKit et Astro sont tous deux des générateurs de sites statiques JavaScript modernes et des cadres de rendu côté serveur.
SvelteKit et Astro utilisent tous deux un dossier src/ pour les fichiers de votre projet et un dossier spécial pour le routage basé sur les fichiers. La création et la gestion des pages de votre site devraient vous être familières.
Astro possède une intégration officielle pour l’utilisation des composants Svelte et supporte l’installation des paquets NPM, dont plusieurs pour Svelte. Vous serez en mesure d’écrire des composants d’interface utilisateur Svelte, et pourrez peut-être conserver tout ou partie de vos composants et dépendances existants.
Astro et SvelteKit vous permettent tous deux d’utiliser un CMS headless, des APIs ou des fichiers Markdown pour les données. Vous pouvez continuer à utiliser votre système préféré de création de contenu et conserver votre contenu existant.

Principales différences entre SvelteKit et Astro

Lorsque vous reconstruisez votre site SvelteKit dans Astro, vous remarquerez quelques différences importantes :

Les sites Astro sont des applications multi-pages, alors que SvelteKit utilise par défaut des SPA (applications mono-page) avec un rendu côté serveur, mais peut également créer des MPA, des SPA traditionnelles, ou vous pouvez mélanger ces techniques au sein d’une application.
Composants : SvelteKit utilise Svelte. Les pages Astro sont construites en utilisant les composants .astro, mais peuvent aussi supporter React, Preact, Vue.js, Svelte, SolidJS, AlpineJS et le templating HTML brut.
Axé sur le contenu : Astro a été conçu pour mettre en valeur votre contenu et vous permettre d’opter pour l’interactivité uniquement en cas de besoin. Une application SvelteKit existante peut être conçue pour une forte interactivité côté client. Astro a des capacités intégrées pour travailler avec votre contenu, comme la génération de pages, mais peut nécessiter des techniques Astro avancées pour inclure des éléments qui sont plus difficiles à reproduire en utilisant les composants .astro, comme les tableaux de bord.
Prêt pour du Markdown : Astro intègre le support Markdown, et inclut une propriété YAML layout spéciale frontmatter utilisée par fichier pour le templating des pages. Si vous convertissez un blog SvelteKit basé sur le Markdown, vous n’aurez pas à installer une intégration Markdown séparée et vous n’aurez pas à définir une mise en page via un fichier de configuration. Vous pouvez utiliser vos fichiers Markdown existants, mais vous devrez peut-être les réorganiser, car le routage basé sur les fichiers d’Astro ne nécessite pas de dossier pour chaque page.

Passer de SvelteKit à Astro

Pour convertir un blog SvelteKit en Astro, commencez par notre modèle de démarrage de thème de blog, ou explorez d’autres thèmes de blog communautaires dans notre vitrine de thèmes.

Vous pouvez passer un argument --template à la commande create astro pour démarrer un nouveau projet Astro avec l’un de nos modèles de départ officiels. Vous pouvez aussi démarrer un nouveau projet à partir de n’importe quel dépôt Astro existant sur GitHub.

npm create astro@latest -- --template blog

pnpm create astro@latest --template blog

yarn create astro --template blog

Apportez vos fichiers Markdown existants (ou MDX, avec notre intégration optionnelle) comme contenu pour créer des pages Markdown ou MDX.

Bien que les composants de routage et de mise en page basés sur les fichiers soient similaires dans Astro, vous pouvez consulter la structure de projet d’Astro pour savoir où les fichiers doivent être placés.

Pour convertir d’autres types de sites, tels qu’un portfolio ou un site de documentation, consultez les modèles de départ officiels sur astro.new. Vous trouverez un lien vers le dépôt GitHub de chaque projet, ainsi que des liens en un clic pour ouvrir un projet fonctionnel dans les environnements de développement en ligne IDX, StackBlitz, CodeSandbox et Gitpod.