Live preview

.env.sample

@@ -1,6 +1,7 @@
 REACT_APP_CONTENTSTACK_API_KEY=YOUR_STACK_API_KEY
 REACT_APP_CONTENTSTACK_DELIVERY_TOKEN=YOUR_DELIVERY_TOKEN
 REACT_APP_CONTENTSTACK_ENVIRONMENT=YOUR_ENVIRONMENT
+REACT_APP_CONTENTSTACK_PREVIEW_TOKEN=YOUR_PREVIEW_TOKEN
 
 # Supported Regions:
 # For AWS North America, set region as US

README.md

@@ -29,6 +29,7 @@ This is a React starter app that integrates with Contentstack's Content Delivery
    ```
    REACT_APP_CONTENTSTACK_API_KEY=YOUR_STACK_API_KEY
    REACT_APP_CONTENTSTACK_DELIVERY_TOKEN=YOUR_DELIVERY_TOKEN
+   REACT_APP_CONTENTSTACK_PREVIEW_TOKEN=YOUR_PREVIEW_TOKEN
    REACT_APP_CONTENTSTACK_ENVIRONMENT=YOUR_ENVIRONMENT
    REACT_APP_CONTENTSTACK_REGION=YOUR_STACK_REGION
    ```
@@ -42,7 +43,7 @@ This is a React starter app that integrates with Contentstack's Content Delivery
 
 To configure the app with your Contentstack account:
 
-- Replace `YOUR_STACK_API_KEY`, `YOUR_DELIVERY_TOKEN`, `YOUR_ENVIRONMENT` and `YOUR_STACK_REGION` in the `.env` file with your Contentstack API key, delivery token, environment name and region respectively.
+- Replace `YOUR_STACK_API_KEY`, `YOUR_DELIVERY_TOKEN`, `YOUR_PREVIEW_TOKEN`, `YOUR_ENVIRONMENT` and `YOUR_STACK_REGION` in the `.env` file with your Contentstack API key, delivery token, environment name and region respectively.
 
 **Supported Regions:**
 
@@ -52,6 +53,8 @@ To configure the app with your Contentstack account:
 - **Azure Europe:** `AZURE_EU`
 - **GCP North America:** `GCP_NA`
 
+> 🚨 **Important Note:** **Live Preview** is not supported in the **GCP NA** region! 🚨
+
 ## Usage
 
 1. Once the app is running, navigate to `http://localhost:3000` in your web browser.
@@ -62,6 +65,7 @@ To configure the app with your Contentstack account:
 
 - Integration with Contentstack's Content Delivery API.
 - Dynamic rendering of content fetched from Contentstack.
+- Live Preview of the Content
 
 ## License
 

package.json

@@ -5,6 +5,8 @@
   "private": true,
   "author": "Contentstack",
   "dependencies": {
+    "@contentstack/live-preview-utils": "^2.0.2",
+    "@contentstack/utils": "^1.3.8",
     "@contentstack/venus-components": "^2.2.4",
     "@reduxjs/toolkit": "^2.2.1",
     "@testing-library/jest-dom": "^5.17.0",

src/api/index.ts

@@ -4,11 +4,11 @@ import {
   setFooterData,
   setHeaderData,
   setHomePageData,
-  // COMMENT: Uncomment below line
-  // setMenuPageData,
+  setMenuPageData,
 } from "../reducer";
 import { initializeContentstackSdk } from "../sdk/utils";
 import * as Utils from "@contentstack/utils";
+import { addEditableTags } from "@contentstack/utils";
 
 const Stack = initializeContentstackSdk();
 
@@ -68,13 +68,15 @@ export const fetchHeaderData = async (
   dispatch: Dispatch<any>
 ): Promise<void> => {
   const data = await getEntry(CONTENT_TYPES.HEADER);
+  addEditableTags(data[0][0], CONTENT_TYPES.HEADER, true, "en-us");
   dispatch(setHeaderData(data[0][0]));
 };
 
 export const fetchFooterData = async (
   dispatch: Dispatch<any>
 ): Promise<void> => {
   const data = await getEntry(CONTENT_TYPES.FOOTER);
+  addEditableTags(data[0][0], CONTENT_TYPES.FOOTER, true, "en-us");
   dispatch(setFooterData(data[0][0]));
 };
 
@@ -87,6 +89,7 @@ export const fetchHomePageData = async (
     referenceFieldPath: undefined,
     jsonRtePath: undefined,
   });
+  addEditableTags(data[0], CONTENT_TYPES.PAGE, true, "en-us");
   dispatch(setHomePageData(data[0]));
 };
 
@@ -106,18 +109,17 @@ export const fetchInitialData = async (
   }
 };
 
