7. Inside Volto#
As with any large complex application, there are multiple facets to Volto, and some of them may be strange or unfamiliar to developers used only to Plone classic development. But, if viewed in the context of the wider modern frontend development world, Volto is no longer a strange beast.
To list some of the things that Volto is:
A Single Page Application, based on React that runs in client browsers
An Express-powered HTTP server that can completely generate full HTML pages server-side. See the Server Side Rendering chapter for more.
A CMS UI to interact with Plone, the backend
An extensive, extensible development API to easily develop custom websites and capabilities for the CMS UI
There are two ways of running Volto:
Standalone (to develop Volto itself)
as a Volto Project (for your own custom use, to develop a new website).
Running Volto standalone is simple: make a clone of Volto from Github, run
yarn to download its dependencies, then
yarn start to simply start Volto.
This is useful for developing Volto, but it is not the way to use it, if you
want to develop your own custom Volto website.
yarn add react-slick
to make the react-slick library available to your Volto project.
You can use this Volto Project scaffold to develop a complete Volto-powered
website, without needing to do anything else. You can use the
<root>/src/ folder to
<root>/theme folder to customize the
Volto theme and create your custom look and feel.
7.1. Volto codebase#
Looking inside Volto's source code, we find several points of interest:
express-middlewarefolders contain code for the Express HTTP server, with the counterparts
start-client.jsxfor the browser client bundle.
componentsfolder is the biggest, with two separate branches:
themefolder hosts components that are more basic and are always available to the anonymous visitors, while the
managebranch hosts more advanced components, the CMS UI, blocks, widgets, etc.
reducersare the centralized data store. See the Redux chapter for more details.
theme.jsand the parent folder
themeare Volto's Pastanaga theme, materialized as a Semantic-UI theme.
7.2. Deep dive into Volto#
To start Volto in development mode, we do
yarn start. If you peek inside Volto's
the script that's executed for that, you'll notice it simply says
razzle start. So, when we start Volto, we actually start Razzle. See the
Razzle chapter for more details.
Running in development mode provides automatic reload of changed code (hot reloading) and better debugging (unminified source code maps, etc).
Razzle provides two entrypoints for webpack: the server and the client bundles.
7.2.1. Volto HTTP server#
The server uses Expressjs uses
provide server-side rendering of the HTML pages. From these generated HTML
pages, the client bundle will be loaded by the browsers.
The HTTP server is extensible via Express middleware and Volto provides an API to declare and load them from Volto Projects and Addons.
7.2.2. Volto as Single Page Application#
Once the browser loads the client bundle, Volto mounts a location-based React
Router and uses the App component as the top level component, plus other
defined child routes. The View render component will be found and instantiated.
src/routes.js module to see all available routes. Notice that the
View component is close to the last in the list of default routes,
this allows routes to take precedence over the content matching.
On a content page view, the
View component is rendered by App's router
matching. Once the
View component is mounted, it triggers a network call to
fetch the JSON representation of the current context content. Based on the
response content, it will lookup for a view component that matches the content
(so, for example, news items can have their own custom views, etc).
DefaultView, which is used when there's no custom content-type based view
component found, is also "blocks-enabled". It will lookup two keys in the
blocks_layout. See the Volto Blocks
chapter for more details.
The main View component has a "route detector" that will trigger the
getContent action whenever the route (window location) changes, so new
content will be fetched and a new view is rendered acordingly.