Plone 6 Frontend Add-on

Plone 6 Frontend Add-on#

The frontend_addon template creates a Volto add-on package for the Plone 6 frontend.

uvx cookieplone frontend_addon

Template ID

frontend_addon

Group

Add-ons

Folder in cookieplone-templates

templates/add-ons/frontend

Folder generated with the default answers

volto-add-on

Requirements#

Before its first question, the template checks for:

  • Node.js 18, 19, 20, 21, 22, or 24.

  • git.

Questions#

Cookieplone asks these questions in this order. A default in {{ }} is computed from earlier answers.

Field

Question

Default

Choices

Validation

title

Add-on Title

Volto Add-on

—

—

frontend_addon_name

Frontend Add-on Name

{{ cookiecutter.title | slugify }}

—

cookieplone.validators.npm_package_name

description

Description

A new add-on for Volto

—

—

author

Author

Plone Community

—

—

email

Author E-mail

collective@plone.org

—

email format

github_organization

GitHub Username or Organization

collective

—

—

npm_package_name

NPM Package Name

{{ cookiecutter.frontend_addon_name }}

—

cookieplone.validators.npm_package_name

use_prerelease_versions

Should we use prerelease versions?

{{ 'No' | use_prerelease_versions }}

Yes (Yes), No (No)

—

volto_version

Volto Version

{{ cookiecutter.use_prerelease_versions | latest_volto }}

—

cookieplone.validators.volto_version

initialize_ci

Add CI configuration?

true

—

—

initialize_documentation

Add documentation scaffold?

true

—

—

What your answers change#

The post-generation hook keeps the test configuration that matches volto_version: Vitest for Volto 19 or later, Jest for earlier versions. For Volto versions earlier than 19, it also removes .pnpmfile.cjs.

The template runs these sub-templates:

Sub-template

Generates

When

docs/starter

docs: a documentation scaffold

initialize_documentation is yes

ide/vscode

.vscode: Visual Studio Code settings

initialize_ci is yes

ci/gh_frontend_addon

.github: GitHub Actions workflows

initialize_ci is yes

Generated files#

With the default answers, the template generates these files, three levels deep:

volto-add-on/
├── .cookieplone.json
├── .eslintrc.js
├── .github/
│   ├── dependabot.yml
│   ├── instructions/
│   │   ├── docs.instructions.md
│   │   ├── general/
│   │   └── volto.instructions.md
│   └── workflows/
│       ├── changelog.yml
│       ├── config.yml
│       └── main.yml
├── .gitignore
├── .npmignore
├── .npmrc
├── .pnpmfile.cjs
├── .prettierignore
├── .prettierrc
├── .storybook/
│   ├── main.js
│   └── preview.jsx
├── .stylelintrc
├── .vscode/
│   ├── extensions.json
│   ├── launch.json
│   └── settings.json
├── cypress/
│   ├── .gitkeep
│   ├── support/
│   │   ├── commands.js
│   │   ├── e2e.js
│   │   └── index.ts
│   ├── tests/
│   │   ├── .gitkeep
│   │   └── example.cy.js
│   └── tsconfig.json
├── cypress.config.js
├── docs/
│   ├── .gitignore
│   ├── .readthedocs.yaml
│   ├── .vale.ini
│   ├── docs/
│   │   ├── _static/
│   │   ├── _templates/
│   │   ├── concepts/
│   │   ├── conf.py
│   │   ├── glossary.md
│   │   ├── how-to-guides/
│   │   ├── index.md
│   │   ├── reference/
│   │   ├── robots.txt
│   │   └── tutorials/
│   ├── LICENSE.md
│   ├── Makefile
│   ├── pyproject.toml
│   ├── README.md
│   └── styles/
│       └── config/
├── Makefile
├── mrs.developer.json
├── package.json
├── packages/
│   └── volto-add-on/
│       ├── .gitignore
│       ├── .release-it.json
│       ├── babel.config.js
│       ├── CHANGELOG.md
│       ├── locales/
│       ├── news/
│       ├── package.json
│       ├── public/
│       ├── src/
│       ├── towncrier.toml
│       ├── tsconfig.json
│       └── vitest.config.mjs
├── pnpm-workspace.yaml
├── README.md
└── volto.config.js

Next steps#

The generated README.md lists nvm, Node.js 24 with pnpm, Make, and git as prerequisites, and Docker as optional. From the add-on folder, install the add-on:

make install

Start a Docker-based backend, then, in another terminal, start Volto at http://localhost:3000:

make backend-docker-start
make start
Contents