---
title: SvelteKit Framework Guide
description: In this guide, you will learn how to deploy a SvelteKit site on the WP Engine Headless Platform.
url: https://developers.wpengine.com/docs/headless-platform/framework-guides/sveltekit/
image: https://developers.wpengine.com/og/docs/headless-platform/framework-guides/sveltekit.png
---

# SvelteKit Framework Guide

## Introduction

SvelteKit is a server-first framework for rapidly developing robust, performant web applications built on [Svelte](https://svelte.dev/docs/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](https://svelte.dev/docs/kit/introduction) 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](https://svelte.dev/docs/kit/creating-a-project):

Terminal window

```bash
$ npx sv create my-sveltekit-app
```

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

Terminal window

```bash
$ 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:

Terminal window

```bash
$ 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:

Terminal window

```bash
#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](https://svelte.dev/docs/kit/page-options) 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:

Terminal window

```bash
$ npm i -D @sveltejs/adapter-node
```

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

```js
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:

Terminal window

```bash
# 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

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

Don’t forget to commit this part as well:

Terminal window

```bash
# 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](https://developers.wpengine.com/docs/headless-platform/getting-started/deploy-from-existing-repo/) 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](https://developers.wpengine.com/docs/headless-platform/platform-guides/smart-cache-optimization) on your WordPress instance to improve server performance.

## Was this helpful?

Thanks for the feedback!

```json
{"@context":"https://schema.org","@graph":[{"@type":"WebSite","@id":"https://developers.wpengine.com/#website","name":"WP Engine Product Documentation","url":"https://developers.wpengine.com/","description":"Resources for developing, deploying, and scaling on WP Engine.","inLanguage":"en-US","keywords":["API documentation","product documentation","headless WordPress","managed WordPress hosting"],"publisher":{"@id":"https://wpengine.com/#organization"}}]}
```