Netlify

Pour déployer sur Netlify, utilisez l’adaptateur adapter-netlify.

Cet adaptateur sera installé par défaut si vous utilisez adapter-auto, mais l’ajouter à votre projet vous permet de spécifier des options spécifiques à Netlify.

Usage

Installez l’adaptateur avec npm i -D @sveltejs/adapter-netlify, puis ajoutez-le à votre fichier svelte.config.js :

import import adapteradapter from '@sveltejs/adapter-netlify';

export default {
	
kit: {
    adapter: any;
}kit: {
		// les options par défaut sont affichées
		adapter: anyadapter: import adapteradapter({
			// si vaut true, va créer une Netlify Edge Function plutôt
			// qu'utiliser des fonctions standards basées sur Node
			edge: booleanedge: false,

			// si vaut true, va découper votre application en différentes
			// fonctions plutôt que d'en créer une seule pour toute votre application.
			// si `edge` vaut true, cette option ne peut pas être utilisée
			split: booleansplit: false
		})
	}
};

Ensuite, assurez-vous que vous avez un fichier netlify.toml à la racine de votre projet. Celui-ci va déterminer l’endroit où créer des assets statiques en fonction des paramètres build.publish, comme montré dans cette configuration d’exemple :

[build]
	command = "npm run build"
	publish = "build"

Si le fichier netlify.toml ou la valeur build.publish sont manquantes, une valeur par défaut de "build" sera utilisée. Notez que si vous avez défini le dossier de publication dans l’interface de Netlify comme étant un autre dossier, vous devrez le répliquer dans netlify.toml également, ou bien utiliser la valeur par défaut de "build".

Version de Node

Les nouveaux projets utilisent la dernière version LTS de Node par défaut. Toutefois, si vous mettez à jour un projet que vous avez créé il y a un moment, celui-ci est peut-être bloqué sur une autre version. Référrez-vous à la documentation de Netlify pour obtenir des détails sur comment spécifier manuellement une version de Node.

Netlify Edge Functions

SvelteKit supporte les Netlify Edge Functions. Si vous passez l’option edge: true à la fonction adapter, le rendu côté serveur sera effectué dans une fonction edge basée sur Deno et déployée à proximité de l’emplacement de la personne visitant le site. Si l’option est définie à false (par défaut), le site sera déployé sur des Netlify Functions basées sur Node.

import import adapteradapter from '@sveltejs/adapter-netlify';

export default {
	
kit: {
    adapter: any;
}kit: {
		adapter: anyadapter: import adapteradapter({
			// va créer une Netlify Edge Function utilisant Deno
			// plutôt qu'utiliser des fonctions Node standards basées sur Node
			edge: booleanedge: true
		})
	}
};

Alternatives Netlify à certaines fonctionnalités SvelteKit

Vous pouvez construire votre application en utilisant les fonctionnalités fournies directement par SvelteKit sans vous reposer sur des fonctionnalités Netlify. Utiliser les versions SvelteKit de ces fonctionnalités vous permet de les utiliser lors du développement, de les tester avec des tests d’intégration, et d’utiliser d’autres adaptateurs si vous décidez de vous passer de Netlify. Cependant, dans certains scénarios vous pourriez trouver un bénéfice d’utiliser les versions Netlify de ces fonctionnalités. Par exemple, si vous migrez une application qui était déjà hébergée sur Netlify vers SvelteKit.

_headers et _redirects

Les fichiers _headers et _redirects spécifiques à Netlify peuvent être utilisés comme réponses d’assets statiques (comme les images) en les plaçant à la racine de votre projet.

Règles de redirection

Lors de la compilation, les règles de redirection sont automatiquement ajoutées à votre fichier _redirects. (S’il n’existe pas encore, il sera créé.) Cela signifie que :

