Merge pull request #155 from episerver/bugfix/CMS-46407-update-doc

Update instructions in sample site for graph webhooks revalidation

Author: exacs

samples/graph-webhooks-cache-invalidation/README.md

@@ -38,16 +38,29 @@ Run `npm run webhook:create` and follow the instructions to create a webhook in
 
 ### 4. Create content
 
-Go to your CMS and create a page in the path `/en/` (homepage for English language)
+Go to your CMS and create a page
 
-### 5. Build and start the project
+### 5. Create an application
+
+Go to your CMS → Settings → Applications. Click "Create application" In the dialog:
+
+- In _Application Name_ write "webhooks_test"
+- Under _choose start page_ choose "from existing" and choose the page you created in the previous step.
+
+Click create application and, in the list of applications, click the application you just created and go to "Hostnames". Click "Add Hostname". In the dialog:
+
+- In _Hostname_ write the URL of your application, e.g. https://example.com.
+- Check the "Use a secure connection (HTTPS)" checkbox
+- In _Locale_ choose All
+
+### 6. Build and start the project
 
 Run `npm run build` and `npm start`
 
 > [!Note]
 > The command `npm run dev` does not work because Next.js cache is disabled in dev mode
 
-### 6. Test the cache
+### 7. Test the cache
 
 Go to `<your project URL>/en`. You will see a page with the message:
 
@@ -57,12 +70,12 @@ This page is generated and cached: 2025-10-03T12:42:40.453Z. 15 seconds ago
 
 Refresh the page. You will see that the date is the same and that the seconds counter has _not_ restarted.
 
-### 7. Trigger a cache revalidation
+### 8. Trigger a cache revalidation
 
 Go to your CMS, make changes to the page `/en/` you created previously and publish them.
 
 Go to `<your project URL>/en`. You will see that a different date and that the counter has restarted
 
-### 8. Clean-up
+### 9. Clean-up
 
 Run `npm run webhook:edit` and follow the instructions to delete the webhook that you don't need anymore.

samples/graph-webhooks-cache-invalidation/src/app/preview/page.tsx

@@ -3,11 +3,9 @@ import React from 'react';
 export default function Page() {
   return (
     <div>
-      This sample site doesn&apos;t have Live Preview enabled. Go to{' '}
-      <a href="/en/" target="_blank">
-        /en
-      </a>{' '}
-      to see the actual page instead
+      Preview mode doesn&apos;t cache content, to test the webhook cache
+      invalidation, navigate to view mode by clicking{' '}
+      <strong>Options &larr; View on website.</strong>
     </div>
   );
 }