feat: support for live preview 2.0

Signed-off-by: Amitkanswal <[email protected]>

.env.local.sample

@@ -2,27 +2,29 @@
 #create environment file name as .env.local
 #and place following configuration data.
 
-CONTENTSTACK_API_KEY=YOUR_API_KEY
-CONTENTSTACK_DELIVERY_TOKEN=YOUR_DELIVERY_TOKEN
-CONTENTSTACK_ENVIRONMENT=YOUR_PUBLISHING_ENVIRONMENT
+CONTENTSTACK_API_KEY=your_stack_api_key
+CONTENTSTACK_DELIVERY_TOKEN=your_delivery_token
+CONTENTSTACK_ENVIRONMENT=your_environment_token
 
-# For live preview 
-CONTENTSTACK_MANAGEMENT_TOKEN= 
-CONTENTSTACK_API_HOST=api.contentstack.io
+# Below config options are for enabling live preview/live edit tags for the starter app
+
+CONTENTSTACK_PREVIEW_HOST= rest-preview.contentstack.com
+CONTENTSTACK_PREVIEW_TOKEN= your_live_preview_token
 CONTENTSTACK_APP_HOST=app.contentstack.com
-CONTENTSTACK_LIVE_PREVIEW=true
-CONTENTSTACK_LIVE_EDIT_TAGS=false
+CONTENTSTACK_LIVE_PREVIEW= true
+CONTENTSTACK_LIVE_EDIT_TAGS= false
 
 #site-map
 NEXT_PUBLIC_HOSTED_URL=http://localhost:3000
-# Requires host url for sitemap. Localhost:3000 is set as default value
 
-# For Live preview default value is to true to disable live preview set CONTENTSTACK_LIVE_PREVIEW=false
-# For live edit tags default value is set to false to enable live edit tag set CONTENTSTACK_LIVE_EDIT_TAGS=true
-# For NA region add CONTENTSTACK_APP_HOST=app.contentstack.com
-# For EU region add CONTENTSTACK_APP_HOST=eu-app.contentstack.com
+# CONTENTSTACK_API_HOST=api.contentstack.com
+# CONTENTSTACK_REGION=eu
+# CONTENTSTACK_BRANCH=main
 
-# For setting custom host add CONTENTSTACK_API_HOST=for(NA: api.contentstack.io, EU: eu-api.contentstack.com)
+### NOTE:
+  # CONTENTSTACK_API_HOST- For setting custom api host for contentstack sdk
+  # CONTENTSTACK_REGION- For setting custom region for contentstack sdk default is us
+  # CONTENTSTACK_BRANCH- For setting custom branch for contentstack sdk default is main
 
-# For setting branch add CONTENTSTACK_BRANCH=(Optional for default branch(main)) Eg- develop
-# For setting region add  CONTENTSTACK_REGION=(Optional for US region) Eg- eu
+  # Setting Live Preview URL's
+  # CONTENTSTACK_PREVIEW_HOST- For eu region use eu-rest-preview.contentstack.com/azure-na-rest-preview.contentstack.com/azure-eu-rest-preview.contentstack.com

.npmrc

@@ -0,0 +1 @@
+timeout=60000

contentstack-sdk/index.ts

@@ -26,29 +26,22 @@ const envConfig = process.env.CONTENTSTACK_API_KEY
   : publicRuntimeConfig;
 
 let customHostBaseUrl = envConfig.CONTENTSTACK_API_HOST as string;
-customHostBaseUrl = customHostUrl(customHostBaseUrl);
+
+customHostBaseUrl = customHostBaseUrl? customHostUrl(customHostBaseUrl): '';
 
 // SDK initialization
 const Stack = initializeContentStackSdk();
 
 // set host url only for custom host or non prod base url's
