Was this page helpful?

Netlify App

The Netlify App is connecting your Contentful space to a Netlify site. The app enables continuous deployment of content changes into a static site.

WARNING: Apps is an experimental alpha feature. We are heavily iterating on it based on your feedback. Apps might stop working or get removed without notice so it's recommended to not use apps in production.

Overview

The Netlify app provides the following functionality:

  • all users of a space can trigger a build of a Netlify site
  • transparent status of the build so editors don't preview outdated sites anymore

In more detail the app will:

  1. Authenticate with Netlify via OAuth
  2. Select a site from the Netlify account to build
  3. Create an incoming webhook / build hook to trigger the Netlify build
  4. Create an outgoing webhook to notify Contentful if the build changes status (e.g. success or fail)
  5. Create a new Content Preview item in Contentful which can trigger the build and open the site

Requirements

To use this app, you will need:

  • a website, which is
    • generated using a static site generator (e.g. Middleman, Gatsby, Hugo etc..)
    • pulling content from Contentful
    • pushed to a remote repository so Netlify can fetch the site's code when building
  • a Netlify setup, which means:
    • an account on Netlify
    • a site on Netlify which is connected to the repo we mentioned above (the site needs to be enabled for continuous deployment)

Usage

Step 1: Install and configure

A click on the "Connect account" button will start an OAuth handshake with Netlify:

Initialize the OAuth handshake

Where you need to authorize the app to act on your behalf in API interactions from Contentful to Netlify.

OAuth dialogue with Netlify

Step 2: Configure Netlify sites to build from Contentful

Use the dropdown to chose a site on Netlify you want to build. Usually it makes sense to have two sites to build production (using the Content Delivery API) and preview (using the Content Preview API) versions of your site. The screenshot shows:

  • a first site where we are building gatsby-netlify-contentful and we will use the label Production
  • a second site where we are building gatsby-netlify-contentful-preview and we will use the label Preview

Setup sites

Step 3: Use the Netlify Content Preview from the entry editor

The Netlify app is creating a custom widget for the content preview experience. The widget is showing

  • a Build button
    • showing the status of the build
    • who was triggering the last build and when
  • an Open Preview button
    • opens the url of your Netlify site
    • these routes can be further customized under Space Settings > Content Preview

Content preview

FAQ

What happens with the OAuth token the Contentful web app obtained during configuration of the Netlify app?

The token is only used during the configuration phase of the app and not made persistent. The token does not leave the browser of a user setting up the app! This is why you need to re-authenticate if you want to change the configuration of the app.

Who will be able to trigger Netlify builds with this app?

The installation and configuration of the Netlify app is only accessible to admins. However, the new content preview provided by the app is accessible to every user which has access to content.