SvelteKit
SvelteKit is the official Web application framework for Svelte, offering file system-based routes, server-side rendering (SSR), static site generation (SSG) and other ready-to-use features to help developers build high-performance modern Web applications.
Note:
Currently, Makers supports SvelteKit version 2.4+, with version 2.4.0 being the minimum supported version.
Core Features
SvelteKit offers high-performance rendering capability, simplified development process, and flexible application architecture to build blogs, marketing landing pages, documentation websites, and other small and medium Web applications with relatively high performance requirements.
Seamless integration with Svelte: Leverages Svelte's compilation advantage to generate efficient vanilla JavaScript at build stage, with no virtual DOM, offering extremely high runtime performance and concise development experience.
Flexible rendering modes: Supports server-side rendering (SSR), pre-rendering (Prerender), and client-side rendering (CSR), with the ability to choose appropriate rendering strategies per page.
File system-based routing: Automatically generates routes based on conventional directory structure, supports dynamic routing and nested layouts, with no need to manually maintain additional routing configuration.
Uniform data loading mechanism: Uses a uniform
load function to perform data loading, supporting both server-side and client environments.Built-in enhanced capabilities: Provides capabilities such as form enhancement, streaming rendering, error handling, and application hooks, with gradual application extension based on needs.
Quick Start
To quickly deploy a SvelteKit project on EdgeOne Makers, you can use the following methods:
Import a SvelteKit project via Git repository
Select a SvelteKit template from the Makers template library for deployment.
To understand the deployment performance of SvelteKit on Makers, you can click the example template below:
Makers Support for SvelteKit
The following table lists the key SvelteKit features currently supported by Makers. The platform will support more features as soon as possible, but experimental features may not be fully stable yet.
SvelteKit Features | Support Status |
Server-Side Rendering (SSR) | ✓ |
Static Site Generation (SSG) | ✓ |
Prerender | ✓ |
Filesystem-based Router | ✓ |
Streaming With Promises | ✓ |
Form Actions | ✓ |
Hooks | ✓ |
Observability | Not supported. |
Deploying a SvelteKit Project on Makers
SvelteKit supports deployment to different platforms through its adapter system. An adapter is a plugin that converts build artifacts into the format required by the target platform. Makers provides the official adapter
@edgeone/sveltekit to generate deployment artifacts for Makers. When the adapter is used with the Makers scaffolding tool, you can quickly deploy SvelteKit projects to the Makers platform.To deploy a SvelteKit project on Makers, you can refer to the following operational steps.
1. Installing an Adapter
Install the adapter using npm.
npm install @edgeone/sveltekit
2. Configuring Svelte.Config.Js
Modify the configuration file
svelte.config.js, introduce and use the adapter @edgeone/sveltekit.import adapter from '@edgeone/sveltekit';import { vitePreprocess } from '@sveltejs/vite-plugin-svelte';/** @type {import('@sveltejs/kit').Config} */const config = {preprocess: vitePreprocess(),kit: {// use edgeone adapteradapter: adapter()}};export default config;
3. Deploying a Project
Git Connection Deployment
After seamless integration with the adapter, you can submit the project to platforms such as GitHub and GitLab and use our import git repository.
CLI Deployment
You can also install the Makers scaffolding tool. For detailed installation and usage instructions, see EdgeOne CLI. After configuration, use the
edgeone makers deploy command to deploy the project. During deployment, the CLI first automatically builds the project, then uploads and publishes the build artifacts.Note:
EdgeOne CLI version requirement ≥ 1.2.4. Please first check version before deployment to avoid deployment failure.
Server-Side Rendering (SSR)
By default, SvelteKit uses server-side rendering (SSR), generating HTML on the server and sending it to the client.
Configure rendering parameters in the following files to modify the default behavior:
+page.js / +page.server.js - page-level configuration.+layout.js / +layout.server.js - layout-level configuration.For example, set
ssr = false to switch to client-side rendering (CSR). The server will return a blank page framework, and the client-side JavaScript will complete the rendering.// +page.jsexport const ssr = false;
Pre-Rendering (Prerender)
SvelteKit supports enabling prerendering for specified pages, generating static HTML files during the build, while other pages remain dynamically rendered. If the entire application is suitable for prerendering, you can use the
@sveltejs/adapter-static adapter to build the entire site as a static website and deploy it to Makers.// +page.js/+page.server.jsexport const prerender = true;
Streaming Rendering
SvelteKit supports streaming rendering, allowing the server to send the webpage framework first and then gradually transmit data asynchronously to enhance the initial page load speed and user experience.
In the
load function, enable streaming rendering by returning a Promise object when loading data.// +page.server.jsexport const load = async () => {return {post: fetch('/api/post').then(r => r.json()),comments: fetch('/api/comments').then(r => r.json())};};
On the page, use
{#await} to process streaming data:// +page.svelte<script>let { data } = $props();</script>{#await data.post}<p>Loading...</p>{:then post}<h1>{post.title}</h1>{/await}