-if (isValidCustomHostUrl(customHostBaseUrl)) {
+if (!!customHostBaseUrl && isValidCustomHostUrl(customHostBaseUrl)) {
   Stack.setHost(customHostBaseUrl);
 }
 
 // Setting LP if enabled
 ContentstackLivePreview.init({
   //@ts-ignore
   stackSdk: Stack,
-  clientUrlParams: {
-    host: envConfig.CONTENTSTACK_APP_HOST,
-  },
-  stackDetails: {
-    apiKey: envConfig.CONTENTSTACK_API_KEY,
-    environment: envConfig.CONTENTSTACK_ENVIRONMENT,
-  },
-  enable: envConfig.CONTENTSTACK_LIVE_PREVIEW === "true",
-  ssr: false,
+  ssr:false,
 })?.catch((err) => console.error(err));
 
 export const { onEntryChange } = ContentstackLivePreview;

contentstack-sdk/utils.ts

@@ -10,8 +10,8 @@ const {
   CONTENTSTACK_ENVIRONMENT,
   CONTENTSTACK_BRANCH,
   CONTENTSTACK_REGION,
-  CONTENTSTACK_MANAGEMENT_TOKEN,
-  CONTENTSTACK_API_HOST,
+  CONTENTSTACK_PREVIEW_TOKEN,
+  CONTENTSTACK_PREVIEW_HOST,
   CONTENTSTACK_APP_HOST,
   CONTENTSTACK_LIVE_PREVIEW,
 } = envConfig;
@@ -28,8 +28,8 @@ export const isBasicConfigValid = () => {
 export const isLpConfigValid = () => {
   return (
     !!CONTENTSTACK_LIVE_PREVIEW &&
-    !!CONTENTSTACK_MANAGEMENT_TOKEN &&
-    !!CONTENTSTACK_API_HOST &&
+    !!CONTENTSTACK_PREVIEW_TOKEN &&
+    !!CONTENTSTACK_PREVIEW_HOST &&
     !!CONTENTSTACK_APP_HOST
   );
 };
@@ -49,9 +49,9 @@ const setLivePreviewConfig = (): LivePreview => {
   if (!isLpConfigValid())
     throw new Error("Your LP config is set to true. Please make you have set all required LP config in .env");
   return {
-    management_token: CONTENTSTACK_MANAGEMENT_TOKEN as string,
+    preview_token: CONTENTSTACK_PREVIEW_TOKEN as string,
     enable: CONTENTSTACK_LIVE_PREVIEW === "true",
-    host: CONTENTSTACK_API_HOST as string,
+    host: CONTENTSTACK_PREVIEW_HOST as string,
   } as LivePreview;
 };
 // contentstack sdk initialization
@@ -84,6 +84,6 @@ export const generateUrlBasedOnRegion = (): string[] => {
   });
 };
 // prod url validation for custom host
-export const isValidCustomHostUrl = (url: string): boolean => {
+export const isValidCustomHostUrl = (url=''): boolean => {
   return url ? !generateUrlBasedOnRegion().includes(url) : false;
 };

next.config.js

@@ -1,25 +1,27 @@
-const withPWA = require('next-pwa')({
-  dest: 'public'
+const withPWA = require("next-pwa")({
+  dest: "public",
 });
 
 const config = {
   publicRuntimeConfig: {
     // Will be available on both server and client
     CONTENTSTACK_API_KEY: process.env.CONTENTSTACK_API_KEY,
     CONTENTSTACK_DELIVERY_TOKEN: process.env.CONTENTSTACK_DELIVERY_TOKEN,
-    CONTENTSTACK_BRANCH: process.env.CONTENTSTACK_BRANCH || 'main',
-    CONTENTSTACK_REGION:process.env.CONTENTSTACK_REGION || "us",
+    CONTENTSTACK_BRANCH: process.env.CONTENTSTACK_BRANCH || "main",
+    CONTENTSTACK_REGION: process.env.CONTENTSTACK_REGION || "us",
     CONTENTSTACK_ENVIRONMENT: process.env.CONTENTSTACK_ENVIRONMENT,
-    CONTENTSTACK_MANAGEMENT_TOKEN: process.env.CONTENTSTACK_MANAGEMENT_TOKEN,
+    CONTENTSTACK_PREVIEW_TOKEN: process.env.CONTENTSTACK_PREVIEW_TOKEN,
+    CONTENTSTACK_PREVIEW_HOST:
+      process.env.CONTENTSTACK_PREVIEW_HOST || "rest-preview.contentstack.com",
     CONTENTSTACK_API_HOST:
-      process.env.CONTENTSTACK_API_HOST || 'api.contentstack.io',
+      process.env.CONTENTSTACK_API_HOST || "api.contentstack.io",
     CONTENTSTACK_APP_HOST:
-      process.env.CONTENTSTACK_APP_HOST || 'app.contentstack.com',
-    CONTENTSTACK_LIVE_PREVIEW:
-      process.env.CONTENTSTACK_LIVE_PREVIEW || 'true',
+      process.env.CONTENTSTACK_APP_HOST || "app.contentstack.com",
+    CONTENTSTACK_LIVE_PREVIEW: process.env.CONTENTSTACK_LIVE_PREVIEW || "true",
     CONTENTSTACK_LIVE_EDIT_TAGS:
-      process.env.CONTENTSTACK_LIVE_EDIT_TAGS || 'false',
+      process.env.CONTENTSTACK_LIVE_EDIT_TAGS || "false",
   },
+  experimental: { largePageDataBytes: 128 * 100000 },
 };
 module.exports =
-  process.env.NODE_ENV === 'development' ? config : withPWA(config);
+  process.env.NODE_ENV === "development" ? config : withPWA(config);