Adapters

AdaptersView the code for this module.

SvelteKit

Deploy our SvelteKit template, or view a live example.

DeployLive Example

Before we can deploy our project, we have to adapt it based on where we want to host it. Svelte's solution to becoming serverless-first in a world with many serverless platforms is through the use of adapters. While these serverless providers such as Vercel and Netlify offer similar functionality, they each have their own vendor-specific implementation. In order to ensure that Svelte runs smoothly with each of them, Svelte provides us with adapters. These adaptors are plugins that take your app as input during build and generates an output suitable for deployment on a specific platform.

If we take a look at SvelteKit's documentation on adapters, we see it provides adapters for Vercel, Netlify, Cloudflare pages, as well as two non-service based adapters: adapter-static and adapter-node. Depending on where you are hosting your app, you must import the appropriate adapter. For instance, if you were to host your app using Vercel, which we're going to do in a bit, you would first need to install the vercel-adapter. Recently, however, a new adaptor was created, adapter-auto. This is the default adapter, so anytime you create a new SvelteKit project this adapter will already be installed, and makes deploying SvelteKit apps feel like magic.

If we move into our svelte.config.js file, we will see that we are importing adapter-auto and using it in this project. There's no additional work needed on our end. We do not need to install any adapters ourselves, and with adapter-auto this app can already be hosted on Vercel, as well as other platforms. Now, if you're familiar with SvelteKit you're probably wondering, "Hey, Don't we need to install the vercel-adapter?" A few months ago this would have been true. You would have needed to use the vercel-adapter in your svelte.config.js file before deploying it. Now we have the adapter-auto, this step is unnecessary. When we deploy this to Vercel, the adapter will automatically choose the appropriate adapter for the current environment. In our case, when we deploy to Vercel, it will detect that we are using Vercel and it will add the vercel-adapter for us! The vercel-adapter will then create a Vercel app, using a function for dynamic server rendering.

Let's go ahead and test this out by deploying it to Vercel. First, I'm going to create a new repo on GitHub for this project and commit the code to it.

Now if we head to vercel.com we can deploy this instantly. In our Vercel dashboard we can click this button that says "deploy now", and you'll notice that our new repo is now available for deployment. We will import that repo and then click 'deploy'! Now our adapter-auto is detecting that we are using Vercel and adding the vercel-adapter for us. From here, Vercel is doing all of the configuration behind the scenes, and just like that the app is deployed! You can click on it to check it out. This app is no longer running locally on the computer. Anyone can come visit it now! When deploying a SvelteKit app to Vercel using the default adapter-auto, it is important to note that not all platforms are supported by adapter-auto.

In the case that you encounter a platform that is not supported by adapter auto, you may need to add that platforms adapter yourself, or you may need to use one of the non-service based adapters. Let's learn how to add the adapter-node to our project. To do this install by running the command npm i -D @sveltejs/adapter-node. Then we will swap our adapter-auto for adapter-node in our svelte.config.js file. Now that we have the adapter-node installed, when we build our app it will generate a self-contained Node app inside the build directory. Let's go ahead and run the command npm run build in our terminal and look at what adapter-node generates.

Up at the top of our project directory we have this .svelte-kit folder which contains our svelte code input. Depending on what adapter we use, this code will be used as the input to generate an output in our build folder. If we open the build folder up, we can see our compiled code. Notice there is no trace of Svelte. In this case, we are using the adapter-node, so the output will be a straight up Node.js app which can be hosted anywhere that hosts node.js. Within the build folder we see we have an index.js file, which is our main node server. Since this is just a node application, we are able to run it in production by running the command node build/index.js. Now, if we check this out in the browser we can see a production build of our site running in node!

Continue learning SvelteKit on Vercel: