# Contentful Previews

Using the Client JS SDK it is possible to set up your Nacelle project to enable Contentful previews.

That means you'll be able to preview published and unpublished content from Contentful running locally or on a hosted deployment (e.g. Vercel or Netlify).

This is possible with the Nacelle Contentful Preview Connector (opens new window).

# Setting up Environment Variables

First, let's get some things from Contentful that we'll need to add to our environment variables list. You can get them by cruising over to the Settings → API keys page in Contentful.

Once on the APIs page, we’ll 'Add API Key' to create a new token for Contentful’s Preview API. You can give the API Key a name like “Nacelle Content Preview” or similar. We’ll need the following values from that page:

  1. Space ID
  2. Content Preview API - access token

Now in your hosting provider's environment variable settings (see docs for Vercel (opens new window), Netlify (opens new window)), let’s add those values:

NACELLE_CMS_PREVIEW_SPACE_ID="<space ID>"
NACELLE_CMS_PREVIEW_TOKEN="<access token>"
NACELLE_PREVIEW_MODE=true

TIP

We also added NACELLE_PREVIEW_MODE=true. This flag turns on the previewing for this environment.

You can also add these environment variables in your local .env file to preview locally.

# Code Changes

Next, we'll need to make some changes to the project.

Following the steps outlined in the README for @nacelle/contentful-preview-connector (opens new window) will do the job.

# Configuring Contentful

At this point, you’ll have a working preview site!

But we can go one step further and configure Contentful to use the preview site directly from the content entry editor. This will allow content editors to quickly get to the correct page on the preview site to see their changes.

In Contentful, go to Settings → Content preview, then 'Add / Setup content preview'.

Under the “Name” field, you can use “Nacelle Content Preview” or similar.

Next in the Content preview URLs section, Contentful will want us to map URLs to specific types of content entries.

We'll need the base URL for our preview deployment. Let's say this is https://myshop-preview.foo.app.

# Article

Now, as long as article entries have a blogHandle (e.g. “news”), and a handle (e.g. "shop-talk"), it will be possible to set the preview URL to the following:

https://myshop-preview.foo.app/blogs/{entry.fields.blogHandle}/{entry.fields.handle}

# Page

https://myshop-preview.foo.app/pages/{entry.fields.handle}

With the exception of articles, just about everything lives in a Page, so being able to preview a page entry allows us to preview any arbitrary piece of content.

# Configuring Vercel (if your hosting provider is Vercel)

From your Vercel project navigate to Settings → Environment Variables and add those environement variables to the Preview tab:

NACELLE_CMS_PREVIEW_SPACE_ID="<space ID>"
NACELLE_CMS_PREVIEW_TOKEN="<access token>"
NACELLE_PREVIEW_MODE=true

And change the SSR configuration in nuxt.config.js to false

Visit the Nuxt docs for more details (opens new window)

::: Note Do not add those variables to the Production tab. :::