My favorite framework for front end development is Svelte, and its full stack counterpart SvelteKit has a cool feature called adapters. Adapters make it incredibly easy to deploy an app to different targets, this is a walkthrough of setting up three adapters I've actually used to deploy Svelte code as a static site, side panel Chrome extension, and node server.

Prerequisites

- You need the latest version of node

- You need an understanding of how to use SvelteKit

- Optional: I created an example repository with all three examples, benjaminknox/sveltekit-adapters-in-practice

The Static Site Adapter

The first adapter we will look at is the static site adapter. This will take the code we write in SvelteKit and build it into a static site that can be run by opening "index.html" in the browser. The first step is to create a new app with SvelteKit (I named mine "static-site"), when prompted select the SvelteKit minimal site template:

We need to install the static adapter because it doesn't come by default. Let's open a terminal in our SvelteKit app's directory and install the static adapter npm package:

Because the static site won't have a backend, we should set the root layout so it renders to html. We can do this by creating a file at the path "src/routes/+layout.server.ts" and putting this in the first line of the file:

Before building we need to update "svelte.config.js" so that it uses the static site adapter, we update the file so it looks like this:

Everything is in place for our static site and we can build:

There should be a file called "build/index.html" that we can open in our browser to see the default page. I've put the result of the steps above here in git: benjaminknox/sveltekit-adapters-in-practice/static-site.

The Chrome Extension Adapter

The chrome extension adapter is a bit more involved from set up but really cool! Let's create a new SvelteKit app using the minimal site template:

Again, we need to install the correct adapter for the chrome extension, in this case we will use the package built by the repository in github named michmich112/sveltekit-adapter-chrome-extension:

Like the static site, server routes won't be deployed in our Chrome extension (generally we will call an API hosted on our server somewhere from the front end via HTTP for both), so we should set the root layout so it renders everything to html:

In order for the chrome extension to work we need to create a manifest.json file, we can think of this as a configuration file for our extension and here is some documentation from google about it. What we will do is configure manifest.json so it creates a side panel that opens the base route html page, create a file at "static/manifest.json" and paste this into the file:

On line 7 in this file there is a reference to "service-worker.js", this file is not provided by SvelteKit by default. We can use this file to open the side panel when we click on the extension in the toolbar, so let's create a file at the path "src/service-worker.js" and add these lines:

SvelteKit will automatically move this file into our build directory, here is some documentation on that file. Before we build the chrome extension, we need to update the "svelte.config.js" like last time but with one difference. The default build bundles all of the scripts to a sub-directory of "build" called "_app" and the problem is Chrome extensions reserve paths that start with "_". So we have to change the path to something different, we will do "app" instead. Update "svelte.config.js" to match this:

Now we can build:

This will build the extension so it can be loaded into our browser as an unpacked extension. Just select the build directory!

The Node Adapter

This is the adapter that I've used the most, it is easily extensible. This website uses the node adapter, but I wrapped it in an express server for production (you can see that here benjaminknox/ben-knox-dot-com/server.js), but that's a separate topic. The node adapter bundles code so it can be run directly by node, which is what we will do here. Let's create a new project called "node-server" with the minimal template:

Like the previous examples, we need to install our adapter:

Again we need to make a one line change in "svelte.config.js" so we are using the node adapter:

This one is the simplest to set up because the server can handle the backend routes, so with those few changes, we can build:

This will have created a "build/index.js" file that we can use to run the app directly with node:

And now we should see the address our app is listening for requests on, in my case it is "0.0.0.0:3000" which means it can also be visited by going to "localhost:3000" in the browser.

Conclusion

And that's how we can build the same SvelteKit app so it targets three different deployments! We looked at deploying to a static html based site, bundling that exact same site so it runs as a chrome side panel, and finally how to deploy it also as a node server over HTTP! This is one of the reasons I love SvelteKit. Happy coding! 🧑‍💻