Developers / Express / Preview Drafts

Preview Drafts

This technology has no Slice Machine integration

This framework has no integration with Prismic's developer tool, Slice Machine. You can still build a Prismic website with this technology by using Prismic's Legacy Builder. However, if you're starting a new project with Prismic, we strongly recommend using a technology that integrates with Slice Machine: Next.js or Nuxt.

Previews allow you to see what drafted content will look like without publishing it. On this page, we'll show you how to set up previews in your Express project.

Add Previews configuration in your repo

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 or http://localhost:3000).
  • Preview Route: This is a route in your app that Prismic will use to build your website's URLs. In this guide, we will use the route /preview, but you can customize this.

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.

Add the Prismic Toolbar Script

In Settings > Previews, you will find a script like this:

Copy
<script async defer src="https://static.cdn.prismic.io/prismic.js?new=true&repo=your-repo-name"></script>
<!-- Update "your-repo-name" to match your repository -->

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.

Add Middleware

To enable previews add the client method enableAutoPreviewsFromReq() as a middleware. This will enable the Express server to fetch draft content during a Prismic preview session.

Copy
// Add a middleware function to enable Preview
const prismicAutoPreviewsMiddleware = (req, _res, next) => {
  client.enableAutoPreviewsFromReq(req)
  next()
}

app.use(prismicAutoPreviewsMiddleware)

Add a Preview route

This route should match the "Preview Route" option that you specified when configuring previews in Prismic. The standard practice is to call this route /preview.

resolvePreviewURL() determines the URL for a previewed document during an active preview session. This method will use the route resolver to determine the document's URL if it is present. The route resolver is described during the Install step.

Then, the /preview route redirects the user to the document's URL.

Copy
// Preview route
app.get('/preview', async (req, res) => {
  const redirectURL = await client.resolvePreviewURL({ defaultURL: '/' })
  res.redirect(302, redirectURL)
})

Make sure to have /preview route at the top of your routes, as routes are evaluated in order.

Preview a document

You can preview changes to documents after saving them by clicking on the eye icon in the top-right corner of the editor. Prismic will set a preview cookie in your browser, which will allow you to view draft content in your app.

← Previous

Deploy an App

Next →

Examples

Can't find what you're looking for?

Need technical Support? Spot an error in the documentation? Get in touch with us on our Community Forum.

Adjust cookie settings