Veröffentlicht · wird verbessert
SvelteKit-Anleitung · 6/6
Dieses Kapitel ist vorerst nur auf Englisch verfügbar.
A SvelteKit app is built with vite build, and an adapter turns the output into something your target platform can run. The same code can be deployed to a Node.js server, a static host or a serverless platform just by switching adapters.
npm run build # vite build: build the app and run the adapter
npm run preview # check the build locally (http://localhost:4173 by default)npm run preview uses Vite's preview server to check the result; it is not meant to serve production traffic. How the app actually runs in production is decided by the adapter.
The adapter is set in the sveltekit() options in vite.config.ts. New projects start with adapter-auto, which detects supported environments at build time, but once you know where you are deploying it is better to install and configure that adapter explicitly.
| Adapter | Target |
|---|---|
@sveltejs/adapter-node | Your own Node.js server or a Docker container |
@sveltejs/adapter-static | Static hosting, with every page prerendered |
@sveltejs/adapter-vercel | Vercel |
@sveltejs/adapter-netlify | Netlify |
@sveltejs/adapter-cloudflare | Cloudflare Workers and Pages |
@sveltejs/adapter-bun | Bun servers |
Community adapters cover many other platforms as well.
npm install -D @sveltejs/adapter-node// vite.config.ts
import adapter from '@sveltejs/adapter-node';
import { sveltekit } from '@sveltejs/kit/vite';
import { defineConfig } from 'vite';
export default defineConfig({
plugins: [
sveltekit({
adapter: adapter(),
paths: { origin: 'https://example.com' }
})
]
});npm run build writes a server to the build folder, which you start with node build. It listens on 0.0.0.0:3000 by default; change that with the PORT and HOST environment variables. paths.origin is the public URL of your app and is used for CSRF checks and prerendering. Packages in devDependencies are bundled into the output, while packages in dependencies are loaded from node_modules at runtime, so the server needs the folder, and production dependencies. files are not loaded automatically in production; if you rely on one, start the app with .
buildpackage.json.envnode --env-file=.env buildFROM node:lts-alpine AS build
WORKDIR /app
COPY package*.json ./
RUN npm ci
COPY . .
RUN npm run build && npm prune --omit=dev
FROM node:lts-alpine
WORKDIR /app
COPY --from=build /app/build ./build
COPY --from=build /app/node_modules ./node_modules
COPY package.json .
ENV NODE_ENV=production
EXPOSE 3000
CMD ["node", "build"]The multi-stage build keeps compilers and dev tooling out of the final image, which contains only the built server and its runtime dependencies.
For hosts that only serve files, such as GitHub Pages, a plain web server or a CDN, use adapter-static. Every page must be generated as HTML at build time, so enable prerender in the root layout.
// sveltekit() options in vite.config.ts
import adapter from '@sveltejs/adapter-static';
sveltekit({
adapter: adapter({
pages: 'build',
assets: 'build',
fallback: undefined,
precompress: false,
strict: true
})
});
// src/routes/+layout.ts
// export const prerender = true;With this approach, features that need a server on every request, such as form actions and server loads at request time, are not available. To ship an app that cannot be prerendered as an SPA, set fallback: '200.html', but this hurts performance and SEO, so use it only when you really need it.
npm run check and your tests pass.$app/env/private and supply them as environment variables in production.adapter-node docs.adapter-auto with the specific adapter.npm run build builds the app, and the adapter produces the deployable output.adapter-node with node build for Node servers, and adapter-static with prerendering for static hosts.For more detail, see the official documentation:
0 Kommentare
Anmelden · Melde dich an, um einen Kommentar zu schreiben.
Schreib den ersten Kommentar.