Document Actions

Rob Gietema: How to create your own Volto site!

Talk by Rob Gietema at the Plone Conference 2019 in Ferrara.

We will go through the Volto training in about forty minutes.

To create a new Volto project, you need nvm and yarn, and then type the following:

$ npx @plone/create-volto-app my-volto-app
  • You can override public resources like the logo, styling, etc, from Volto.
  • Volto uses Semantic UI. For example, it uses the BreadCrumb component.
  • Theming: in theme.config you use the Pastanaga theme by default, but can pick and choose other themes for some elements. You can do a lot of theming just by changing some variables in less. less instead of sass is needed by Semantic UI for conditional imports.
  • You can override a component by copying the folder structure of that component from Volto to a customizations folder.
  • We use yarn i18n to extract all translatable strings into .po and then .json files.
  • Volto uses the DraftJS rich text editor. You can configure the buttons that are shown.
  • As is usual in React, Volto uses actions and reducers based on Redux.

If you want to learn about Volto, see the full Volto training.

Question: why don't you use React hooks?

Answer: This was introduced one and a half year ago in React, allowing to use more functions instead of classes. Quite cool. But then we would have two ways to do the same thing, and we try not to do that in Volto. We try not to jump on those hooks right away. If we switch after a while, we want to switch the whole code base.

Question: how do React developers experience this?

Answer: we did some presentations in React conferences. Reaction is that it looks really nice, we get positive feedback. I wrote a small reference implementation of the needed backend in node, and was finished in a few days, so people can do that too.