A plugin for Strapi CMS that adds a preview button and live view button to the content manager edit view.
- New button in content manager sidebar which links the user to a preview or live view of a frontend app view.
- Customize which content types should use the preview button.
- Customize endpoints for draft and published URLs.
- Support collection and single types.
yarn add strapi-plugin-preview-button@latestInclude the following variables in your application's .env file.
STRAPI_PREVIEW_SECRET=YOURSECRET
STRAPI_PREVIEW_DRAFT_URL=https://example.com/api/preview
STRAPI_PREVIEW_PUBLISHED_URL=https://example.com
You must generate your own secret key to use for STRAPI_PREVIEW_SECRET which will also be given to the frontend app later.
With draftAndPublish mode enabled for a content type, a preview button will render when the entry is in a draft state while a live view button will render when it is in a published state.
It is not required to enable draftAndPublish for content types using this plugin. The live view button will still display to conveniently redirect a user to the live version of the page.
| property | type (default) | description |
|---|---|---|
| contentTypes | array ([]) |
An array of objects describing which content types should use the preview button. |
An array of objects describing which content types should use the preview button.
Each object in the array requires a uid prop at minimum. If you are configuring a collection type, the targetField is also required but it is optional with single types. The field name "slug" is recommended for the targetField value because it represents the unique part of the URL path, but it is not required.
Consider we have Page and Post content types, where each has a uid field named slug and entries created for each, with the slug values set to my-page and my-post. Here is the minimum required config.
module.exports = {
'preview-button': {
enabled: true,
config: {
contentTypes: [
{
uid: 'api::page.page',
targetField: 'slug',
},
{
uid: 'api::post.post',
targetField: 'slug',
},
],
},
},
};In this example, our pages and posts will be routed differently in our frontend app. To help with this, props like basePath and query may be configured for variations between draft and published URLs.
module.exports = {
'preview-button': {
enabled: true,
config: {
contentTypes: [
{
uid: 'api::page.page',
targetField: 'slug',
},
{
uid: 'api::post.post',
targetField: 'slug',
draft: {
query: {
type: 'post',
},
},
published: {
basePath: 'blog',
},
},
],
},
},
};This configuration will result in the following preview URLs for Page and Post. Notice in the URLs below how env vars and config settings work together to build the final URLs.
https://example.com/api/preview?slug=my-page&secret=YOURSECRET
https://example.com/api/preview?slug=my-post&type=post&secret=YOURSECRET
https://example.com/my-page
https://example.com/blog/my-post
Consider we have an About single type to serve as our "About" page. Unlike collection types, we don't necessarily need an editable targetField with our model if we know for sure it will always be /about. You can still provide the targetField if you want to keep this value editable in Strapi.
module.exports = {
'preview-button': {
enabled: true,
config: {
contentTypes: [
{
uid: 'api::about.about',
draft: {
query: {
slug: 'about',
},
},
published: {
basePath: 'about',
},
},
],
},
},
};This configuration will result in the following preview URLs for About.
https://example.com/api/preview?slug=aboute&secret=YOURSECRET
https://example.com/about
The Open live view button will lead directly to the live page URL.
The Open draft preview button should lead to an endpoint that redirects to the appropriate preview page based on the query parameters passed to it.
Before granting access to the preview, the values for STRAPI_PREVIEW_SECRET should be compared and validated between both Strapi and the frontend app.
For in-depth examples and instructions, please reference the links below to learn how this can be accomplished with Next.js and Strapi.