• [[redirects]] dans netlify.toml ne va jamais correspondre puisque _redirects a une plus grande priorité
• _redirects ne devrait pas avoir de règles “attrape-tout” personnalisées comme /* /foobar/:splat. Autrement, la règle automatiquement ajoutée ne sera jamais appliquée puisque Netlify ne traite que la première règle qui correspond.

Netlify Forms

1. Créez votre formulaire HTML Netlify comme décrit ici, par ex. comme /routes/contact/+page.svelte. (N’oubliez pas d’ajouter l’élément <input> caché form-name !)
2. Le robot de compilation de Netlify va parser vos fichiers HTML au moment de la compilation, ce qui signifie que votre formulaire doit être pré-rendu en tant que HTML. Vous pouvez soit ajouter export const prerender = true à votre fichier contact/+page.svelte pour pré-rendre uniquement cette page, ou bien définir l’option kit.prerender.force: true pour pré-rendre toutes vos pages.
3. Si votre formulaire Netlify a un message de succès personnalisé comme <form netlify ... action ="/success">, assurez-vous alors que le fichier /routes/success/+page.svelte existe et est pré-rendu.

Netlify Functions

Avec cet adaptateur, les endpoints SvelteKit sont hébergés en tant que Netlify Functions. Les gestionnaires de fonction Netlify ont du contexte additionnel, incluant les informations de Netlify Identity. Vous pouvez accéder à ce contexte via le champ event.platform.context au sein de vos hooks et des fonctions load de vos fichiers +page.server ou +layout.server. Ces sont des fonctions serverless lorsque la propriété edge vaut false dans la configuration de l’adaptateur ou des fonctions edge lorsqu’elle vaut true.

export const const load: (event: any) => Promise<void>load = async (event) => {
	const const context: anycontext = event: anyevent.platform.context;
	var console: Console
The console module provides a simple debugging console that is similar to the
JavaScript console mechanism provided by web browsers.
The module exports two specific components:

A Console class with methods such as console.log(), console.error() and console.warn() that can be used to write to any Node.js stream.
A global console instance configured to write to process.stdout and
process.stderr. The global console can be used without calling require('console').

Warning: The global console object’s methods are neither consistently
synchronous like the browser APIs they resemble, nor are they consistently
asynchronous like all other Node.js streams. See the note on process I/O for
more information.
Example using the global console:
console.log('hello world');
// Prints: hello world, to stdout
console.log('hello %s', 'world');
// Prints: hello world, to stdout
console.error(new Error('Whoops, something bad happened'));
// Prints error message and stack trace to stderr:
//   Error: Whoops, something bad happened
//     at [eval]:5:15
//     at Script.runInThisContext (node:vm:132:18)
//     at Object.runInThisContext (node:vm:309:38)
//     at node:internal/process/execution:77:19
//     at [eval]-wrapper:6:22
//     at evalScript (node:internal/process/execution:76:60)
//     at node:internal/main/eval_string:23:3

const name = 'Will Robinson';
console.warn(`Danger ${name}! Danger!`);
// Prints: Danger Will Robinson! Danger!, to stderr
Example using the Console class:
const out = getStreamSomehow();
const err = getStreamSomehow();
const myConsole = new console.Console(out, err);

myConsole.log('hello world');
// Prints: hello world, to out
myConsole.log('hello %s', 'world');
// Prints: hello world, to out
myConsole.error(new Error('Whoops, something bad happened'));
// Prints: [Error: Whoops, something bad happened], to err

const name = 'Will Robinson';
myConsole.warn(`Danger ${name}! Danger!`);
// Prints: Danger Will Robinson! Danger!, to err
@seesourceconsole.Console.log(message?: any, ...optionalParams: any[]): void (+1 overload)
Prints to stdout with newline. Multiple arguments can be passed, with the
first used as the primary message and all additional used as substitution
values similar to printf(3)
(the arguments are all passed to util.format()).
const count = 5;
console.log('count: %d', count);
// Prints: count: 5, to stdout
console.log('count:', count);
// Prints: count: 5, to stdout
See util.format() for more information.
@sincev0.1.100log(const context: anycontext); // s'affiche dans les logs de vos fonctions dans l'application Netlify
};

De plus, vous pouvez ajouter vos propres fonctions Netlify en créant un dossier dédié et en y ajoutant la configuration à votre fichier netlify.toml. Par exemple :

[build]
	command = "npm run build"
	publish = "build"

[functions]
	directory = "functions"

Résolution de problèmes

Accéder au système de fichiers

Vous ne pouvez pas utiliser fs dans les déploiements edge.

Vous pouvez vous servir de ce module lors des déploiements serverless, mais il ne fonctionnera probablement pas comme prévu, puisque les fichiers ne sont pas copiés depuis votre projet vers votre déploiement. Utilisez plutôt la fonction read importée depuis $app/server pour accéder à vos fichiers. read ne fonctionne pas au sein des déploiements edge (cela pourra changer dans le futur).

Comme alternative, vous pouvez pré-rendre les routes en question.