SvelteKitDébuter avec SvelteKit

Structure d’un projet

Un projet SvelteKit typique ressemble à ça :

my-project/
├ src/
│ ├ lib/
│ │ ├ server/
│ │ │ └ [your server-only lib files]
│ │ └ [your lib files]
│ ├ params/
│ │ └ [your param matchers]
│ ├ routes/
│ │ └ [your routes]
│ ├ app.html
│ ├ error.html
│ ├ hooks.client.js
│ ├ hooks.server.js
│ └ service-worker.js
├ static/
│ └ [your static assets]
├ tests/
│ └ [your tests]
├ package.json
├ svelte.config.js
├ tsconfig.json
└ vite.config.js

Vous trouverez également des fichiers classiques comme .gitignore et .npmrc (et .prettierrc et eslint.config.js et ainsi de suite, si vous choisissez ces options après avoir lancé npx sv create).

Fichiers d’un projet

src

Le dossier src contient le coeur de votre projet. Tout y est optionnel à l’exception de src/routes et src/app.html.

lib contient votre code de “librairie” (utilitaires et composants), qui peut être importé via l’alias $lib, ou empaqueté pour distribution en utilisant svelte-package
- server contient votre code de “librairie” dédié serveur. Il peut être importé en utilisant l’alias $lib/server. SvelteKit vous empêchera d’importer du code provenant de ce dossier dans du code client
params contient tout matcher de paramètre dont votre application a besoin
routes contient les routes de votre application. Vous pouvez aussi y placer des composants qui ne seraient utilisés que pour une route spécifique
app.html est votre template de page — un document HTML contenant les placeholders suivants :
- %sveltekit.head% — les éléments <link> et <script> nécessaires à votre application, plus tout contenu défini par <svelte:head>
- %sveltekit.body% — le markup pour une page rendue. Ce placeholder devrait vivre dans une <div> ou dans un autre élément, plutôt que directement dans le <body> afin d’éviter des bugs causés par d’éventuelles extensions navigateur injectant des éléments qui seraient ensuite détruits lors du processus d’hydratation. SvelteKit vous préviendra lors du développement si ce n’est pas le cas
- %sveltekit.assets% — soit paths.assets, si précisé, soit un chemin relatif à paths.base
- %sveltekit.nonce — une règle CSP nonce pour les liens et scripts manuellement inclus, s’il y en a
- %sveltekit.env.[NAME]% — ceci sera remplacé au moment du rendu par la variable d’environnement [NAME], dont le nom doit être préfixé par publicPrefix (en général PUBLIC_). Ce placeholder sera remplacé par '' si aucune variable d’environnement ne correspond
error.html est la page qui est affichée lorsque tout le reste s’est effondré. Elle peut contenir les placeholders suivants :
- %sveltekit.status% — le status HTTP
- %sveltekit.error.message% — le message d’erreur
hooks.client.js contient vos hooks client
hooks.server.js contient vos hooks serveur
service-worker.js contient votre service worker

(Le fait que votre projet contienne des fichiers .js ou .ts dépend de si vous avez choisi d’utiliser TypeScript lorsque vous avez créé votre projet.)

Si vous avez ajouté Vitest lors de l’initialisation de votre projet, vos tests unitaires pourront être placés dans le dossier src avec l’extension .test.js.

static

Tout asset statique devant être servi tel quel, comme robots.txt ou favicon.png, doit être placé dans ce dossier.

tests

Si vous avez ajouté Playwright lors de l’initialisation de votre projet afin de faire des tests dans le navigateur, ces tests pourront être placés dans ce dossier.

package.json

Votre fichier package.json doit inclure @sveltejs/kit, svelte et vite comme devDependencies.

Lorsque vous créez un projet avec npx sv create, vous remarquerez également que package.json contient "type": "module". Ceci signifie que les fichiers .js sont interprétés comme des modules natifs JavaScript supportant les mot-clés import et export. Les fichiers en CommonJS nécessitent alors une extension .cjs.

svelte.config.js

Ce fichier contient votre configuration Svelte et SvelteKit.

tsconfig.json

Ce fichier (ou jsconfig.json, si vous préférez vérifier le typage dans des fichiers .js, plutôt que dans des fichiers .ts) configure TypeScript, si vous avec ajouté la vérification de types pendant npx sv create. Puisque SvelteKit repose sur le fait que certaines configurations doivent être définies d’une certaine manière, il génère lui-même son fichier .svelte-kit/tsconfig.json que votre propre configuration doit étendre avec extends.

vite.config.js

Un projet SvelteKit n’est en réalité qu’un projet Vite qui utilise le plugin @sveltejs/kit/vite, en plus d’autres configurations Vite.

Autres fichiers

.svelte-kit

Au fur et à mesure que vous allez construire votre projet, SvelteKit va générer des fichiers dans un dossier .svelte-kit (configurable avec outDir). Vous pouvez ignorer son contenu, et le supprimer à tout moment (tous ces fichiers seront régénérés lors du prochain dev ou build).

Modifier cette page sur Github

précédent suivant

Types de projet Standards du web