Strapi plugin logo for Web Page Previewer

Web Page Previewer

Without actually visiting the website, you can see a live preview of the web page by using this plugin.

thumbnail for Web Page Previewer

Getting Started

The plugin can be used in strapi version above 4.4 (versions that support custom fields).

To Install

  1. Go into your strapi project.

  2. Run the npm command npm i strapi-plugin-website-preview or yarn add strapi-plugin-website-preview

  3. The plugin will be added to your strapi project.

Inorder to achieve the url of the website developing it must be specified in the .env file as STRAPI_ADMIN_FRONT_END_URL. This url need to be the base url of the website.

Adding & Accessing URL

  1. Add this to the STRAPI_ADMIN_FRONT_END_URL="YOUR_BASE_URL_HERE" .env file of your project.

  2. Run the command npm build or yarn build

How To Use

  1. Create a new field form a content type.

  2. Select custom fields.

  3. Page Preview field will appear there.

  4. Select this field and name it accordingly ("page_preview" is used commonly for more understanding) and save.

  5. Select the content type from the content manager.

  6. Add end point of the page in the page_preview field and save.

  7. Click on the preview button then the page will be pop up.

How To Add URL

To Add an external url you will need to alter the middleware.js file as follows.

Add this code into config/middlewares.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
module.exports  = [
    'strapi::errors',
    {
        name:  "strapi::security",
        config:  {
           contentSecurityPolicy:  {
           useDefaults:  true,
           directives:  {
             'frame-src':["'self'","https://www.wikipedia.org/"],
             'frame-ancestors':  null,
             upgradeInsecureRequests:  null,
                                   },
                          },
       frameguard:  false,
                 },
    },
    'strapi::cors',
    'strapi::poweredBy',
    'strapi::logger',
    'strapi::query',
    'strapi::body',
    'strapi::session',
    'strapi::favicon',
    'strapi::public',
];

Install now

npm install strapi-plugin-website-preview

STATS

No GitHub star yet83 weekly downloads

Last updated

49 days ago

Strapi Version

4.0.0 and above

Author

github profile image for Vinu Babu
Vinu Babu

Useful links

Create your own plugin

Check out the available plugin resources that will help you to develop your plugin or provider and get it listed on the marketplace.