-// COMMENT: Uncomment below code
-
-// export const fetchMenuPageData = async (
-//   dispatch: Dispatch<any>,
-//   setLoading: (status: boolean) => void
-// ): Promise<void> => {
-//   const data: any = await getEntryByUrl({
-//     contentTypeUid: CONTENT_TYPES.PAGE,
-//     entryUrl: "/menu",
-//     referenceFieldPath: ["sections.menu.course.dishes"],
-//     jsonRtePath: undefined,
-//   });
-//   dispatch(setMenuPageData(data[0].sections[0].menu.course));
-//   setLoading(false);
-// };
+export const fetchMenuPageData = async (
+  dispatch: Dispatch<any>,
+  setLoading: (status: boolean) => void
+): Promise<void> => {
+  const data: any = await getEntryByUrl({
+    contentTypeUid: CONTENT_TYPES.PAGE,
+    entryUrl: "/menu",
+    referenceFieldPath: ["sections.menu.course.dishes"],
+    jsonRtePath: undefined,
+  });
+  addEditableTags(data[0], CONTENT_TYPES.PAGE, true, "en-us");
+  dispatch(setMenuPageData(data[0].sections[0].menu.course));
+  setLoading(false);
+};

src/components/footer/Footer.tsx

@@ -13,10 +13,10 @@ const Footer: React.FC = () => {
       <div className="footer-content">
         {navigation_links && (
           <div className="footer-link">
-            <h1>{navigation_links?.title}</h1>
+            <h1 {...navigation_links.$.title}>{navigation_links?.title}</h1>
             <nav className="footer-nav">
               {navigation_links?.link?.map((link: TLink, index: number) => (
-                <Link key={`key-${index}`} to={link.href}>
+                <Link {...link.$.title} key={`key-${index}`} to={link.href}>
                   {link.title}
                 </Link>
               ))}
@@ -25,16 +25,26 @@ const Footer: React.FC = () => {
         )}
         {information_section && (
           <div className="footer-info">
-            <img src={information_section.logo?.url} alt="Footer" />
+            <img
+              {...information_section.logo?.$.url}
+              src={information_section.logo?.url}
+              alt="Footer"
+            />
 
-            <p>{information_section?.descrption}</p>
+            <p {...information_section.$.descrption}>
+              {information_section?.descrption}
+            </p>
             <h3>Hours</h3>
-            <p style={{ opacity: 0.8 }}>{information_section?.timings}</p>
-            <p style={{ opacity: 0.8 }}>{information_section?.holiday}</p>
+            <p {...information_section.$.timings} style={{ opacity: 0.8 }}>
+              {information_section?.timings}
+            </p>
+            <p {...information_section.$.holiday} style={{ opacity: 0.8 }}>
+              {information_section?.holiday}
+            </p>
           </div>
         )}
       </div>
-      <h2>{copyright}</h2>
+      <h2 {...footerData.$.copyright}>{copyright}</h2>
     </div>
   );
 };

src/components/header/Header.tsx

@@ -18,12 +18,13 @@ const Header: React.FC = () => {
     <div className={`header ${isOpen ? "open" : ""}`}>
       <div className="logo-menu">
         <Link to="/">
-          <img src={logo?.url} alt="Logo" />
+          <img {...logo.$.url} src={logo?.url} alt="Logo" />
         </Link>
       </div>
       <nav className={`nav ${isOpen ? "active" : ""}`}>
         {navigation_links?.link.map((link: TLink, index: number) => (
           <Link
+            {...link.$.title}
             key={`key-${index}`}
             to={link.href}
             className={location.pathname === link.href ? "active" : ""}

src/components/home/Home.tsx

@@ -35,13 +35,22 @@ const Home: React.FC = () => {
       <div className="hero-section">
         {home.hero_section?.banner?.url && (
           <div className="hero-banner">
-            <img src={home.hero_section.banner.url} alt="Hero Banner" />
+            <img
+              {...home.hero_section.banner.$.url}
+              src={home.hero_section.banner.url}
+              alt="Hero Banner"
+            />
           </div>
         )}
         <div className="hero-content">
-          <h1>{styleAlternateWords(home.hero_section?.heading || "")}</h1>
-          <p>{home.hero_section?.description}</p>
+          <h1 {...home.hero_section?.$.heading}>
+            {styleAlternateWords(home.hero_section?.heading || "")}
+          </h1>
+          <p {...home.hero_section?.$.description}>
+            {home.hero_section?.description}
+          </p>
           <Button
+            {...home.hero_section?.$.primary_cta}
             size="large"
             className="cta-button"
             onClick={() => {