Configuration

Si oui ou non utiliser des hashes ou des nonces pour restreindre les éléments <script> et <style>. 'auto' va utiliser des hashes pour les pages prérendues, et des nonces pour les pages dynamiquement rendues.

Les directives qui seront ajoutées aux en-têtes Content-Security-Policy.

Les directives qui seront ajoutées aux en-têtes Content-Security-Policy-Report-Only.

Si oui ou non vérifier les en-têtes origin entrantes pour les soumissions de formulaire POST, PUT, PATCH, ou DELETE et vérifier qu’elle correspond à l’origine du serveur.

Pour permettre aux gens de faire des requêtes POST, PUT, PATCH, ou DELETE avec un Content-Type valant application/x-www-form-urlencoded, multipart/form-data, ou text/plain vers votre application depuis d’autres origines, vous aurez besoin de désactiver cette option. Soyez vigilant•e !

Le dossier dans lequel chercher des fichiers .env.

Un préfixe qui signale qu’une variable d’environnement peut être exposée de manière sans risque au code client. Voir les sections $env/static/public et $env/dynamic/public. Notez que l’option de Vite envPrefix doit être définie indépendamment si vous utilisez la gestion des variables d’environnement de Vite — même l’utilisation de cette fonctionnalité ne devrait généralement pas être nécessaire.

Un préfixe qui signale qu’il est dangereux d’exposer la variable d’environnement au code client. Les variables d’environnement ne correspondant ni au préfixe public ni au préfixe privé seront complètement supprimées. Voir les sections $env/static/private et $env/dynamic/private.

un emplacement pour mettre des fichiers statiques qui devraient avoir des URLs stables et ne nécessitant pas de traitement, comme favicon.ico et manifest.json.

la librairie interne de votre application, accessible partout dans votre base de code en tant que $lib

un dossier contenant les matchers de paramètres

les fichiers qui définissent la structure de votre application (voir la section Routing)

l’emplacement du point d’entrée de votre service worker (voir la section Service workers)

l’emplacement du template pour les réponses HTML

l’emplacement du template pour les réponses d’erreur de secours

SvelteKit va précharger les modules JavaScript nécessaire pour la page initiale pour éviter d’importer des “cascades”, entraînant des démarrages plus rapides de votre application. Il y a trois stratégies ayant des compromis différents :

• modulepreload — utilise <link rel="modulepreload">. Ceci fournit les meilleurs résultats pour les navigateurs basés sur Chromium, dans les versions 115+ de Firefox, et dans les versions 17+ de Safari. Cette valeur est ignorée dans les navigateurs plus anciens.
• preload-js — utilise <link rel="preload">. Empêche les cascades dans Chromium et Safari, mais Chromium va parser chaque module deux fois (une fois en tant que script, une fois en tant que module). Les modules seront requêtés deux fois par Firefox. C’est une bonne option si vous souhaitez maximiser la performance pour les utilisateurs et utilisatrices ayant un appareil iOS au prix d’une légère dégration pour les utilisateurs et utilisatrices de Chromium.
• preload-mjs — utilise <link rel="preload"> mais avec l’extension .mjs qui empêche le double parsing de Chromium. Certains serveurs web statiques vont échouer à servir des fichiers .mjs ayant une en-tête Content-Type: application/javascript, ce qui va provoquer le plantage de votre application. Si cela ne vous concerne pas, cette option est celle qui fournit la meilleure performance pour le grand nombre de personnes, en attendant que modulepreload soit plus largement supporté

L’option bundleStrategy affecte la manière dont les fichiers JavaScript et CSS de votre application sont chargés.

• Si 'split', découpe l’application en plusieurs fichiers .js / .css afin qu’ils soient chargés en différé au fur et à mesure que l’utilisateur ou l’utilisatrice navigue sur votre application. C’est la valeur par défaut, et est recommandée pour la plupart des scénarios.
• Si 'single', crée uniquement un bundle .js et un fichier .css contenant le code pour toute l’application.
• Si 'inline', inline tout le code JavaScript et CSS de toute votre application dans le HTML. Le résultat est utilisable sans serveur (c-à-d que vous pouvez simplement ouvrir le fichier dans votre navigateur).

Lorsque vous utilisez 'split', vous pouvez également ajuster le comportement de bundling en définissant output.experimentalMinChunkSize et output.manualChunks dans le champ build.rollupOptions de votre configuration Vite.

