DoubleShore.Umbraco.HeadlessPreview 1.0.6

🚀 Umbraco Headless Preview

Instant frontend preview for your headless Umbraco setup

Built with ❤️ by Double Shore - Your trusted Umbraco specialists.

✨ What is this?

DoubleShore.Umbraco.HeadlessPreview seamlessly connects Umbraco's backoffice to your frontend application, enabling content editors to preview unpublished changes in real-time with a single click.

🎯 Perfect for Headless CMS Setups

When you decouple Umbraco from your frontend, you lose the native preview functionality. This package brings it back - better than ever.

🌟 Features

📦 Installation

dotnet add package DoubleShore.Umbraco.HeadlessPreview

Or via NuGet Package Manager:

Install-Package DoubleShore.Umbraco.HeadlessPreview

⚡ Quick Start

1. Configure Umbraco

Add to your appsettings.json:

{
  "HeadlessPreview": {
    "BaseUrl": "https://your-frontend.com",
    "PreviewSecret": "your-super-secret-key",
    "PreviewEndpoint": "/api/preview",
    "PreviewLabel": "Preview on Frontend",
    "UseLocalization": true
  }
}

2. Implement Frontend Endpoint

Create a preview API endpoint on your frontend. See examples below for each framework.

3. Preview!

Click "Preview on Frontend" in Umbraco's content editor to see your unpublished changes.

🌍 Localization

To localize the preview label:

1. Create a dictionary item in Umbraco with key HeadlessPreview_Label
2. Add translations for each language
3. Set PreviewLabel to #HeadlessPreview_Label in appsettings.json

{
  "HeadlessPreview": {
    "PreviewLabel": "#HeadlessPreview_Label",
    "UseLocalization": true
  }
}

🔧 Configuration Options

🖼️ Frontend Examples

Next.js (App Router)

// app/api/preview/route.ts
import { draftMode } from 'next/headers';
import { redirect } from 'next/navigation';

export async function GET(request: Request) {
  const { searchParams } = new URL(request.url);
  const secret = searchParams.get('secret');
  const path = searchParams.get('path');

  if (secret !== process.env.PREVIEW_SECRET) {
    return new Response('Invalid token', { status: 401 });
  }

  const draft = await draftMode();
  draft.enable();
  redirect(path || '/');
}

Nuxt 3

// server/api/preview.ts
export default defineEventHandler(async (event) => {
  const query = getQuery(event);
  
  if (query.secret !== process.env.PREVIEW_SECRET) {
    throw createError({ statusCode: 401, message: 'Invalid token' });
  }

  // Enable preview mode via cookie
  setCookie(event, 'preview-mode', 'true', { path: '/' });
  
  return sendRedirect(event, query.path as string || '/');
});

Astro

// src/pages/api/preview.ts
import type { APIRoute } from 'astro';

export const GET: APIRoute = async ({ request, cookies, redirect }) => {
  const url = new URL(request.url);
  const secret = url.searchParams.get('secret');
  const path = url.searchParams.get('path');

  if (secret !== import.meta.env.PREVIEW_SECRET) {
    return new Response('Invalid token', { status: 401 });
  }

  cookies.set('preview-mode', 'true', { path: '/' });
  return redirect(path || '/');
};

🤝 Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

1. Fork the repository
2. Create your feature branch (git checkout -b feature/amazing-feature)
3. Commit your changes (git commit -m 'Add amazing feature')
4. Push to the branch (git push origin feature/amazing-feature)
5. Open a Pull Request

📄 License

This project is licensed under the MIT License - see the LICENSE file for details.

🏢 About Double Shore

Double Shore is a digital consultancy specializing in Umbraco development, headless CMS architectures, and modern web solutions.

Our Services

• 🔧 Umbraco Development - Custom implementations and migrations
• 🚀 Headless CMS - Decoupled architectures with modern frontends
• 📈 Performance Optimization - Making your sites blazing fast
• 🎓 Training & Consulting - Upskill your team

Get in Touch

• 🌐 Website: double-shore.com
• 📧 Email: info@double.pt
• 💼 LinkedIn: Double Design and Development

<p align="center"> <strong>Double Shore</strong> <br> <em>Digital Solutions Built with Clarity</em> </p>