SvelteKit Framework Guide

Introduction

SvelteKit is a sever-first framework for rapidly developing robust, performant web apps using Svelte. You can configure and build your site to be SSG, SSR, or CSR. SvelteKit works great for content focussed sites, web apps, and any mix of the two. With a fucus on writing less code and using the Web standards Svelte provides a straighforward and robust platfrom of bringing your projects to life without the overhead of a Virtual DOM. Check out their docs 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 initalize 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 dsiable 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()
	}
};

Note:: While it is possible to use the @sveltejs/adapter-static adapter, it is not recommended for use with the WP Engine Headless Platform. The Node adapter is the best choice for deploying to our platform. If you want to use the static adapter, you will need to provide a custom server to handle the requests.

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.

// package.json
{
  "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