Migrate to Preview Service

The Preview Service enhances performance by offering faster load times and improved efficiency compared to the Content Management API (CMA). This guide walks you through the migration process from the CMA to the Preview Service.

• Access to a Contentstack stack with Live Preview enabled
• Preview token (instead of a management token)
• Your project currently relies on the CMA for Live Preview

Follow the steps below to migrate from the CMA to the Preview Service.

If your application uses a Contentstack Delivery SDK, migration is simple. You only need to update the API Base URL and authentication token to start fetching content from the Preview Service.

1. Update API Base URL

   Modify your project configuration to change the API Base URL:

   From:

   api.contentstack.io
   

   To:

   rest-preview.contentstack.com
   

   This ensures your application fetches preview content from the Preview Service instead of the CMA.

   Your final code will look like this:

       contentstack.stack({
   
       ...,
   
       live_preview: {
   
       enable: true,
   
       host: "rest-preview.contentstack.com",
   
       preview_token: "csxxxxxxxxxxxx"
   
       }
   
   })
   

   Note: For region-specific base URLs, refer to the Preview API documentation.

2. Update API Token

   Replace the authentication token with the preview token in your API configuration to authenticate requests correctly.

If your application makes direct API calls without a Contentstack Delivery SDK, update the API Base URLs and Headers to complete the migration.

1. Update API Base URL

   Modify your code to update the API Base URL:

   From:

   api.contentstack.io
   

   To:

   rest-preview.contentstack.com
   

   This ensures your application fetches preview content from the Preview Service instead of the CMA.

   Note: For region-specific base URLs, refer to the Preview API documentation.

2. Modify API Request Headers

   Your application receives a Live Preview hash, which you must include in the request headers along with the preview token to fetch the latest unpublished content.

   Example:

   const CONTENTSTACK_CDN_URL = "cdn.contentstack.io";
   
   const PREVIEW_HOST_NAME = "rest-preview.contentstack.com";
   
   function getHeaders() {
   
       const headers = new Headers();
   
       headers.append("Content-Type", "application/json");
   
       headers.append("access_token", REACT_APP_CONTENTSTACK_DELIVERY_TOKEN);
   
       headers.append("api_key", REACT_APP_CONTENTSTACK_API_KEY);
   
       return headers;
   
   }
   
   export const fetchData = async (ctUID, entryUID, hash = null) => {
   
       const contentstackURL = new URL(
   
           `https://${CONTENTSTACK_CDN_URL}/v3/content_types/${ctUID}/entries/${entryUID}?environment=${REACT_APP_CONTENTSTACK_ENVIRONMENT}`
   
       );
   
       const headers = getHeaders();
   
       if (hash) {
   
           headers.append("live_preview", hash);
   
           headers.append("preview_token", REACT_APP_CONTENTSTACK_PREVIEW_TOKEN);
   
           contentstackURL.hostname = PREVIEW_HOST_NAME;
   
       } else {
   
           contentstackURL.hostname = CONTENTSTACK_CDN_URL;
   
       }
   
       const res = await fetch(contentstackURL.toString(), {
   
           method: "GET",
   
           headers: headers,
   
       });
   
       return res.json();
   
   };
   

   Note: This example uses the REST Preview Service. To use the GraphQL Preview service, refer to:

   • Set Up Live Preview with GraphQL for SSR
   • Set Up Live Preview with GraphQL for CSR

Additional Resource: For more information on Live Preview, refer to About Live Preview to understand its benefits and functionality, or follow Set up Live Preview for your Website for a step-by-step configuration guide.