28. Extending Volto with a custom add-on package – Mastering Plone 6 development

Extending Volto with a custom add-on package

28. Extending Volto with a custom add-on package#

Frontend chapter

See Create a backend package for extending Plone with backend add-ons.

As soon as you have repeating needs in Volto projects, you will want to move the code to an add-on that can be applied to multiple projects. One of several ways to start with a new add-on is the Yeoman generator we already used to initiate a Volto app.

If you haven't prepared Yeoman and the generator:

npm install -g yo
npm install -g @plone/generator-volto

Create a Volto sandbox app:

yo @plone/volto sandbox-for-addon

You see a dialog like this

1yo @plone/volto sandbox-for-addon
2Getting latest Volto version
3Retrieving Volto's yarn.lock
4Using latest released Volto version: 11.1.0
5? Project description A Volto-powered Plone frontend
6? Would you like to add addons? true
7? Addon name, plus extra loaders, like: volto-addon:loadExtra,loadAnotherExtra volto-custom-addon
8? Would you like to add another addon? false
9? Would you like to add workspaces? true

Go to the app folder:

cd sandbox-for-addon

You now have a Volto app configured for an add-on. An add-on is a Node package. It will live in the folder: src/addons/volto-custom-addon.

Create your add-on with the generator:

yo @plone/volto:addon volto-custom-addon

Check package.json to include the add-on in your app:

"private": true,
"workspaces": [
    "src/addons/*"
],
"addons": [
    "volto-custom-addon"
],

Install and start

make install
yarn start

Note

Step to the next chapter and come back here for a release. We will create a new block type in the next chapter Extending Volto With a FAQ Block Type. We will do this in an add-on to apply the feature to multiple projects.

Note

Coming back here with the new block type, you can now release the new add-on to npm. @greenthumb is your space. See https://www.npmjs.com/package/release

28.1. Enrich an existing project with your new released add-on#

You already released your add-on. Go on with package.json and add your new add-on.

Update package.json:

"addons": [
  …
  "volto-custom-addon"
],
"workspaces": [
  "src/addons/*"
],
"dependencies": {
  …
  "volto-custom-addon": "1.0.1"
},

Modify versions as necessary.

Install new add-on and restart Volto:

$ make install
$ yarn start

28.2. Create a new project with your new released add-on#

yo @plone/volto my-volto-project --addon collective/volto-custom-addon

Install and start

$ make install
$ yarn start

28.3. Footnotes#

yarn workspaces

Workspaces are a new way to set up your package architecture. It allows you to setup multiple packages in such a way that you only need to run yarn install once to install all of them in a single pass.

mrs.developer

Pull a package from git and set it up as a dependency for the current project codebase.

Contents