Migrate from Release Preview App to Timeline

This migration guide provides a detailed breakdown of the necessary changes needed to transition from using the Release Preview App to Timeline.

The Release Preview App is a third party extension to preview your release, whereas the Timeline feature offers more functionality and versatility to preview how your site will appear once scheduled updates are made live, providing a comprehensive view of upcoming content transformations.

Note: The Release Preview app is no longer supported and has been removed from the Contentstack marketplace.

Prerequisites

• Contentstack account
• Access to stack settings
• Preview token
• Website that uses Contentstack Delivery SDKs
• IFrame-compatible website to avoid CORS errors
• Website configured with Release Preview App

1. Upgrade Packages

   Upgrade the JavaScript Delivery SDK and Live Preview Utils SDK to enable the timeline feature.

   Note: The timeline feature requires Live Preview Utils version 2.0 or above.

   For Client-side Rendering (CSR)

   Use the following code snippet to update the SDKs for your CSR websites.

   // UPGRADE
   npm i contentstack@latest @contentstack/live-preview-utils@latest

   For Server-side Rendering (SSR)

   Use the following code snippet to update the SDKs for your SSR websites.

   // UPGRADE
   npm i contentstack@latest @contentstack/live-preview-utils@latest

2. Remove Live Preview Utils CSS

   Live Preview Utils CSS is now included by default, so you no longer need to import it.

   For Client-side Rendering (CSR)

   Remove the following from your CSR website code.

   // REMOVE LIVE PREVIEW UTILS
   import "@contentstack/live-preview-utils/dist/main.css";
   import "@contentstack/delivery-plugin-release-preview/dist/compareUtils.browser.min.js";
   import "@contentstack/delivery-plugin-release-preview/dist/compareUtilsStyle.css";

   For Server-side Rendering (SSR)

   Remove the following from your SSR website code.

   // REMOVE LIVE PREVIEW UTILS
   import "@contentstack/live-preview-utils/dist/main.css";
   import "@contentstack/delivery-plugin-release-preview/dist/compareUtils.browser.min.js";
   import "@contentstack/delivery-plugin-release-preview/dist/compareUtilsStyle.css";

3. Remove Release Preview App Setup Logic

   Remove the following functions from your CSR and SSR website codes as they are by default handled by the server and SDK.

   For Client-side Rendering (CSR)

   Remove the ReleasePreviewPlugin code, ReleasePreview.init and Compare Utils as these functions are now handled by server and SDK.

   import * as contentstack from "contentstack";
   // REMOVE
   import { releaseReplaceAlgorithm, releaseReplacePreReq } from "@contentstack/delivery-plugin-release-preview";
   
   // REMOVE
   class ReleasePreviewPlugin {
    onRequest (stack, request) {
      releaseReplacePreReq(stack, request);
      return request;
    }
    async onResponse(stack, request, response, data) {
      const _data = data['entries'] || data['assets'] || data['entry'] || data['asset'];
      await releaseReplaceAlgorithm(_data, stack);
      return data
    }
   }
   
   export const stack = contentstack.Stack({
    plugins: [
      // REMOVE
      new ReleasePreviewPlugin()
    ]
   });

   Also remove the ReleasePreview.init functionality.

   // App.tsx
   import ReleasePreview from "@contentstack/delivery-plugin-release-preview"; // REMOVE
   import { useSearchParams } from "react-router-dom";
   import { stack } from "./sdk";
   import { getReleasePreviewSession } from "./utils"; // REMOVE
   
   function App() {
       const [isLoading, setLoading] = useState(true);
       const [searchParams] = useSearchParams();
       useEffect(() => {
   	    (async () => {
   	   //* REMOVE start
   	   const release_preview_options = getReleasePreviewSession(searchParams);
           await ReleasePreview.init(stack, release_preview_options);
   	   //* REMOVE END
           setLoading(false);
         })();
        }, []);
       return (isLoading ? null : /*YOUR COMPONENT HERE*/)
   }

   For Server-side Rendering (SSR)

   Remove the ReleasePreviewPlugin code, ReleasePreview.init and Compare Utils as these functions are now handled by server and SDK.

   // sdk.js
   const contentstack = require("contentstack");
   // REMOVE
   const { releaseReplaceAlgorithm, releaseReplacePreReq } = require("@contentstack/delivery-plugin-release-preview");
   
   // REMOVE
   class ReleasePreviewPlugin {
    onRequest (stack, request) {
      releaseReplacePreReq(stack, request);
      return request;
    }
    async onResponse(stack, request, response, data) {
      const _data = data['entries'] || data['assets'] || data['entry'] || data['asset'];
      await releaseReplaceAlgorithm(_data, stack);
      return data
    }
   }
   export const stack = contentstack.Stack({
    plugins: [
      // REMOVE
      new ReleasePreviewPlugin()
    ]
   });

   Also remove the ReleasePreview.init functionality.

   // app.js
   const { default: ReleasePreview } =  require('@contentstack/delivery-plugin-release-preview');
   const { stack } = require('./sdk');
   // REMOVE
   const { getReleasePreviewSession } = require('./utils');
   
   app.use(async (req, res, next) => {
   // REMOVE whole try catch block for init
    try {
      const release_preview_options = getReleasePreviewSession(req, res)
      await ReleasePreview.init(stack, release_preview_options);
    } catch(err) {
      console.error('error while setting release preview', err);
    }
    next();
   })

Note: For first-time users, additional details on how to tree shake live preview utils and slim down your production build can be found in the Set Up Timeline for your Website documentation.