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.

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

🎨 Populate Creator fields

The plugin allows you to populate the creator fields in the /router endpoint. To enable this feature; go to your content-types schema.json and enable the populateCreatorFields.

1
2
3
4
5
6
7
{
  // ...
  "options": {
    "populateCreatorFields": true,
  },
  // ...
}

The official Strapi documentation provides more information on how to use this feature: https://docs.strapi.io/dev-docs/api/rest/guides/populate-creator-fields

📺 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

• NPM package
• GitHub repository

🌎 Community support

• For general help using Strapi, please refer to the official Strapi documentation.
• You can contact me on the Strapi Discord channel.

📝 Resources

• MIT License