Jamstack Explorers

Building with SvelteKit and GraphCMS with Scott Spence

SvelteKit static build and deployments

Okey dokey. In this mission, we're going to take a look at deploying the build output, for the skeleton SvelteKit project we scaffolded out in the previous mission. Before we can deploy your SvelteKit project, you need to adapt it for your development target. SvelteKit adapters are plugins that take the built project as input and generate output for deployment. SvelteKit adapters are optimised for specific hosting providers, some adapters like adapter static build output that can be hosted on numerous hosting providers. And that's what we're going to look at now. There's also a variety of other adapters available for Cloudflare, workers Netlify Vercel.

For now, we're just going to take a look at static. And once we get towards the end of the mission, we're going to be using adapter Netlify. Now if I just go over to my terminal, I'm going to instal the package as a dev dependency. And it's important to use that @next flag on these until SvelteKit is out of public beta. So now that's installed, I can go and configure it in the project. Hop on over to our project here, check out the package Json. This is a new adapter dev dependency, I need to configure that in Svelte config here. So if I have in kit adapter, and that will be adapter as a function and we need to import it up here.

You see my IntelliSense prompted me for that. Hit Save. Go over to the terminal run NPM build,

we can see that has transformed the project for us. Going back over to the projects, we have a build folder. Now if I go over to my Netlify account, just take this out of full screen here. And in my Netlify account, if I go to sites, you have an option here to if you want to deploy a new site without connecting git, you can drag and drop the output here. So I'm going to open up my explorer

and I'm going to take the build file. Drag and drop that into here.

And if we scroll down, we can see that it's already been published. If I go to preview deploy, have the project here. Okay, that's it for this one. In the next mission, we'll be taking a look at creating pages and content. See you then, bye


your progress