Si vous souhaitez inliner vos assets, vous aurez besoin de définir l’option de Vite build.assetsInlineLimit à une valeur de taille appropriée, puis d’importer vos assets avec Vite.

import { function sveltekit(): Promise<Plugin$1<any>[]>
Returns the SvelteKit Vite plugins.
sveltekit } from '@sveltejs/kit/vite';
import { function defineConfig(config: UserConfig): UserConfig (+5 overloads)
Type helper to make it easier to use vite.config.ts
accepts a direct 
{@link 
UserConfig
}
 object, or a function that returns it.
The function receives a 
{@link 
ConfigEnv
}
 object.
defineConfig } from 'vite';

export default function defineConfig(config: UserConfig): UserConfig (+5 overloads)
Type helper to make it easier to use vite.config.ts
accepts a direct 
{@link 
UserConfig
}
 object, or a function that returns it.
The function receives a 
{@link 
ConfigEnv
}
 object.
defineConfig({
	UserConfig.plugins?: PluginOption[] | undefined
Array of vite plugins to use.
plugins: [function sveltekit(): Promise<Plugin$1<any>[]>
Returns the SvelteKit Vite plugins.
sveltekit()],
	build?: BuildEnvironmentOptions | undefined
Build specific options
build: {
		// inline tous les assets importés
		BuildEnvironmentOptions.assetsInlineLimit?: number | ((filePath: string, content: Buffer) => boolean | undefined) | undefined
Static asset files smaller than this number (in bytes) will be inlined as
base64 strings. If a callback is passed, a boolean can be returned to opt-in
or opt-out of inlining. If nothing is returned the default logic applies.
Default limit is 4096 (4 KiB). Set to 0 to disable.
@default4096assetsInlineLimit: var Infinity: numberInfinity
	}
});

<script>
	// importe l'asset avec Vite
	import favicon from './favicon.png';
</script>

<svelte:head>
	<!-- cet asset sera inliné en tant qu'URL en base64 -->
	<link rel="icon" href={favicon} />
</svelte:head>

<script lang="ts">
	// importe l'asset avec Vite
	import favicon from './favicon.png';
</script>

<svelte:head>
	<!-- cet asset sera inliné en tant qu'URL en base64 -->
	<link rel="icon" href={favicon} />
</svelte:head>

Un chemin absolu d’où les fichiers de votre application sont servis. C’est utile si vos fichiers sont servis depuis un bucket de stockage, peu importe son type.

Un chemin relatif à la racine qui doit commencer, mais pas finir, par / (par ex. /base-path), à moins que ce soit la chaîne de caractères vide. Cette option définit l’endroit depuis lequel votre application est servie et permet à l’application d’exister sur un chemin non-racine. Notez que vous devez préfixer tous vos liens relatifs à la racine avec la valeur base sinon ils pointeront vers la racine de votre domaine, et non vers votre base (c’est comme cela que fonctionnent les navigateurs). Vous pouvez utiliser base importé depuis $app/paths pour cela : <a href="{base}/your-page">Link</a>. Si vous vous retrouvez à écrire ceci régulièrement, il peut être pertinent de l’extraire dans un composant réutilisable.

Si oui ou non utiliser les chemins d’assets relatifs.

Si vaut true, les base et assets importés depuis $app/paths seront remplacés par des chemins d’assets relatifs lors du rendu côté serveur, résultant en du HTML plus portable. Si vaut false, les %sveltekit.assets% ainsi que les références aux artéfacts de compilation seront toujours des chemins relatifs à la racine, à moins que paths.assets ne soit une URL externe

Les pages de secours des SPA utiliseront toujours des chemins absolus, quelque soit la valeur de cette option.

Si votre application utilise un élément <base>, vous devriez définir cette option à false, sinon les URLs d’asset seront résolues de manière incorrecte en utilisant l’URL <base> plutôt que la page courante.

Dans la version 1.0, undefined était une valeur valide, et était utilisée par défaut. Dans ce cas, si paths.assets n’était pas externe, SvelteKit remplaçait %sveltekit.assets% avec un chemin relatif et utilisait des chemins relatifs pour référencer les artéfacts de compilation, mais base et assets importés depuis $app/paths restaient tels que définis dans votre configuration.

Le nombre de pages à être pré-rendues simultanément. JavaScript n’est exécuté que sur un seul thread, mais dans des cas où la performance de pré-rendu est liée au réseau (par exemple si vous chargez du contenu depuis un CMS distant) cette option peut accélérer les choses en traitant d’autres tâches en attendant les réponses du réseau.

