takerofnotes-website/STRAPI_PREVIEW_SETUP.md

Strapi Preview Implementation for Vike App

This document explains how to set up and use the Strapi Preview feature with this Vike application.

Features Implemented

✅ Basic Preview - Preview draft and published content from Strapi admin
✅ Dynamic Routes - Support for articles, pages, and other content types
✅ Preview Banner - Visual indicator when in preview mode
✅ Live Preview Ready - Communication setup for real-time content updates
✅ Security - CSP headers for safe iframe embedding
✅ Cache Control - Preview content bypasses caching

Setup Instructions

1. Frontend Configuration (Already Done)

The Vike app is now configured with:

• Environment Variables (.env):

  VITE_CLIENT_URL=https://takerofnotes.com
  VITE_PREVIEW_SECRET=preview-secret-key-change-this-in-production
  

• Preview Route: /pages/preview/+data.js and /pages/preview/+Page.vue

• Enhanced Strapi Client: Preview-aware data fetching

• UI Components: Preview banner and Live Preview communication

• CSP Headers: Allow embedding from Strapi admin

2. Strapi Configuration (To Do)

1. Copy the admin configuration from strapi-config-example.js to your Strapi project at config/admin.js

2. Add environment variables to your Strapi .env:

   CLIENT_URL=https://takerofnotes.com
   PREVIEW_SECRET=preview-secret-key-change-this-in-production
   

3. Update the preview secret in both frontend and Strapi to match

3. Content Type Setup

The implementation supports these content type patterns:

• Global (api::global.global) → / (homepage)
• Pages (api::page.page) → /{slug}
• Articles (api::article.article) → /articles/{slug}

Add more content types by:

1. Updating getPreviewPathname() in the Strapi config
2. Creating corresponding route files in /pages/

How It Works

Preview Flow

1. Strapi Admin → User clicks "Open Preview" on content
2. Preview Handler → Generates preview URL with secret and parameters
3. Preview API → Validates secret and redirects to content page with preview flags
4. Content Page → Detects preview mode and fetches draft content
5. Preview Banner → Shows preview status with exit option

URL Structure

Preview URLs follow this pattern:

/preview?secret=xxx&path=/articles/my-article&status=draft&documentId=123&uid=api::article.article

Which redirects to:

/articles/my-article?preview=true&status=draft&documentId=123&uid=api::article.article

File Structure

├── pages/
│   ├── preview/                       # Preview route handler
│   │   ├── +Page.vue
│   │   └── +data.js
│   ├── @slug/                         # Dynamic pages route
│   │   ├── +Page.vue
│   │   └── +data.js
│   ├── articles/@slug/                # Dynamic articles route
│   │   ├── +Page.vue
│   │   └── +data.js
│   ├── index/+data.js                 # Homepage with preview support
│   └── +Layout.vue                    # Updated with preview components
├── components/
│   ├── PreviewBanner.vue              # Preview mode indicator
│   └── LivePreview.vue                # Live Preview communication
├── libs/
│   └── strapi.js                      # Enhanced with preview support
└── strapi-config-example.js           # Strapi admin configuration

Adding New Content Types

To add preview support for a new content type:

1. Update Strapi Config (config/admin.js):

   case "api::my-content.my-content":
     return `/my-content/${slug}`;
   

2. Create Vike Route:

   pages/my-content/@slug/
   ├── +Page.vue
   └── +data.js
   

3. Implement Data Fetching:

   import { getBySlug, getByDocumentId } from '@/libs/strapi'
   
   export const data = async (pageContext) => {
     // Extract preview parameters
     const isPreview = searchParams.preview === 'true'
     const status = searchParams.status || 'published'
   
     // Fetch with preview support
     const response = await getBySlug('my-content', slug, {
       isPreview,
       status
     })
   
     return { content: response.data, isPreview, status }
   }
   

Security Notes

• Preview Secret: Change the default secret in production
• CSP Headers: Only allow embedding from your Strapi domain
• Environment Variables: Use VITE_ prefix for client-side access
• Validation: Preview API validates secret before redirecting

Testing

Test Preview Mode

1. Add ?preview=true&status=draft to any URL
2. Should see orange preview banner
3. Content should be fetched with draft status

Test Preview Route

Visit: /preview?secret=your-secret&path=/&status=draft Should redirect to: /?preview=true&status=draft

Live Preview (Strapi Growth/Enterprise)

The implementation includes Live Preview communication:

• Real-time Updates: Content changes in Strapi trigger page refresh
• Interactive Editing: Double-click content to edit (with proper source maps)
• Source Maps: Enable with strapi-encode-source-maps header

Troubleshooting

Preview Not Working

• Check environment variables match between frontend and Strapi
• Verify CSP headers allow iframe embedding
• Ensure Strapi admin config is properly deployed

Content Not Loading

• Check Strapi API authentication
• Verify content type exists and has proper permissions
• Check browser network tab for failed requests

Preview Banner Not Showing

• Verify URL contains preview=true parameter
• Check component import in Layout
• Ensure data is being passed correctly

Development vs Production

Development

• Use http://localhost:3000 as CLIENT_URL
• Preview works locally during development

Production

• Update CLIENT_URL to your production domain
• Ensure HTTPS for iframe embedding
• Update preview secret for security