Deploy

Here, we'll look at deploying Svelte apps with two popular Jamstack hosting providers: Netlify and Vercel.

Before you proceed

First, you'll need a project with SvelteKit and Prismic. If you don't have one yet, start with the Install step.

Connect to GitHub

On GitHub, create a new repository for your project, if you don't have one already. Push your latest changes to your GitHub repository.

Deploy SvelteKit with Netlify

Use the Netlify adapter

First, install the @sveltejs/adapter-netlify adapter with the following command:

Copy
npm install -dev @sveltejs/adapter-netlify@next

Now open the svelte.config.js file of your SvelteKit project and add the adapter in the kit config:

Copy
 import netlify from '@sveltejs/adapter-netlify'

  /** @type {import('@sveltejs/kit').Config} */
  const config = {
    kit: {
      // hydrate the <div id="svelte"> element in src/app.html
      target: '#svelte',
     adapter: netlify()
    }
  }

  export default config

Create a netlify.toml file

At the root of your project, create a netlify.toml file and add the following config for Netlify:

Copy
[build]
  command = "npm run build"
  publish = "build/"
  functions = "functions/"

Connect to Netlify

Make a Netlify account or log in, then click New site from Git.

Under the connect to git provider tab, click the GitHub button. If you haven't done so already, give Netlify access to your GitHub repositories. Then find your project repository and select it.

You don't have to change any settings on the settings page. Click deploy. It will take a moment for your site to build.

Wait for it to build, and after about a minute, you should have a SvelteKit app on Netlify! 🎉

Rebuild a static site with webhooks in Netlify

If your site has static pages, you will need to trigger a rebuild when something changes in Prismic.

In Netlify, go to Site Settings > Build & deploy and scroll down to Build hooks. Click Add build hook, and give your build hook a name (like "Prismic"). Copy the URL.

In your Prismic repository, go to Settings > Webhooks, and create a new webhook. Give your webhook a name (like "Netlify") and paste in the URL you just copied from Netlify. You can leave the secret empty.

Now, when you make changes to your content in Prismic, they will be reflected on your site.

Learn more about how to use webhooks.

Deploy SvelteKit with Vercel

Use the Vercel adapter

First, install the @sveltejs/adapter-vercel adapter with the following command:

Copy
npm install -dev @sveltejs/adapter-vercel@next

Now open the svelte.config.js file of your SvelteKit project and add the adapter in the kit config:

Copy
  /** @type {import('@sveltejs/kit').Config} */

 import vercel from '@sveltejs/adapter-vercel'

  const config = {
    kit: {
       // hydrate the <div id="svelte"> element in src/app.html
      target: '#svelte',
     adapter: vercel()
    }
  }

 export default config

Connect to Vercel

Log in to Vercel or create an account, and click New Project to create a new site.

Continue with Import git repository. Select your GitHub repository. If necessary, adjust your GitHub app settings to allow Vercel access to the repository.

You don't have to change any settings on the settings page. Click deploy. It will take a moment for your site to build. 🎉 Now your site is online!

Rebuild a static site with webhooks in Vercel

If your site has static pages, you will need to trigger a rebuild when something changes in Prismic.

In Vercel, go to Settings > Git and scroll down to Deploy hooks. Under Create Hook, enter a name (like "Prismic") and the GitHub branch of your project (likely "main" or "master"), and click Create Hook. Copy the URL.

In your Prismic repository, go to Settings > Webhooks, and create a new webhook. Give your webhook a name (like "Vercel") and paste in the URL you just copied from Vercel. You can leave the secret empty.

Now, when you make changes to your content in Prismic, they will be reflected on your site.

Learn more about how to use webhooks.

Deploy a plain Svelte project

You don't need to use an adapter to deploy a plain Svelte project to Netlify or Vercel. Skip the "add an adapter" step, and follow the instructions for connecting to the hosting provider. Manually enter the build folder (public) on the settings page.


Was this article helpful?
Not really
Yes, Thanks

Can't find what you're looking for? Spot an error in the documentation? Get in touch with us on our Community Forum or using the feedback form above.