Search icon
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 FRONT_END_URL. This url need to be the base url of the website.

Adding & Accessing URL

  1. Add this to the FRONT_END_URL="YOUR_BASE_URL_HERE" .env file of your project.
  2. Add webpack.config.js file into src/admin and paste this content there.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
// ./src/admin/webpack.config.js
'use strict';

module.exports = (config, webpack) => {
// Note: we provide webpack above so you should not `require` it
// Perform customizations to webpack config
// Important: return the modified config

config.plugins.push(
new webpack.DefinePlugin({
FRONT_END_URL: JSON.stringify(process.env.FRONT_END_URL),
})
)
return config;
};
  1. Run the command npm build or yarn build

This file is added in order to access the FRONT_END_URL in the plugin.

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.

Install now

npm install strapi-plugin-website-preview

STATS

No GitHub star yet92 weekly downloads

Last updated

345 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.