Initialiser un projet SVELTE

Voici un guide pas à pas pour installer et démarrer un projet avec Svelte 5. Il couvre tout, de l’installation de Node.js aux premières commandes de développement.

1. Prérequis

• Node.js : version LTS (≥ v18.x).
  Vérifiez avec :

node --version

npm ou pnpm : fourni avec Node.js (npm ≥ 9.x recommandé).
Vérifiez avec :

npm --version

Un éditeur de code (Visual Studio Code recommandé).

2. Créer un nouveau projet Svelte 5

Ouvrez un terminal, placez-vous dans le répertoire où vous voulez créer votre projet, puis lancez :

npm create svelte@latest mon-app

Ou avec vite

npm init vite@latest mon-app -- --template svelte

• mon-app : nom de votre dossier de projet.
• @latest pointe vers la version 5 de Svelte.

Vous verrez un assistant interactif :

1. Skeleton project ou Demo app ?
   • Skeleton pour un projet vide,
   • Demo pour une app de démonstration.
2. TypeScript ?
   • Oui : utilisez TypeScript,
   • Non : JavaScript pur. (Cliquez sur non afin de développer en JS pur)
3. ESLint + Prettier ?
   • Conseillé pour un code propre.
4. Tailwind, PostCSS… ou CSS natif.
   • Choisissez selon votre workflow.

3. Installer les dépendances

Une fois l’assistant terminé :

cd mon-app
npm install

Ou, si vous utilisez pnpm :

pnpm install

Ça installe :

• svelte (framework),
• @sveltejs/kit (pour SvelteKit, si sélectionné),
• Outils de build (Vite),
• Plugins choisis (TypeScript, linter, etc.).

4. Lancer le serveur de développement

npm run dev -- --open

• npm run dev : démarre Vite en mode développement.
• --open : ouvre automatiquement votre navigateur à l’adresse http://localhost:5173.

Vous devriez voir la page d’accueil Svelte 5.

5. Structure du projet

Voici l’arborescence minimale :

mon-app/
├── src/
│   ├── routes/        # pages (SvelteKit)
│   ├── lib/           # composants, utilitaires
│   └── app.html       # template HTML principal
├── static/            # fichiers statiques (images, robots.txt…)
├── svelte.config.js   # configuration Svelte
├── vite.config.js     # configuration Vite
├── package.json
└── tsconfig.json      # si TypeScript

• src/routes/+page.svelte : point d’entrée des pages.
• src/lib/ : placez vos composants réutilisables.

6. Extensions et outils utiles

• Svelte for VSCode : coloration, auto-complétion.
• ESLint / Prettier pour le formatage.
• pnpm pour un install plus rapide et moins volumineux.

7.. Prochaines étapes

Utiliser actions et loaders pour charger et manipuler les données côté serveur.

Explorer la documentation officielle de SvelteKit pour le routage et la SSR.

Ajouter des stores Svelte pour la gestion d’état.