Using SvelteKit 1.0 on Vercel

This post is historical. Product names and runtime guidance may have changed. For new projects, use with the Node.js runtime and . Use for request-time routing before a response completes.Note:Vercel FunctionsFluid computeRouting Middleware

is a new framework for building web applications that is gaining popularity among developers for its simplicity and performance. Built on top of Svelte (like Next.js for React), SvelteKit simplifies creating and deploying web applications. Server-side rendering, routing, code-splitting, and adapters for different serverless platforms are just a few of its out-of-the-box features.SvelteKit

or continue reading to learn about the improvements to the framework in the past year and the benefits of deploying SvelteKit projects on Vercel. Deploying SvelteKit 1.0 today

SvelteKit is built around the Svelte framework, a modern JavaScript compiler that allows developers to write efficient and lightweight code. Instead of using runtime frameworks to stack user interfaces on top of the DOM, Svelte compiles components at build time down to a native JavaScript bundle. This results in fast web apps with small bundle sizes.

SvelteKit solves many common issues faced by web developers by providing an intuitive experience that takes care of tedious configuration and boilerplate code. Additionally, instead of retrieving the entire application on initial load, SvelteKit makes it easy to split your code into reusable chunks that can be quickly loaded on demand, allowing for snappy user and developer experiences alike.

SvelteKit extends Svelte by adding:

SvelteKit is great for building applications of all sizes, with a fluid developer experience to match. It doesn't compromise on SEO, progressive enhancement, or the initial load experience, but unlike traditional server-rendered apps, navigation is instantaneous. SvelteKit comes with an abundance of out-of-the-box features, making it the recommended way to build Svelte applications. Let’s take a look:

SvelteKit includes a directory-based router that updates the page contents after intercepting navigations. This means that the folder structure of the  folder is going to be the route structure of our application. So for example, creates the root route, and creates a an route. To learn more about routing in SvelteKit, checkout Vercel’s course./src/routes/src/routes/+page.svelte/src/routes/about/+page.svelte/aboutBeginner SvelteKit

If you need an element displayed on multiple pages of an application, such as a header or a footer, you can use layouts. To create layouts in SvelteKit, add a file called in the folder. You can add whatever markup, styles, and behavior you want to this file, and it will be applied to all pages in the app. You can even make nested and grouped layouts to target only specific routes.+layout.svelte/routes

SvelteKit has a unique way of loading page data using the function. All files can have a sibling file that exports a function. The returned value of this is available to the page via the prop. The load function runs on both the client and server, but you can add the extension to make it run on the server only.load+page.svelte+page.jsloaddata+page.server.js

All files can also have a sibling file that loads data using the function. In addition to the layout it ‘belongs’ to, data returned from layout  functions is also available to all child and files.+layout.svelte+layout.jsloadload+layout+page

As well as pages, you can define routes with a  file (also referred to as an 'API route' or an 'endpoint'), which gives you full control over the response. These files export functions corresponding to HTTP verbs that that take a  argument and return a  object.+server.jsRequest EventResponse

An adapter is a plugin that takes your app as input during build and generates output suitable for deployment on a specific platform. By default, projects are configured to use , which detects your production environment and automatically selects the appropriate adapter for you.@sveltejs/adapter-auto

To learn more about SvelteKit's features in depth, check out Vercel's free course.Beginner SvelteKit

As the Svelte team, including the core team members at Vercel, have worked hard to prepare for the stable SvelteKit 1.0 release, some necessary breaking changes had to be made. If you’ve used SvelteKit in the past, it may look quite different today. Let’s go over the most notable changes made to SvelteKit in the last year.

Changing SvelteKit’s file-based routing is by far one of the biggest updates made to SvelteKit. Previously, any file added to the directory would automatically create a route at that name. For example, creating the page would automatically create a page at , and would create our root page. Now, all routes are directory based and the old has been replaced by . This new convention ensures that you are deliberately creating a route, and eliminates the need of underscores in order to colocate files. With this new convention, the page at the route will be and our root page will be .routesroutes/about.svelte/aboutroutes/index.svelteindex.svelte+page.svelte/aboutroutes/about/+page.svelteroutes/+page.svelte

Old File-based routing

New Directory-based routing

Learn more about .SvelteKit's routing

With the new routing changes came major changes to the layouts system as well. Instead of naming our layout files we now name them similar to our pages. Previously, we could have multiple layouts in a single directory using named layouts, such as , which we have since said goodbye to 👋.__layout.svelte+layout.svelteindex@about.svelte

In addition to the changes, a new grouped layouts convention was added. This allows us to share layouts within group directories, which are folders wrapped in parentheses. Group directories do not affect the pathname of nested routes, but acts as a root route for layouts. To learn more about SvelteKit’s layouts checkout the Beginner SvelteKit course .here

Old layouts system

