feat: add preview side editor (#38)

* chore: rename env variables

* chore: turn on future flags

* feat: side editor

* chore: update readme instructions

* chore: new strapi exp

* fix: env example files

* fix: duplicate env vars

* chore: upgrade strapi experimental

* feat: bump strapi version

* fix: generic uid in strapi package.json

* fix: remove yarn integrity file

* Update strapi/config/features.ts

Author: remidej

README.md

@@ -2,7 +2,7 @@
 
 ![LaunchPad](./LaunchPad.jpg)
 
-Welcome aboard **LaunchPad**, the official Strapi demo application, where we launch your content into the stratosphere at the speed of  *"we-can't-even-measure-it!"*.
+Welcome aboard **LaunchPad**, the official Strapi demo application, where we launch your content into the stratosphere at the speed of _"we-can't-even-measure-it!"_.
 This repository contains the following:
 
 - A Strapi project with content-types and data already onboard
@@ -12,22 +12,6 @@ This repository contains the following:
 
 Strap yourself in! You can get started with this project on your local machine by following the instructions below, or you can [request a private instance on our website](https://strapi.io/demo)
 
-## 🛠 Prerequisites
-
-Before you take off, make sure you have the right env variables loaded for each part (rocket science at its best):
-
-Strapi (example in `./strapi/.env.example`):
-  - `STRAPI_ADMIN_CLIENT_URL=<url-of-nextjs>`
-  - `STRAPI_ADMIN_CLIENT_PREVIEW_SECRET=<a-random-token>`
-
-- Create a `./strapi/.env` file with these variables
-
-Next.js (example in `./next/.env.sample`):
-  - `NEXT_PUBLIC_API_URL=<url-of-strapi>` (mandatory)
-  - `PREVIEW_SECRET=<the-same-random-token-as-for-strapi>`
-
-- Create a `./next/.env` file with these variables
-
 ## 1. Clone Launchpad
 
 To infinity and beyond! 🚀 Clone the repo with this command:
@@ -38,7 +22,23 @@ git clone https://github.com/strapi/launchpad.git
 
 - Navigate to your project folder by running `cd launchpad`.
 
-## 2. Start Strapi
+## 2. Set up environment variables
+
+Before you take off, set up the required environment variables for both Strapi and Next.js.
+
+To create the Strapi .env file, copy the content of the `./strapi/.env.example` file into a new file named `./strapi/.env`, then modify the values to match your setup:
+
+```sh
+cp ./strapi/.env.example ./strapi/.env
+```
+
+Then do the same for the Next.js .env file, and modify it too:
+
+```sh
+cp ./next/.env.example ./next/.env
+```
+
+## 3. Start Strapi
 
 Take a deep breath. It's time to power up the Strapi engines. Navigate to your ./my-projects/launchpad/strapi folder by running:
 
@@ -52,11 +52,11 @@ yarn && yarn seed && yarn develop
 
 This will install dependencies, sprinkle in some data magic, and run the server. (You can run these commands separately, but why not be efficient?)
 
-## 3. Start Next.js
+## 4. Start Next.js
 
 We're almost ready for lift-off! Next.js is your sleek, futuristic interface for getting all that glorious content out into the world. 🚀
 
-Navigate to your `./my-projects/launchpad/next` folder by running `cd next` from your command line.
+Open a new terminal tab or window to leave Strapi running, and navigate to your `./my-projects/launchpad/next` folder by running `cd next`.
 
 - Run the following command in your `./launchpad/next` folder
 
@@ -91,10 +91,9 @@ This installs dependencies, builds your project, and starts your server. You’r
 [Data transfer](https://strapi.io/blog/importing-exporting-and-transferring-data-with-the-strapi-cli) Streams your data from one Strapi instance to another Strapi instance.<br />
 [Review Worfklows](https://docs.strapi.io/user-docs/settings/review-workflows) Create and manage any desired review stages for your content, enabling your team to collaborate in the content creation flow from draft to publication. <br />
 
-
 ## Resources
 
-[Docs](https://docs.strapi.io) • [Demo](https://strapi.io/demo) • [Forum](https://forum.strapi.io/) • [Discord](https://discord.strapi.io) • [Youtube](https://www.youtube.com/c/Strapi/featured) • [Strapi Design System](https://design-system.strapi.io/) • [Marketplace](https://market.strapi.io/) • [Cloud Free Trial](https://cloud.strapi.io) 
+[Docs](https://docs.strapi.io) • [Demo](https://strapi.io/demo) • [Forum](https://forum.strapi.io/) • [Discord](https://discord.strapi.io) • [Youtube](https://www.youtube.com/c/Strapi/featured) • [Strapi Design System](https://design-system.strapi.io/) • [Marketplace](https://market.strapi.io/) • [Cloud Free Trial](https://cloud.strapi.io)
 
 ## Todo
 
@@ -109,4 +108,4 @@ This installs dependencies, builds your project, and starts your server. You’r
 
 - The Strapi application contains a postinstall script that will regenerate an uuid for the project in order to get some anonymous usage information concerning this demo. You can disable it by removing the uuid inside the `./strapi/packages.json` file.
 
-- The Strapi application contains a patch for the @strapi/admin package. It is only necessary for the hosted demos since we automatically create the Super Admin users for them when they request this demo on our website.
+- The Strapi application contains a patch for the @strapi/admin package. It is only necessary for the hosted demos since we automatically create the Super Admin users for them when they request this demo on our website.

next/.env.example

@@ -2,4 +2,4 @@ WEBSITE_URL=http://localhost:3000 # Add the correct ENV var for this onto your h
 PORT=3000
 
 NEXT_PUBLIC_API_URL=http://localhost:1337
-PREVIEW_SECRET=the-same-random-token-as-for-strapi
+PREVIEW_SECRET=tobemodified 

next/README.md

@@ -15,7 +15,7 @@ Welcome to our cutting-edge Next.js Multilingual Blog Template! This powerful an
 
 1. Clone this repository
 2. Install dependencies: `npm install`
-3. Copy `.env.sample` to `.env.local` and update the variables
+3. Copy `.env.example` to `.env.local` and update the variables
 4. Run the development server: `npm run dev`
 5. Open [http://localhost:3000](http://localhost:3000) in your browser
 

next/app/[locale]/(marketing)/ClientSlugHandler.tsx

@@ -2,6 +2,7 @@
 
 import { useEffect } from "react";
 import { useSlugContext } from "@/app/context/SlugContext";
+import { useRouter } from "next/navigation";
 
 export default function ClientSlugHandler({
   localizedSlugs,
@@ -16,5 +17,26 @@ export default function ClientSlugHandler({
     }
   }, [localizedSlugs, dispatch]);
 
+  const router = useRouter();
+
+  useEffect(() => {
+    const handleMessage = async (message: MessageEvent<any>) => {
+      if (
+        message.origin === process.env.NEXT_PUBLIC_API_URL &&
+        message.data.type === "strapiUpdate"
+      ) {
+        router.refresh();
+      }
+    };
+
+    // Add the event listener
+    window.addEventListener("message", handleMessage);
+
+    // Cleanup the event listener on unmount
+    return () => {
+      window.removeEventListener("message", handleMessage);
+    };
+  }, [router]);
+
   return null; // This component only handles the state and doesn't render anything.
 }

strapi/.env.example

@@ -6,8 +6,6 @@ ADMIN_JWT_SECRET=tobemodified
 TRANSFER_TOKEN_SALT=tobemodified
 JWT_SECRET=tobemodified
 
-STRAPI_ADMIN_CLIENT_URL=http://localhost:3000
-STRAPI_ADMIN_CLIENT_PREVIEW_SECRET=a-random-token
 
 CLIENT_URL=http://localhost:3000
-PREVIEW_SECRET=your-secret-key # optional, required with Next.js draft mode
+PREVIEW_SECRET=tobemodified # optional, required with Next.js draft mode

strapi/config/admin.ts

@@ -1,43 +1,43 @@
 export default ({ env }) => ({
   auth: {
-    secret: env('ADMIN_JWT_SECRET'),
+    secret: env("ADMIN_JWT_SECRET"),
   },
   apiToken: {
-    salt: env('API_TOKEN_SALT'),
+    salt: env("API_TOKEN_SALT"),
   },
   transfer: {
     token: {
-      salt: env('TRANSFER_TOKEN_SALT'),
+      salt: env("TRANSFER_TOKEN_SALT"),
     },
   },
   flags: {
-    nps: env.bool('FLAG_NPS', true),
-    promoteEE: env.bool('FLAG_PROMOTE_EE', true),
+    nps: env.bool("FLAG_NPS", true),
+    promoteEE: env.bool("FLAG_PROMOTE_EE", true),
   },
   preview: {
     enabled: true,
     config: {
-      allowedOrigins: [env('STRAPI_ADMIN_CLIENT_URL')],
+      allowedOrigins: [env("CLIENT_URL")],
       async handler(uid, { documentId, locale, status }) {
         const document = await strapi.documents(uid).findOne({
-          documentId, populate: null,
+          documentId,
+          populate: null,
           fields: ["slug"],
         });
         const { slug } = document;
 
         const urlSearchParams = new URLSearchParams({
-          secret: env('STRAPI_ADMIN_CLIENT_PREVIEW_SECRET'),
+          secret: env("PREVIEW_SECRET"),
           ...(slug && { slug }),
           locale,
           uid,
-          status
+          status,
         });
 
-        const previewURL = `${env('STRAPI_ADMIN_CLIENT_URL')}/api/preview?${urlSearchParams}`
+        const previewURL = `${env("CLIENT_URL")}/api/preview?${urlSearchParams}`;
 
-        return previewURL
+        return previewURL;
       },
-    }
-
-  }
+    },
+  },
 });

strapi/config/features.ts

@@ -0,0 +1 @@
+export default ({ env }) => ({});

strapi/package.json

@@ -43,4 +43,4 @@
     "npm": ">=6.0.0"
   },
   "license": "MIT"
-}
+}

strapi/src/admin/extensions/components/PreviewButton/index.tsx

@@ -9311,16 +9311,7 @@ string-argv@~0.3.1:
   resolved "https://registry.yarnpkg.com/string-argv/-/string-argv-0.3.2.tgz#2b6d0ef24b656274d957d54e0a4bbf6153dc02b6"
   integrity sha512-aqD2Q0144Z+/RqG52NeHEkZauTAUWJO8c6yTftGJKO3Tja5tUgIfmIl6kExvhtxSDP7fXB6DvzkfMpCd/F3G+Q==
 
-"string-width-cjs@npm:string-width@^4.2.0":
-  version "4.2.3"
-  resolved "https://registry.yarnpkg.com/string-width/-/string-width-4.2.3.tgz#269c7117d27b05ad2e536830a8ec895ef9c6d010"
-  integrity sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==
-  dependencies:
-    emoji-regex "^8.0.0"
-    is-fullwidth-code-point "^3.0.0"
-    strip-ansi "^6.0.1"
-
-string-width@^4.0.0, string-width@^4.1.0, string-width@^4.2.0, string-width@^4.2.2, string-width@^4.2.3:
+"string-width-cjs@npm:string-width@^4.2.0", string-width@^4.0.0, string-width@^4.1.0, string-width@^4.2.0, string-width@^4.2.2, string-width@^4.2.3:
   version "4.2.3"
   resolved "https://registry.yarnpkg.com/string-width/-/string-width-4.2.3.tgz#269c7117d27b05ad2e536830a8ec895ef9c6d010"
   integrity sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==
@@ -9366,14 +9357,7 @@ string_decoder@~1.1.1:
   dependencies:
     safe-buffer "~5.1.0"
 
-"strip-ansi-cjs@npm:strip-ansi@^6.0.1":
-  version "6.0.1"
-  resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-6.0.1.tgz#9e26c63d30f53443e9489495b2105d37b67a85d9"
-  integrity sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==
-  dependencies:
-    ansi-regex "^5.0.1"
-
-strip-ansi@^6.0.0, strip-ansi@^6.0.1:
+"strip-ansi-cjs@npm:strip-ansi@^6.0.1", strip-ansi@^6.0.0, strip-ansi@^6.0.1:
   version "6.0.1"
   resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-6.0.1.tgz#9e26c63d30f53443e9489495b2105d37b67a85d9"
   integrity sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==
@@ -10126,7 +10110,7 @@ wordwrap@^1.0.0:
   resolved "https://registry.yarnpkg.com/wordwrap/-/wordwrap-1.0.0.tgz#27584810891456a4171c8d0226441ade90cbcaeb"
   integrity sha512-gvVzJFlPycKc5dZN4yPkP8w7Dc37BtP1yczEneOb4uq34pXZcvrtRTmWV8W+Ume+XCxKgbjM+nevkyFPMybd4Q==
 
-"wrap-ansi-cjs@npm:wrap-ansi@^7.0.0":
+"wrap-ansi-cjs@npm:wrap-ansi@^7.0.0", wrap-ansi@^7.0.0:
   version "7.0.0"
   resolved "https://registry.yarnpkg.com/wrap-ansi/-/wrap-ansi-7.0.0.tgz#67e145cff510a6a6984bdf1152911d69d2eb9e43"
   integrity sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==
@@ -10144,15 +10128,6 @@ wrap-ansi@^6.2.0:
     string-width "^4.1.0"
     strip-ansi "^6.0.0"
 
-wrap-ansi@^7.0.0:
-  version "7.0.0"
-  resolved "https://registry.yarnpkg.com/wrap-ansi/-/wrap-ansi-7.0.0.tgz#67e145cff510a6a6984bdf1152911d69d2eb9e43"
-  integrity sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==
-  dependencies:
-    ansi-styles "^4.0.0"
-    string-width "^4.1.0"
-    strip-ansi "^6.0.0"
-
 wrap-ansi@^8.1.0:
   version "8.1.0"
   resolved "https://registry.yarnpkg.com/wrap-ansi/-/wrap-ansi-8.1.0.tgz#56dc22368ee570face1b49819975d9b9a5ead214"