Fix/mkt 5148 live edit

.env.local.sample

@@ -1,30 +1,28 @@
 
-#create environment file name as .env.local
-#and place following configuration data.
-
-CONTENTSTACK_API_KEY=your_stack_api_key
-CONTENTSTACK_DELIVERY_TOKEN=your_delivery_token
-CONTENTSTACK_ENVIRONMENT=your_environment_name
-
-# 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
-
-#site-map
-NEXT_PUBLIC_HOSTED_URL=http://localhost:3000
-
-# CONTENTSTACK_API_HOST=api.contentstack.io
-# CONTENTSTACK_REGION=eu
-# CONTENTSTACK_BRANCH=main
-
-### 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
-
-  # 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
+# This is a settings file for our application.
+
+# Contentstack is the tool we use to manage our website's content.
+# You need to replace 'your_stack_api_key', 'your_delivery_token', and 'your_environment_name' with the actual information.
+REACT_APP_CONTENTSTACK_API_KEY=your_stack_api_key
+REACT_APP_CONTENTSTACK_DELIVERY_TOKEN=your_delivery_token
+REACT_APP_CONTENTSTACK_ENVIRONMENT=your_environment_name
+
+# Live Preview lets us see changes before they are shown on the website.
+# Replace 'your_live_preview_token' with the actual information.
+REACT_APP_CONTENTSTACK_PREVIEW_HOST=rest-preview.contentstack.com
+REACT_APP_CONTENTSTACK_PREVIEW_TOKEN=your_live_preview_token
+REACT_APP_CONTENTSTACK_APP_HOST=app.contentstack.com
+REACT_APP_CONTENTSTACK_LIVE_PREVIEW=true
+REACT_APP_CONTENTSTACK_LIVE_EDIT_TAGS=false
+
+# These are extra settings. You can remove the '#' at the start of the line and fill these if needed.
+# REACT_APP_CONTENTSTACK_API_HOST= api.contentstack.io
+# REACT_APP_CONTENTSTACK_REGION=us
+# REACT_APP_CONTENTSTACK_BRANCH=main
+
+# Notes:
+# - REACT_APP_CONTENTSTACK_API_HOST: This is for setting a custom address for the Contentstack tool.
+# - REACT_APP_CONTENTSTACK_REGION: This is for setting a custom region for the Contentstack tool (default is 'us').
+# - REACT_APP_CONTENTSTACK_BRANCH: This is for setting a custom branch for the Contentstack tool (default is 'main').
+# - REACT_APP_CONTENTSTACK_PREVIEW_HOST: If you're in the EU just append "eu-" to "rest-preview.contentstack.com"
+# - example eu-rest-preview.contentstack.com

contentstack-sdk/index.ts

@@ -39,8 +39,12 @@ if (!!customHostBaseUrl && isValidCustomHostUrl(customHostBaseUrl)) {
 
 // Setting LP if enabled
 ContentstackLivePreview.init({
-  //@ts-ignore
-  stackSdk: Stack,
+  stackSdk:{...Stack, headers:{
+    api_key: envConfig.CONTENTSTACK_API_KEY
+  }},
+  clientUrlParams:{
+    host: envConfig.CONTENTSTACK_APP_HOST,
+  },
   ssr:false,
 })?.catch((err) => console.error(err));