New layouts system

Learn more about .SvelteKit's layouts

Previously, the function would be called in a page component’s script block, and the returned data would become available to the page as a prop. A page calling the load function would look something like this:loadcontext="module"

Now, SvelteKit has completely gotten rid of the , and the function has moved into the endpoint file. Our can automatically load the data from a route by exporting the strongly-typed prop. Just like before, the function runs on both the client and server. If you only want it to run on the server, you can add the extension (). Loading data into a page the new way looks like this:context="module"load+page.svelte+page.jsdataload.server+page.server.js

To learn more about .SvelteKit's data fetching

Previously, to create an endpoint, you would add a  (or  ) file somewhere into , and include the data type it was meant to return as part of the name of that file. For example: if you wanted to return some data as JSON at the path , you could simply add an file into your routes folder like this:.js.tssrc/routes/api/about.jsonabout.json.js

Now, instead of adding server routes directly in the routes directory, we instead add them in the directory. The new way of creating an endpoint is more similar to creating a page. Instead of simply adding the file within this directory, we add a file within an about like this:/routes/apiabout.json.js+server.jsfolder

In addition to this change, server routes must now return a proper . Thankfully, SvelteKit has a  function available that will do this for us by simply importing it, then wrapping whatever data we return in that function call. Lastly, the HTTP verb functions accepted by a server route must now be capitalized.Response objectjson

Migrating an old project? Checkout the .Migration Guide

Vercel is a cloud platform for deploying and hosting web applications. Using creates a dream stack, offering several improvements:Vercel in conjunction with SvelteKit

Overall, Vercel can provide a number of benefits when used with SvelteKit, making it easier to deploy, host, and manage your SvelteKit app. Whether you're a small team building a simple web app or a large organization with complex, mission-critical applications, Vercel can help you get the most out of your SvelteKit app.

One of the key reasons for SvelteKit’s growing popularity is the inclusive community that has formed around it. Svelte Society, the community-run Svelte network, has become the home of all things related to Svelte and SvelteKit.

This community encourages participation from developers of all skill levels, and there are plenty of opportunities for beginners to get involved and learn from more experienced members. In addition to Svelte Society, there is also a network for women and non-binary people interested in Svelte called . These communities are all active on and social media, and there are regular events where SvelteKit developers can connect with each other. Svelte Sirensforums

But the SvelteKit ecosystem is more than just documentation and a supportive community. There are also many tools and resources available to use while building SvelteKit applications. These include templates, starter kits, and other helpful resources that can make it even easier to get started with SvelteKit. Here are some of our favorites:

The SvelteKit ecosystem is constantly growing and evolving. We’ve already got some awesome companies using SvelteKit on Vercel to do some amazing things! Check some of them out:

Get started with SvelteKit on Vercel by in seconds, or begin learning with Vercel’s free !deploying one of our SvelteKit templatesBeginner SvelteKit course

Read more

What is SvelteKit?

SvelteKit Features

What’s changed in the past 12 months

New Directory-based Routing

New Layouts System

Loading Data

Server routes (Endpoints)

SvelteKit on Vercel

Community

Get started with SvelteKit 1.0

• Server-side rendering (SSR), which can improve the performance and SEO of your application

• Easy generation of static sites, which can be useful for blogs, marketing sites, and other types of content-heavy websites

• TypeScript support

• Hot Module Replacement, allowing you to update your application in real-time without losing state or refreshing the page

• **Directory-based Router: **

• **Layouts: **

• **The function: **load

• **Layout Data: **

• **Endpoints: **

• **Adapters: **

• Vercel provides a zero-configuration platform for deploying and hosting SvelteKit apps, making it easy to get your app up and running quickly.

• Vercel recently launched , which allow you to run JavaScript code on their globally-distributed edge network. SvelteKit supports Vercel Edge Functions, meaning you can serve your users dynamically-rendered pages at the same speed you would serve static files from a CDN, drastically improving the performance and scalability of your SvelteKit app.Edge Functions

• Vercel offers Vercel Analytics in the dashboard to help you understand the performance of your application based on real visitor data. With the Vercel Analytics API, you can now use Vercel Analytics with SvelteKit.

• Vercel provides built-in support for server-side rendering (SSR) and static site generation (SSG), which can improve the performance and SEO of your SvelteKit app.

• Vercel offers seamless integrations with popular development tools and services, such as GitHub, GitLab, and Visual Studio Code, making it easy to integrate your SvelteKit app into your existing workflow.

• Vercel provides a powerful, intuitive interface for managing and monitoring your SvelteKit app, allowing you to see how your app is performing and make updates and changes as needed.

• PocketBase

• Tailwind CSS

• Storybook

• Imagetools

• The Pudding

• Evidence

• Raster

• Monogram

• Gitbook

• Fieuzal

• Senja

• Files