2. Quick Start¶
2.1. Set Up Volto Project¶
To create our first volto project we will youse the volto generator tool. To install that on your machine run:
$ npm install -g yo $ npm install -g @plone/generator-volto
After thats done create a folder where 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 folder run:
$ 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 your Volto site we will be using the Plone docker image with all extensions that are necessary to work with Volto installed. Start Plone by running
docker run -p 8080:8080 plone/plone-backend:6.0.0a1
Keep that process running during the whole training in one of your console windows.
Open the classic Plone interface on you
localhost:8080. As we need to install a few addons before we can use it eith volto click on the "Andvanced" button. From the options there select "Plone 6 Frontend (Default content on homepage)" and "Plone 6 Frontend (plone.volto)". Also unselect "Example content". After that you can continue by clicking "Create Plone Page".
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 make sure all dependencies necessary to run Voltoare 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)