Preview Drafts

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.

Add the Prismic Toolbar Script

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

<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.

// 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.

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

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.