Content preview

Contentful makes few assumptions about where and how your content is published: since entries are stored in a structured way, encoded in JSON format, building a wrapper around your content for a new platform is quick and straightforward. The only downside to this approach is that editorial teams wishing to preview work in progress, have to rely on custom workarounds for integrating a content preview into Contentful.

To take the friction out of this process, we have enabled space admins to add default preview environments to spaces. This feature makes it possible to add a single or multiple environments, preview draft and published entries, and select which content types can be previewed. The guide below describes three distinct approaches to setting up content previews.

Preview content in the Discovery app

The simplest way to add a preview to your space is to select one of the default templates in the example space. This would automatically configure your space to work with the Discovery web app, written in React.js framework.

Preview content in your online environment

This scenario assumes that you have an online version of your website or an app, built by the development team so that editors could preview created entries before they go live. To get started, navigate to the Settings tab and click on the Content preview item. Add a new environment by filling out the required fields.

The form for adding a preview will automatically list all the content types found in your space. However, it is important to remember that since spaces often contain content types with partial information - for example, opening hours or call-to-action messaging intended to be reused across multiple entries - you should enable preview only for the content types that were designed to be public entries.

Typically, a preview URL consists of the base path (e.g. https://myapp.com/entities/) and placeholder tokens that are resolved into actual values when a user clicks on the preview link. The token can be a simple {entry.sys.id} that would resolve to a 4BqrajvA8E6qwgkieoqmqO in the link or any of the entry fields, for example, {entry.fields.slug} would resolve into soso-wall-clock.

The type of a token you want to include in the preview URL depends on how your app templates are setup to work and the purpose of the preview environment. There is, however, an obvious caveat - a specified field has to exist within the space and be a string or an integer. We also recommend using a validation for detecting unsafe characters (e.g. space, #, %, "") in the field, to avoid the broken links.

Important: for security reasons, you should never include an access token in the preview URL. Instead, implement the authentication process in your client app.

Preview in a local environment

Under this scenario, we will assume that you want to preview content locally, while the public app is undergoing development. To keep the guide simple, we shall use the Product catalogue app, built in plain Javascript and available under Contentful Github repo, as our client app.

Begin by creating a new space with the product catalogue template. The reason for that is the demo app expects the space to contain brand, category and product content types with specific fields. Alternatively, you can manually setup these entry types within your existing space or alter the client code to work with the existing content model.

Now, clone the product-catalogue-js repo to your computer:

$ git clone https://github.com/contentful/product-catalogue-js.git

Open the app.js file and replace the access token and space id with the credentials from your space:

PC.init = function () {
  // Initializes the Contentful client with the required credentials for a
  // product catalog space. Feel free to replace them with our own.
  PC.contentfulClient = contentful.createClient({
    accessToken: 'abcd1234abcd1234abcd1234abcd1234abcd1234abcd1234abcd1234abcd1234abc', // replace the access token
    space: 'klmno09876klmno' // replace the space ID
  })

Please note that you are free to setup the client app to use either delivery or preview access tokens - in the former case the preview will show only published entries, while in the latter you will see published and draft entries.

Now start a local HTTP server. On the Mac OS X, navigate to the project folder and run (for more options, check the Readme file):

python server.py

Once the local server is running, the app can be accessed via the link http://localhost:8000 in your browser.

It's now time to add the preview links to the space settings:

• Products - http://localhost:8000/product/{entry.fields.slug}

• Brands - http://localhost:8000/brand/{entry.sys.id}

• Category - http://localhost:8000/category/{entry.sys.id}

Save the preview settings and navigate to the entry. In the dropdown under the Preview button, you will now see the link to the Product catalogue app running locally.

Final notes

Now that you are familiar with setting up a preview, why not explore the types of apps you can build? The ecosystem page lists all the official integrations and demo apps we have built to date.