SvelteKit Framework Guide

Introduction

SvelteKit is a server-first framework for rapidly developing robust, performant web applications built on Svelte. It offers extreme flexibility, allowing you to configure and build your site using various rendering modes: Static Site Generation (SSG), Server-Side Rendering (SSR), or Client-Side Rendering (CSR). SvelteKit works great for content-focused sites, complex web apps, and any mix of the two. With a core focus on writing less boilerplate code and leveraging native Web standards, Svelte provides a straightforward and robust platform for bringing your projects to life without the overhead of a Virtual DOM. Check out their official documentation for more details.

Deploy Steps

To get started, you can run the following command to create a new SvelteKit project and the follow the steps in their installation guide:

$ npx sv create my-sveltekit-app

After you have created your application, cd into your project directory:

$ cd my-sveltekit-app

Push Initial Commits to Your Repository

To deploy your project to our Headless Platform, it will need to be available on a remote GitHub, Bitbucket or GitLab repository.

The SvelteKit installation will prompt you to initialize a local repository for the project. But those steps are as follows:

$ git init && git add -A && git commit -m "Initial commit"

Create a new remote repository, and then run the following commands to initialize and configure your local and remote repositories:

#Add remote repository
$ git remote add origin https://<your-git-provider>/<username>/<repo>

# Stage all changed files
$ git add -A

# Commit the files to the current branch
$ git commit -m "initial commit"

# Push changes to remote repository
$ git push -u origin main

Build Details

SvelteKit has two main rendering output modes, server or static, but using the prerender page option you can implement a hybrid rendering approach. Similarly you can disable SSR to build an SPA or you disable CSR for an MPA app experience.

First, add the @sveltejs/adapter-node adapter using the following command:

$ npm i -D @sveltejs/adapter-node

Next, you’ll need to configure SvelteKit to use the Node adapter in the svelte.config.js file:

import adapter from '@sveltejs/adapter-node';

export default {
  kit: {
    adapter: adapter(),
  },
};

To commit these changes to your repository, run the following commands:

# Stage all changed files
$ git add -A

# Commit the files to the current branch
$ git commit -m "add node adapter to SvelteKit config"

# Push changes to remote repository
$ git push -u origin main

Package Scripts

Now that we’ve added the @sveltejs/adapter-node adapter, we can add a start script to package.json. This ensures that our Headless Platform knows to start the project from the Node adapter we setup above.

{
  "scripts": {
    ...
    "start": "node build"
    ...
  }
}

Don’t forget to commit this part as well:

# Stage all changed files
$ git add -A

# Commit the files to the current branch
$ git commit -m "replace start script in package.json"

# Push changes to remote repository
$ git push -u origin main

Deploy Your Repository

Once your project is in a remote repository, you can follow the directions in our getting started guide to deploy your project to our Headless Platform.

Best Practices

With SvelteKit whether using the static adapter, SSR, or CSR pages, we recommend implementing WPGraphQL Smart Cache on your WordPress instance to improve server performance.

Was this page helpful?

👍 Yes | 👎 No