Si oui ou non SvelteKit devrait trouver des pages à pré-rendre en suivant les liens depuis les entries.

Un tableau de pages à pré-rendre, ou depuis lesquelles commencer à chercher (si crawl: true). La chaîne de caractères * inclut toutes les routes ne contenant pas de paramètre [parameters] requis, avec les paramètres optionnels inclus comme vides (puisque SvelteKit ne sait pas quelle valeur ces paramètres devraient avoir).

Comment répondre aux erreurs HTTP rencontrées lors du pré-rendu de l’application.

• 'fail' — faire échouer la compilation
• 'ignore' — ignorer l’échec en silence et continuer
• 'warn' — continuer, mais afficher un avertissement
• (details) => void — un gestionnaire d’erreur personnalisé qui prend un objet details ayant les propriétés status, path, referrer, referenceType et message. Si vous utilisez throw depuis cette fonction, la compilation va échouer

/** @type {import('@sveltejs/kit').Config} */
const 
const config: {
    kit: {
        prerender: {
 handleHttpError: ({ path, referrer, message }: {
   path: any;
   referrer: any;
     message: any;
 }) => void;
        };
    };
}
@type{import('@sveltejs/kit').Config}config = {
	
kit: {
    prerender: {
        handleHttpError: ({ path, referrer, message }: {
 path: any;
 referrer: any;
 message: any;
        }) => void;
    };
}kit: {
		
prerender: {
    handleHttpError: ({ path, referrer, message }: {
        path: any;
        referrer: any;
        message: any;
    }) => void;
}prerender: {
			
handleHttpError: ({ path, referrer, message }: {
    path: any;
    referrer: any;
    message: any;
}) => voidhandleHttpError: ({ path: anypath, referrer: anyreferrer, message: anymessage }) => {
				// ignore un lien visant délibéremment une page 404
				if (path: anypath === '/not-found' && referrer: anyreferrer === '/blog/how-we-built-our-404-page') {
					return;
				}

				// sinon faire échouer la compilation
				throw new 
var Error: ErrorConstructor
new (message?: string, options?: ErrorOptions) => Error (+1 overload)Error(message: anymessage);
			}
		}
	}
};

Comment répondre lorsque les liens de hash d’une page pré-rendue à une autre ne correspondent à aucun id sur la page de destination.

• 'fail' — faire échouer la compilation
• 'ignore' — ignorer l’échec en silence et continuer
• 'warn' — continuer, mais afficher un avertissement
• (details) => void — un gestionnaire d’erreur personnalisé qui prend un objet details ayant les propriétés path, id, referrers, et message. Si vous utilisez throw depuis cette fonction, la compilation va échouer

Comment répondre lorsqu’une entrée générée par l’export entries ne correspond pas à la route depuis laquelle elle a été générée.

• 'fail' — faire échouer la compilation
• 'ignore' — ignorer l’échec en silence et continuer
• 'warn' — continuer, mais afficher un avertissement
• (details) => void — un gestionnaire d’erreur personnalisé qui prend un objet details ayant les propriétés generatedFromId, entry, matchedId, et message. Si vous utilisez throw depuis cette fonction, la compilation va échouer

La valeur de url.origin lors du pré-rendu ; utile s’il est incluses dans du contenu rendu.

Le type de routeur client à utiliser.

• 'pathname' est la valeur par défaut et signifie que le chemin d’URL courant détermine la route
• 'hash' signifie que la route est déterminée par location.hash. Dans ce cas, le SSR et le pré-rendu sont désactivés. Cette option est uniquement recommandée si pathname n’est pas une option, par exemple parce que vous ne contrôlez pas le serveur web depuis lequel votre application est déployée. Cette option a des contre-parties : vous ne pouvez pas utiliser de rendu côté serveur (ou de facto toute logique serveur), et vous devez vous assurer que les liens dans votre application commencent tous par #/, sans quoi ils ne fonctionneront pas. À part ces deux points, tout fonctionne exactement comme une application SvelteKit normale.

Comment déterminer la route à charger lors d’une navigation vers une nouvelle page.

