SvelteKit

SvelteKit is a framework for streamlined web development. It consists of the core @sveltejs/kit package and several official adapters used to deploy your application to different environments.

Official packages include:

• @sveltejs/kit: The core framework.
• @sveltejs/adapter-auto: Automatically detects the deployment environment.
• @sveltejs/adapter-cloudflare: For Cloudflare deployments.
• @sveltejs/adapter-netlify: For Netlify deployments.
• @sveltejs/adapter-node: For Node.js environments.
• @sveltejs/adapter-static: For static site generation (SSG).
• @sveltejs/adapter-vercel: For Vercel deployments.
• @sveltejs/enhanced-img: For optimized image handling.
• @sveltejs/package: A utility for packaging libraries.

Community-maintained adapters are also available via the Svelte Society.

@sveltejs/enhanced-img is a Vite plugin that utilizes a Svelte preprocessor to identify images within your project and transform them during the build process. This allows for automated image optimization and transformation at build-time.

WARNING: This package is currently experimental. It follows pre-1.0 versioning, meaning breaking changes may be introduced in any minor version release. Use with caution in production environments.

Use @sveltejs/adapter-cloudflare to build SvelteKit applications for deployment on Cloudflare. It supports two primary deployment patterns:

1. Cloudflare Workers: Deploying with static assets support.
2. Cloudflare Pages: Deploying with Workers integration (Functions).

For detailed configuration and usage instructions, refer to the official SvelteKit adapter-cloudflare documentation.

npm i -D @sveltejs/adapter-cloudflare

A typical SvelteKit project is organized into several key directories and files. The src directory contains the application logic, static holds unmanaged assets, and tests contains browser-based tests.

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

The @sveltejs/adapter-vercel package is a SvelteKit adapter designed to build your application specifically for deployment on the Vercel platform. It configures your SvelteKit app to leverage Vercel's infrastructure, such as Serverless Functions or Edge Functions, depending on your configuration.

For detailed configuration options (such as specifying the runtime or output mode), refer to the official SvelteKit documentation.

// Example installation
npm install -D @sveltejs/adapter-vercel

SvelteKit automates modern web development best practices through several core capabilities:

• Routing: A built-in router that updates the UI when links are clicked.
• Configurable Rendering: Supports Server-Side Rendering (SSR), Client-Side Rendering (CSR), and Prerendering (at build-time) to handle different parts of your application according to your needs.
• Build Optimizations: Leverages Vite to ensure only the minimal required code is loaded.
• Preloading: Ability to preload pages before a user even navigates to them.
• Offline Support: Integration with Service Workers.
• Image Optimization: Built-in tools for handling images efficiently.
• Fast Development: Uses Vite and the Svelte plugin to provide Hot Module Replacement (HMR), reflecting code changes in the browser instantly.

When writing library code, you must adhere to Node's ESM algorithm for relative imports:

• Explicit Extensions: All relative file imports must include the full filename and extension. For example, import { something } from './something/index.js'; is required (even if the file is actually index.js).
• TypeScript Caveat: When importing .ts files in a TypeScript project, you must use the .js extension in your import statements. This is a requirement of the TypeScript design.
• Recommended Config: To make this easier, set "moduleResolution": "NodeNext" in your tsconfig.json or jsconfig.json.

// Correct ESM import
import { something } from './something/index.js';