Search icon
Strapi plugin logo for Webtools

Webtools

🔗 Unique, flexible and autogenerated URLs for your Strapi managed web content.

Strapi Webtools

Unique, flexible and autogenerated URLs for your Strapi managed web content.

NPM Version Monthly download on NPM CI build status codecov.io

This plugin is in BETA state

✨ Features

  • Unique URLs Every page will get their own unique path
  • Auto generated Automatically generated based on a pattern
  • Flexible Overwrite single URLs
  • Frontend router Get any page by it's unique path from the public API
  • Auto slugify The URLs will automatically be slugified to ensure valid paths

⏳ Installation

Install the plugin in your Strapi project.

# using yarn
yarn add @pluginpal/webtools-core

# using npm
npm install @pluginpal/webtools-core --save

After successful installation you have to rebuild the admin UI so it'll include this plugin. To rebuild and restart Strapi run:

# using yarn
yarn build
yarn develop

# using npm
npm run build
npm run develop

Enjoy 🎉

🖐 Requirements

Complete installation requirements are the exact same as for Strapi itself and can be found in the Strapi documentation.

Supported Strapi versions:

  • Strapi 4.14.6 (recently tested)
  • Strapi ^4.x

(This plugin may work with older Strapi versions, but these are not tested nor officially supported at this time.)

We recommend always using the latest version of Strapi to start your new projects.

💡 Usage

This plugin is specifically designed for usage in Strapi managed websites. Hence the name webtools. The plugin offers a variety of functionalities which you'll have to manually enable in the admin interface.

See below a screenshot of how to enable webtools for a given collection type.

Enable webtools

💡 URL alias

At the core of the plugin is URL alias. It's the idea that every page of a given collection type represents a page in your website frontend. Each of those pages will have a unique URL path which can be altered on the backend. Then all those URL paths can be used in your frontend to setup dynamic routing.

See below a screenshot of the URL alias popup that's used to set the unique path of your page.

URL alias

🔌 URL pattern

To create dynamic URLs this plugin uses URL patterns. The URL pattern will be used to generate unique URLs based on the data available.

You can add URL patterns in the settings section of the plugin.

1
/pages/[my-title-field]

Fields can be injected in the pattern by escaping them with [].

The following field types are allowed in a pattern:

  • id
  • uid
  • string

See below a screenshot of the URL pattern creation form in Strapi.

URL pattern

📺 Frontend router

To make it all work you'll have to make use of the frontend router to setup dynamic routing based on the URL aliases in Strapi.

REST

1
2
await fetch(`${API_URL}/api/webtools/router?path=/about-page`);
// GET /api/webtools/router?path=/about-page

✨ #StrapiPluginWeek

This plugin was initially made as an entry to the Strapi Plugin Week hackathon. Back then it went under the name "URL alias". Since then a lot has changed and the plugin has been renamed to Webtools where the URL alias feature is just a part of it.

See the demo video.

🔗 Links

🌎 Community support

📝 Resources

Install now

npm install @pluginpal/webtools-core

STATS

26 GitHub stars44 weekly downloads

Last updated

17 days ago

Strapi Version

>=4.0.0 <5.0.0-0

Author

github profile image for TODO
TODO

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.