Par défaut, SvelteKit va servir un manifeste de route au navigateur. Lors d’une navigation, ce manifeste est utilisé (au même titre que le hook reroute, s’il existe, pour déterminer les composants à charger et les fonctions load exécuter. Puisque tout se produit sur le client, cette décision peut être prise immédiatement. La contrepartie est que le manifeste a besoin d’être chargé et parsé avant que la première navigation puisse se produire, ce qui peut avoir un impact si votre application contient beaucoup de routes.

De manière alternative, SvelteKit peut déterminer la route sur le serveur. Ceci signifie que pour chaque navigation vers un chemin qui n’a pas encore été visité, le serveur sera requêté pour déterminer la route. Ceci a plusieurs avantages :

• Le client n’a pas besoin de d’abord charger le manifeste de route, ce qui peut permettre des temps de chargement initiaux réduits
• La liste des routes est cachée du public
• Le serveur a une opportunité d’intercepter chaque navigation (par exemple au travers d’un middleware), permettant (par exemple) de l’A/B testing dont SvelteKit n’a pas conscience

La contrepartie est que pour les chemins non visités, la résolution va prendre un peu plus de temps (même si cela est atténué par le préchargement).

Lorsque vous utilisez une résolution de route côté serveur associée à du pré-rendu, la résolution est pré-rendue avec la route elle-même.

Si oui ou non activer automatiquement le service worker, s’il existe.

Détermine quels ficheirs de votre dossier static seront disponible dans $service-worker.files.

Une fonction qui vous permet de modifier le fichier tsconfig.json généré. Vous pouvez muter la configuration (recommandé) ou en renvoyer une nouvelle. Ceci est utile pour étendre un fichier tsconfig.json partagé se trouvant à la racine d’un monorepo, par exemple.

La chaîne de caractères représentant la version actuelle de l’application. Si précisée, cette valeur doit être déterministe (par ex. une référence de commit plutôt qu’un Math.random() ou Date.now().toString()), et vaut par défaut un timestamp du build.

Par exemple, pour utiliser le hash du commit actuel, vous pourriez utiliser git rev-parse HEAD :

import * as module "node:child_process"child_process from 'node:child_process';

export default {
	
kit: {
    version: {
        name: string;
    };
}kit: {
		
version: {
    name: string;
}version: {
			name: stringname: module "node:child_process"child_process.function execSync(command: string): Buffer (+3 overloads)
The child_process.execSync() method is generally identical to 
{@link 
exec
}
 with the exception that the method will not return
until the child process has fully closed. When a timeout has been encountered
and killSignal is sent, the method won’t return until the process has
completely exited. If the child process intercepts and handles the SIGTERM signal and doesn’t exit, the parent process will wait until the child process
has exited.
If the process times out or has a non-zero exit code, this method will throw.
The Error object will contain the entire result from 
{@link 
spawnSync
}
.
Never pass unsanitized user input to this function. Any input containing shell
metacharacters may be used to trigger arbitrary command execution.
@sincev0.11.12
@paramcommand The command to run.
@returnThe stdout from the command.execSync('git rev-parse HEAD').Buffer<ArrayBufferLike>.toString(encoding?: BufferEncoding, start?: number, end?: number): string
Decodes buf to a string according to the specified character encoding inencoding. start and end may be passed to decode only a subset of buf.
If encoding is 'utf8' and a byte sequence in the input is not valid UTF-8,
then each invalid byte is replaced with the replacement character U+FFFD.
The maximum length of a string instance (in UTF-16 code units) is available
as 
{@link 
constants.MAX_STRING_LENGTH
}
.
import { Buffer } from 'node:buffer';

const buf1 = Buffer.allocUnsafe(26);

for (let i = 0; i &#x3C; 26; i++) {
  // 97 is the decimal ASCII value for 'a'.
  buf1[i] = i + 97;
}

console.log(buf1.toString('utf8'));
// Prints: abcdefghijklmnopqrstuvwxyz
console.log(buf1.toString('utf8', 0, 5));
// Prints: abcde

const buf2 = Buffer.from('tést');

console.log(buf2.toString('hex'));
// Prints: 74c3a97374
console.log(buf2.toString('utf8', 0, 3));
// Prints: té
console.log(buf2.toString(undefined, 0, 3));
// Prints: té
@sincev0.1.90
@paramencoding The character encoding to use.
@paramstart The byte offset to start decoding at.
@paramend The byte offset to stop decoding at (not inclusive).toString().String.trim(): string
Removes the leading and trailing white space and line terminator characters from a string.
trim()
		}
	}
};

L’intervalle en millisecondes utilisé pour régulièrement vérifier (via “polling”) les changements de version. Si cette valeur vaut 0, aucun “polling” ne se produit.