SvelteKit- A New Svelte Framework to Supersede SapperJS
Embracing the Serverless Paradigm!
ByPayal Mittal
In the previous blog, we learned about SapperJS- a JavaScript framework built upon Svelte.js and inspired by Next.js- in detail.
For those who haven’t read it, it’s a prerequisite condition to do so as I’ve referred to it multiple times in this blog.
This blog is about SvelteKit- the successor of Sapper.js.
After working for years with Sapper, the Svelte team did some rethinking and decided to rewrite it. Later, they renamed it to SvelteKit.
The reason behind migrating to SvelteKit was that as Sapper was started in the year 2017, the team considered it old because the web had changed quite a lot over the years. Therefore they decided to rewrite it as per the modern web.
Most of the concepts are same as Sapper so we’re going to discuss what’s different here and the rest you can learn from the documentation-
Introducing SvelteKit
The official documentation defines SvelteKit as “An application framework powered by Svelte — build bigger apps with a smaller footprint.”
SvelteKit framework is used for building both small and large-scale web applications, all the while delivering an amazing user experience.
At first, SvelteKit was empowered by Snowpack but was later replaced by Vite.js due to its robust features like code-splitting and server-side rendering. It facilitates unbundled development like Snowpack and enables all the features that were earlier provided by Snowpack, such as instantaneous hot-module reloading, quick startup, and simple caching.
What’s more wonderful is that SvelteKit has built-in support for common plugins like Babel, Stylus, TypeScript, SASS, SCSS, etc. using svelte-preprocess package. It uses Rollup to make your app faster and leaner, as much as it can be.
It follows the same concept as Sapper as every page of the app is a Svelte component and each page is created by adding files to the src/routes directory. You can even migrate your existing Sapper app to SvelteKit.
How’s It Different from SapperJS?
I’m going to explain here some concepts to see what is different here from Sapper. Let’s get going then-
Adaptors
SvelteKit follows the serverless-first paradigm and can build serverless applications. For this purpose, it uses ‘adaptor’ to integrate with serverless platforms like Vercel, Begin, and Netlify.
To ensure that the platform runs smoothly and seamlessly with them, SvelteKit provides adaptor APIs for each platform.
Now, what exactly adaptors do?
An adaptor is a plugin that takes your app as input and generates output suitable for deployment on other platforms.
Officially, SvelteKit has the following adaptors in store-
- For Vercel: adapter-vercel
- For Netlify: adapter-netlify
- For Cloudflare Workers: adapter-cloudflare-workers
- To create a self-contained Node application: adapter-node
While Sapper needs a Node server, you can create a node app by using adaptor-node on SvelteKit.
Routing
Like Sapper, SvelteKit is also a filesystem-based router and the code structure is defined by the contents of the src/routes directory. It has two types of routes- Pages and Endpoints.
The page routing is the same as the Sapper but the endpoint routing is another name for server routing. Like server routes, endpoints are also modules written in .js or .ts files that return functions corresponding to HTTP requests.
Endpoints are server-side and can access fetch to receive data from external APIs. The function returns a response object in the form { status, headers, body } in response to the HTTP request.
SvelteKit also supports advanced routing like dynamic parameters. If you want to navigate to, let’s say, a user route that contains a user ID variable (and others as many as you want) and displays details about the user.
The route would look like this-
localhost:3000/user/[user id]
All you need to do is to create a folder named user and insert files for the dynamic parameters, in this case ‘[userID].svelte’. The box bracket indicates that the variable inside is a dynamic parameter. You can access the dynamic parameter in $app/stores package.
Layouts
Layouts are also used for routing! The layout component can wrap other components within itself in the form of <slot> tag for the page content. The <slot/> tag basically indicates where the child components are placed inside the parent layout component.
You need to create a _src/routes/_layout.svelte file and you can add as many slots you want for styles, markup, and behavior.
For instance, if we add a nav bar-
<!-- src/routes/__layout.svelte -->
<nav>
<a href=".">Home</a>
<a href="about">About</a>
<a href="settings">Settings</a>
</nav>
<slot></slot>
We can create separate pages for /, /about and /settings as given below-
<!-- src/routes/index.svelte -->
<h1>Home</h1>
<!-- src/routes/about.svelte -->
<h1>About</h1>
<!-- src/routes/settings.svelte -->
<h1>Settings</h1>
You will be able to navigate between the three pages, the nav will be visible for each page, and only <h1> will replace every time.
Loading
It is identical to the ‘Preloading’ feature in Sapper. Each page of the app can export a special function called load function that runs before the component is rendered and fetches data related to the page in onMount. If first runs on the server-side, followed by the client-side.
- It receives input in the form of { page, fetch, session, context } object.
- The value it returns is passed to the page as prop. If you return a Promise, SvelteKit does not render the page until it resolves.
The load function of the login page is also used to determine whether the user is authenticated or not and only navigates to the protected pages after successful authentication.
Other concepts like SSR and prerendering are the same as Sapper but some are not and I haven’t included them in this blog (it would have made the blog too lengthy), you can check them here.
Getting Started
Creating a SvelteKit app-
You can start building your app by running-
npm init svelte@next my-app
cd my-app
npm install
npm run dev
Production build-
npm run build
This creates an optimized production build into the .svelte/build folder and runs the specified adaptor.
npm run start
This command will start your application and run it as a node application if you’re using the node adaptor.
Bottom Line
As the team is still working on production, we can expect many more improvements and enhancements to the framework in the upcoming months. For starters, the team plans to add more adaptors to the kit.
Although SvelteKit is available in public beta, you might run into some issues and it would be difficult to find the solution. It’s a relief that the team is continuously releasing monthly posts where you can see what’s newly added to the framework and what was fixed or removed.
Thanks for stopping by and reading this blog! If you liked it, don’t forget to leave some claps.