Preview Drafts
Previews are not yet officially supported in SvelteKit
Previews are in active development for SvelteKit. For now, this documentation works, but it is not compatible with prerendering. To use previews, your app must use server-side rendering.
In your repository, navigate to Settings > Previews. Under "Create a New Preview," enter:
- Site Name: A display name for the preview environment (such as "Development" or "Production")
- Domain URL: The domain of your site (such as
https://your-site.com
orhttp://localhost:3000
) - Preview Route:
/preview
, the route that your app will use to launch preview sessions
Note that you can add multiple previews in your repository settings. For instance, you can have one preview for your website on localhost and another for your production website.
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.
<script async defer src="https://static.cdn.prismic.io/prismic.js?new=true&repo=your-repo-name"></script>
The repo=your-repo-name
URL parameter should include your repository name.
Include this script in your website header. To ensure that previews and shareable preview links work properly, you must include this script on every page of your website, including 404 pages. In SvelteKit, you can add this script before the closing <head>
tag in src/routes/app.html
. In plain Svelte, you can add it in App.svelte
between <svelte:head>
tags.
When you create the preview in your Prismic settings, set the Preview Route to /preview
.
Install the cookie
package from npm:
npm install --save-dev cookie
In your app, create a route called preview/+server.js
(you can change the route, but you must also change the Preview Route setting in your Prismic repository to match), and paste in this code:
import * as prismic from '@prismicio/client'
import * as cookie from 'cookie'
import createClient from '$lib/prismicio'
export async function GET({ url, fetch, request }) {
const client = createClient({ fetch, request })
const previewToken = url.searchParams.get('token')
const previewURL = await client.resolvePreviewURL({ defaultURL: '/' })
const headers = new Headers({
'Set-Cookie': cookie.serialize(prismic.cookie.preview, previewToken, {
path: '/',
}),
location: previewURL,
})
const response = new Response(null, {
status: 307,
headers,
})
return response
}
Was this article helpful?
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.