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

Extending Volto with a custom add-on package

29. 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 cookieplone Cookiecutter template.

If you haven't prepared 'cookieplone' already, see plone/cookieplone for installation.

'cookieplone' creates an add-on that comes with a Volto app. So you can start a Volto app right after creation of the add-on and proceed with developing your add-on.

pipx run cookieplone

Go to the app folder and run the embedding app with:

make start

You now have a Volto app running which includes the new add-on.

Open packages/your-add-on and start coding.

Note

Step to the next chapter and come back here for a release. We will create a new block type in the next chapter Creating a custom block. 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.

make release

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

You already released your add-on. Go on with package.json and volto.config.js and include your new add-on.

Update package.json:

"dependencies": {
  "@plone/volto": "workspace:*",
  "@plone/registry": "workspace:*",
  "volto-ploneconf": "workspace:*",
  "@greenthumb/volto-qa-block": "^1.0.0"
},

Update volto.config.js:

const addons = ['@greenthumb/volto-qa-block', 'volto-ploneconf'];
const theme = '';

module.exports = {
  addons,
  theme,
};

Modify versions as necessary.

Install new add-on and restart Volto:

make install
make start

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

This is the same procedure as creating an add-on.

pipx run cookieplone

Follow the steps from previous section Enrich an existing project with your new released add-on.

Contents