I’ve been using the development version of SvelteKit for a while now on my last-surviving fansite, Forget-me-Not. SvelteKit 1.0 came out on 14th December, so I jumped at the chance to upgrade!
I had sometimes been upgrading the development versions along the way, so the last development version I used was 1.0.0-next.336. I think this made my upgrade process pretty smooth, however, I still had to change a few things.
Update the adapter
I needed to update the adapter I was using, adapter-netlify, from 1.0.0-next.58 to 1.0.0. Again, I had kept this relatively up-to-date as I tested out SvelteKit, but the jump to 1.0.0 felt good.
Update build scripts
I also needed to update my build scripts, as the newest version of SvelteKit doesn’t handle the build process itself, but instead relies on Vite to do this. In other words, the subcommands under svelte-kit no longer work, and they need to be replaced with vite.
The old build scripts I was using were changed from:
"dev:only": "svelte-kit dev",
"build:only": "svelte-kit build",
"preview": "svelte-kit preview",To:
"dev:only": "vite dev",
"build:only": "vite build",
"preview": "vite preview",Update page routes
I also needed to change my page route structure. Previously, under my routes directory, I had a list of .svelte files and sub-directories that represented my page structure exactly. The [page-name].svelte files would be transformed into /[page-name] routes, and I wouldn’t need to do anything else.
Version 1.0 introduces a +page.svelte component which helps define your page routes. I found that I needed to create a +page.svelte component for each page of my app, so rather than having a [page-name].svelte file, I needed to create a new sub-directory with the page-name, and then create a +page.svelte component inside that directory. You can learn more about routing in SvelteKit in the docs.
Update svelte.config.js file
Along with the update to use vite build scripts, the svelte.config.js file also needed to be updated to use @sveltejs/kit/vite. I needed to update the following in my svelte.config.js file:
import preprocess from 'svelte-preprocess';
preprocess: [
preprocess({
...Changed to:
import { vitePreprocess } from '@sveltejs/kit/vite';
preprocess: [
vitePreprocess({
...I also needed to completely remove the kit.vite key from this config file, which originally looked like this:
kit: {
vite: {
optimizeDeps: {
include: ['blurhash'],
exclude: ['sharp'],
},
ssr: {
external: ['sharp'],
noExternal: ['svelte-image'],
},
},
},And then I created a vite.config.js file that looked like this:
import { sveltekit } from '@sveltejs/kit/vite';
/** @type {import('vite').UserConfig} */
const config = {
plugins: [sveltekit()],
optimizeDeps: {
include: ['blurhash'],
exclude: ['sharp'],
},
ssr: {
external: ['sharp'],
noExternal: ['svelte-image'],
},
};
export default config;The kit.adapter key was kept in the svelte.config.js file, like this:
kit: {
adapter: adapter(),
},Changes to placeholder tags
I needed to change references to the %svelte placeholders to %sveltekit.
The contents in my app.html changed from this:
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="icon" href="%svelte.assets%/favicon.png" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
%svelte.head%
</head>
<body>
<div>%svelte.body%</div>
</body>
</html>To:
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="icon" href="%sveltekit.assets%/favicon.png" />
<meta name="viewport" content="width=device-width" />
%sveltekit.head%
</head>
<body data-sveltekit-preload-data="hover">
<div style="display: contents">%sveltekit.body%</div>
</body>
</html>And I think that just about covers everything I needed to update! You can view my project here, including all config files and file structure.
I hope this helps someone else upgrade to SvelteKit 1.0!
Leave a Reply