4. Se lancer avec Svelte(Kit)

Il existe plusieurs façons d'utiliser Svelte avec ou sans SvelteKit.

Installation officielle

La documentation officielle conseille d'installer Svelte avec SvelteKit, quitte à ce que vous ne vous serviez pas du tout des fonctionnalités de SvelteKit.

Vous pouvez installer Svelte avec SvelteKit en lançant la commande :

npx sv create my-svelte-app # puis suivre les indications

Vous pourrez alors choisir différentes options, selon vos besoins.

Le développement d'applications avec Svelte et SvelteKit nécessite d'avoir un environnement d'exécution de JavaScript serveur, comme Node (le plus courant), Deno, ou Bun. Assurez-vous d'avoir l'un de ces environnements à jour.

Installation avec Vite

Vite propose des templates d'installation de projets clés-en-main, dont un avec Svelte (mais sans SvelteKit) :

npm create vite@latest my-svelte-app -- --template svelte

Installation du projet Pokésvelte

Pour faciliter le déroulé de cette formation, j'ai préparé un projet à partir de l'installation officielle de Svelte. Vous pouvez le retrouver sur ce repo.

Vous pouvez retrouver les différentes modifications que j'ai ajoutées à la configuration de base ici.

Clonez (ou téléchargez) le projet.

Développer

Une fois l'installation terminée – peu importe celle que vous avez choisie –, vous devrez certainement installer les dépendances liées à Svelte(Kit), puis lancer le serveur de développement :

cd my-svelte-app

npm install # installe les dépendances

npm run dev # lance le serveur de développement

Vous pouvez bien sûr faire toutes ces étapes avec d'autres package managers, comme Bun ou Yarn.

Il ne vous reste plus qu'à ouvrir votre navigateur sur l'adresse http://localhost:5173, et écrire votre code.

TypeScript

Nous allons supposer l'utilisation de TypeScript tout au long de ce projet, mais SvelteKit fonctionne aussi avec JavaScript. Il vous suffit simplement ne pas choisir l'option TypeScript lors de la création du projet.

Dans ce cas, il vous faudra utiliser des fichiers *.js partout où nous utiliserons des fichiers *.ts, et supprimer l'attribut lang='ts' de vos <script>.

<script lang="ts">
	let a: number = 1;
</script>

<script>
	let a = 1;
</script>

Si vous ne connaissez pas TypeScript, pas de panique ! On choisit d'utiliser TypeScript ici surtout pour l'autocomplétion qui facilite beaucoup le développement. Vous n'avez pas réellement besoin de connaissances sur TypeScript pour suivre ce tutoriel.