2. Quick Start#
2.1. Set Up Volto Project#
To create our first volto project we will youse the volto generator tool. First create a folder in which your project will be located.You can call it whatever your projectname shall be. In our case we will use
volto-hands-on-training. Inside that directory run:
npm init yo @plone/volto
The dialogue in the console will ask you for the name of your project and wether you want to install any addons. You can skip both by pressing the
enter button, as we will use the default name and dont want to use any addons for the training.
2.2. Build environments#
We need to build two environments.
Start two terminal sessions, one for each environment, Plone and Yarn, and a third session to issue git and other shell commands.
In each terminal session you should be in your project folder
2.2.1. Plone environment#
To run our Volto site, we will use the Plone 6 Docker image. You can start it by running the following command:
docker run -p 8080:8080 plone/plone-backend:6.0.0a1
Keep that process running during the whole training in one of your terminal windows.
Before we can begin, you need to create a new Plone instance with the required add-ons installed.
Open the classic Plone interface on
As we need to install a few add-ons before we can use it with Volto, do not click the :guilabel:
Create a new Plone site button.
Instead use the :guilabel:
Advanced button to get to the add-on selection.
From the options there, select :guilabel:
Plone 6 Frontend (Default content on homepage) and :guilabel:
Plone 6 Frontend (plone.volto).
Also unselect :guilabel:
Continue by clicking :guilabel:
Create Plone Page.
You might need to wait for a few minutes until the page is created.
If you are already comfortable with setting up classic Plone sites you can also set up a new Plone environment on your machine. To be compatible with Volto it needs to have the following addon products installed:
2.2.2. Yarn environment#
To ensure all required dependencies for starting Volto are installed run:
You can now start up your Volto instance by running the following command:
2.3. Volto source code#
When developing Volto you will find yourself looking quite often at the Volto source code to see how things are done, the code syntax, and how to clone or override components.
For convenience, a symlink to a copy of the Volto code is set up inside
node_modules when you run
yarn in your Volto project folder.
You will find this copy of Volto in the
2.4. Recommended plugins#
No matter which integrated development environment (IDE) you use, you should also install these plugins:
prettier-stylelint (for VSCode)