From 84cb5eb75b4605e5eed464bdbc4dbc5b88a8597b Mon Sep 17 00:00:00 2001 From: Simon Holthausen Date: Fri, 13 Jan 2023 11:21:54 +0100 Subject: [PATCH] docs: more build docs Transforming the adapters document into a more general build doc --- ...50-adapters.md => 50-building-your-app.md} | 37 ++++++++++++++++++- sites/kit.svelte.dev/src/hooks.server.js | 3 +- 2 files changed, 37 insertions(+), 3 deletions(-) rename documentation/docs/20-core-concepts/{50-adapters.md => 50-building-your-app.md} (80%) diff --git a/documentation/docs/20-core-concepts/50-adapters.md b/documentation/docs/20-core-concepts/50-building-your-app.md similarity index 80% rename from documentation/docs/20-core-concepts/50-adapters.md rename to documentation/docs/20-core-concepts/50-building-your-app.md index 9315e47cb709f..e26ea73e0ab5b 100644 --- a/documentation/docs/20-core-concepts/50-adapters.md +++ b/documentation/docs/20-core-concepts/50-building-your-app.md @@ -1,10 +1,43 @@ --- -title: Adapters +title: Building Your App --- +Building a SvelteKit consists of two stages. First the production build is run. This will create a client and a server build which are later consumed by the corresponding environments. [Prerendering](/docs/page-options#prerender) is executed at this stage, if enabled. The second step is to _adapt_ the output to your deployment target using adapters (more on that in the later sections). + +## During the build + +SvelteKit will load your `+page/layout(.server).js` files (and all files they import) for analysis during the build. This could lead to code eagerly running which you want to avoid at that stage. Wrap the code in question with `building` from `$app/environment`: + +```js +/// file: +layout.server.js +// @filename: ambient.d.ts +declare module '$lib/server/database' { + export function setupMyDatabase(): void; +} + +// @filename: index.js +// ---cut--- +import { building } from '$app/environment'; +import { setupMyDatabase } from '$lib/server/database'; + +if (!building) { + setupMyDatabase(); +} + +export const load() { + // ... +} +``` + +## Preview your app + +Run the `preview` script to look at your app locally after the production build is done. Note that this does not yet include adapter-specific adjustments like the [`platform` object](#platform-specific-context). + +## Adapters + Before you can deploy your SvelteKit app, you need to _adapt_ it for your deployment target. Adapters are small plugins that take the built app as input and generate output for deployment. -By default, projects are configured to use `@sveltejs/adapter-auto`, which detects your production environment and selects the appropriate adapter where possible. If your platform isn't (yet) supported, you may need to [install a custom adapter](/docs/adapters#community-adapters) or [write one](/docs/adapters#writing-custom-adapters). +By default, projects are configured to use `@sveltejs/adapter-auto`, which detects your production environment and selects the appropriate adapter where possible. If your platform isn't (yet) supported, you may need to [install a custom adapter](#community-adapters) or [write one](#writing-custom-adapters). > See the [adapter-auto README](https://github.com/sveltejs/kit/tree/master/packages/adapter-auto) for information on adding support for new environments. diff --git a/sites/kit.svelte.dev/src/hooks.server.js b/sites/kit.svelte.dev/src/hooks.server.js index c7e8742e90e99..f064da48dda73 100644 --- a/sites/kit.svelte.dev/src/hooks.server.js +++ b/sites/kit.svelte.dev/src/hooks.server.js @@ -1,6 +1,7 @@ const redirects = { '/docs/typescript': '/docs/types', - '/docs/amp': '/docs/seo#manual-setup-amp' + '/docs/amp': '/docs/seo#manual-setup-amp', + '/docs/adapters': '/docs/building-your-app' }; const preload_types = ['js', 'css', 'font'];