Develop Volto core
Develop Volto core#
This chapter describes how to develop Volto core and its libraries, packages, and apps as open source software contributions.
To create a full Plone project with both frontend and backend, see Create a project instead.
The Volto core repository has the shape of a monorepo, where "mono" means "single" and "repo" is short for "repository". This means that several apps and libraries related to each other are stored in the same repository. They are managed together but released individually. This allows the code to be shared effectively, and unifies tracking of changes across all of the apps and libraries.
This monorepo uses pnpm as a package manager, extensively using the workspaces feature.
It's organized in two folders, depending on whether it's a library (package) or an app.
They are located in the
They are declared as pnpm workspaces.
This means they can be managed from the root, using the package manager
For more information about pnpm workspaces, read the documentation of pnpm workspaces.
Volto has the following folder structure.
│ ├─ plone
│ ├─ nextjs
│ └─ remix
│ ├─ volto
│ ├─ client
│ ├─ components
│ ├─ registry
│ ├─ types
│ ├─ coresandbox
│ ├─ generator-volto
│ ├─ scripts
│ ├─ tsconfig
│ ├─ volto-guillotina
│ ├─ volto-slate
│ └─ volto-testing
To set up a Volto core development environment, your system must satisfy the following pre-requisites.
An operating system that runs all the requirements mentioned. Most UNIX-based operating systems are supported, including many Linux distributions, macOS, or Windows Subsystem for Linux (WSL) on Windows. A UNIX-based operating system is recommended.
Windows alone is not recommended because it does not support GNU make. If you get Plone to run on Windows alone, please feel free to document and share your process.
When developing Volto core, pnpm is required. When developing a project using Plone, Yarn or other package managers may be used.
The following terminal session commands use
bash for the shell.
Adapt them for your flavor of shell.
Create your shell profile, if it does not exist.
Download and run the
nvminstall and update script, and pipe it into
curl -o- https://raw.githubusercontent.com/creationix/nvm/v0.39.5/install.sh | bash
Source your profile. Alternatively close the session and open a new one.
Verify that the
nvmversion is that which you just installed or updated:
We recommend that you install Node.js using nvm. Alternatively you can install Node.js using Homebrew or other package installer.
Install or update the supported LTS versions of Node.js, then activate the version supported in Volto.
nvm install --lts nvm use --lts
Verify that the supported version of Node.js is activated.
corepack prepare pnpm@latest --activate
npm install -g pnpm@latest
Verify the latest version.
Compare the output to the latest pnpm release number.
Make comes installed on most Linux distributions.
On macOS, you must first install Xcode, then install its command line tools.
On Windows, it is strongly recommended to Install Linux on Windows with WSL, which will include
Finally, it is a good idea to update your system's version of
make, because some distributions, especially macOS, have an outdated version.
Use your favorite search engine or trusted online resource for how to update
Set up the environment#
You need to perform the steps in this section only once to set up your environment.
Clone the Volto repo, and change your working directory to the cloned repository:
git clone https://github.com/plone/volto.git
Install the frontend dependencies.
Start the backend and Volto#
Every time you want to run Volto for core development, you will need to create two terminal sessions, one for the backend and one for the frontend. For both sessions, change your working directory to the root of your Volto clone.
In the first session, start the backend.
When you run this command for the first time, it will download Docker images, configure the backend, and start the backend. Browse to the backend running at http://localhost:8080.
In the second session, start the frontend.
Browse to the frontend running at http://localhost:3000.
To stop either the backend or frontend, use ctrl-c.
pnpm has the concept of
Every package or app located in the
apps folders are declared as a pnpm workspace.
They can be managed using the pnpm
--filter feature, with either of the following commands:
pnpm --filter @plone/volto start
pnpm --filter @plone/registry build
The Volto core code is located in the
Changed in version 18.x.x: Since December 2023, the Volto repository is now a monorepo.
Volto is located now in the
You can run all the usual commands from inside that folder, but replacing
pnpm, since they have similar commands and features.
For example, to start Volto:
You can also run commands of specific workspaces using the
--filter feature as shown in the previous section.
Developing other libraries#
If a package is a dependency of another package in the monorepo, and it's declared as a workspace, they can be declared as usual in the
package.json as follows:
By default, the use of TypeScript is required in Plone frontend libraries, Volto itself being an exception.
The monorepository consists of several core libraries.
Volto project generator#
@plone/generator-volto is a Yeoman generator that helps you set up Volto via command line.
It generates all the boilerplate needed to start developing a Plone Volto project.
It is used by CookieCutter Plone Starter, the recommended way to set up Plone projects.
The generator features an
addon template for scaffolding Volto add-ons in your projects.
@plone/scripts is the placeholder of tools used by Volto and its add-ons, such as the
i18n internationalization scripts.
@plone/types is the package that contains the TypeScript types in used in Plone.
Slate support for Volto#
@plone/volto-slate is the glue package that provides support for the Slate library in Volto.
Plone supports several frontend implementations, the main one being Volto as the default frontend and reference React-based implementation. There are plans to support implementations in other frontends, including NextJS and Remix.
The default frontend and reference React-based implementation in Plone is Volto.
apps folder you'll find a Volto project scaffolding that uses Volto as a library.
This is the same as the one that you'll have when running the Volto generator or
Volto uses serveral libraries to support development.
@plone/volto-coresandbox is a support library used mainly for testing purposes.
It provides fixtures to bootstrap projects with configurations different than the default one.
It is used by the acceptance tests to set up different test fixtures, such as
Volto testing package#
@plone/testing stub library helps set up the testing libraries used by Volto without having to install the whole Volto package.
It is mainly used in CI to reduce installation times.
@plone/volto-guillotina is the support library used to interact with Guillotina as the Plone backend.