26 March 2023

How to migrate existing Svelte template project to SvelteKit

If you are working on an existing Svelte project created with Svelte template and want to migrate to SvelteKit, this blog post will show you how to do it in step by step instructions.

Previously I have added Tailwind CSS to my Svelte project and you can check it here

1. Install dependencies

To install required dependencies run the next command in the root directory of your project.

npm i -D @sveltejs/kit @sveltejs/adapter-auto vite

2. Edit package.json

Make sure that the type property is set to module.

// package.json

{
    "type": "module"
}

Use vite in you scripts to build and run the project

// package.json

{
    "scripts": {
        "dev": "vite dev",
        "build": "vite build",
        "preview": "vite preview"
    }
}

3. Create svelte.config.js

Create a svelte.config.js file in the root directory of your project:

// svelte.config.js

import adapter from "@sveltejs/adapter-auto";

/** @type { import("sveltejs/kit").Config } */
const config = {
    kit: {
        adapter: adapter(),
    },
};

export default config;

More about svelte configuration

4. Create vite.config.js

Create a vite.config.js file in the root directory of your project:

// vite.config.js

import { sveltekit } from "@sveltejs/kit/vite";
import { defineConfig } from "vite";

export default defineConfig({
    plugins: [sveltekit()],
});

More about vite configuration

5. Create app.html

Create an app.html file in the ./src directory. This is the new entry point for your application, copy required contents from ./public/index.html to ./src/app.html.

<!DOCTYPE html>
<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>

6. Create routes directory

Create routes directory in ./src. SvelteKit uses filesystem-based router.

mkdir routes

More about routing

8. Create app page

Create a +layout.js file inside of src/routes to turn off server side rendering.

// src/routes/+layout.js

export const ssr = false;

Create [...catchall] directory inside of ./src/routes/ directory.

mkdir \[...catchall\]

Create +page.svelte inside of src/routes/[...catchall] directory and import App.svelte into it, this file defines a page of your app.

// src/routes/[...catchall]/+page.svelte

<script>
    import App from "../App.svelte";
</script>

<App />

Start server

The app should be ready to be run. Start the server with:

npm run dev

Setting up tailwind

Setup Tailwind CSS if it is used in the project, otherwise skip the step.

Make sure that config file ends with .cjs and not with .js

mv tailwind.config.js tailwind.config.cjs

Edit svelte.config.js to use svelte-preprocess or vitePreprocess. svelte-preprocess has some additional functionality compared to vitePreprocess, but vitePreprocess can be faster.

// svelte.config.js

import preprocess from "svelte-preprocess";
import tailwindcss from "tailwindcss";
import autoprefixer from "autoprefixer";

const config = {
    ...
    preprocess: preprocess({
        postcss: {
            plugins: [
                tailwindcss,
                autoprefixer
            ]
        }
    })
}

Next steps

As SvelteKit uses filesystem-based router, one of next steps should refactoring of the application into into this system.

Conclusion

It can take take a lot of effort to refactor Svelte project to use SvelteKit, but benefits of SveltKit worth it.

If you enjoyed the content, consider supporting the blog.

Donate