Volto is a React-based frontend for content management systems, currently supporting three backend implementations: Plone, Guillotina and a NodeJS reference implementation.
Plone is a CMS built on Python with over 17 years of experience.
Plone has very interesting features that appeal to developers and users alike, such as customizable content types, hierarchical URL object traversing and a sophisticated content workflow powered by a granular permissions model. This allows you to build anything from simple websites to enterprise-grade intranets.
Volto exposes all these features and communicates with Plone via its mature REST API. Volto has the ability of being highly themable and customizable.
Volto also supports other APIs like Guillotina, a Python resource management system, inspired by Plone and using the same basic concepts like traversal, content types and permissions model.
Last but not least, it also supports a Volto Nodejs-based backend reference API implementation that demos how other systems could also use Volto to display and create content through it.
First get all the requirements installed on your system.
- Node.js LTS (12.x)
- Python 3.7.x / 2.7.x or
- Docker (if using the Plone/Guillotina docker images)
Create a new Volto project by using the create-volto-app utility.
It will bootstrap a Volto project in a folder of your choice with all the required boilerplate to start customizing your Volto site.
$ npm install -g yarn
$ npm install -g @plone/create-volto-app
$ create-volto-app myvoltoproject
$ cd myvoltoproject
Although we install and use yarn, the create-volto-app tool still needs to be
installed using npm -g because yarn has a different implementation of
global installs.
We recommend Plone as backend of choice for Volto.
You can bootstrap a ready Docker Plone container with all the dependencies and ready for Volto use:
$ docker run -it --rm --name=plone -p 8080:8080 -e SITE=Plone -e ADDONS="kitconcept.voltodemo" -e ZCML="kitconcept.voltodemo.cors" ploneor as an alternative if you have experience with Plone and you have all the
dependencies installed on your system, you can use the supplied buildout in the
api folder by issuing the command:
$ make build-backendOnce inside your Volto project folder:
$ yarn startGo to http://localhost:3000 in your browser.
You can try a Volto online demo in https://volto.kitconcept.com
Volto is actively developed since 2017 and used in production since early 2018 on the following websites:
- VHS Ehrenamtsportal (Website to help volunteers that help refugees for the German Adult Education Association, developed by kitconcept GmbH)
- Zeelandia (Corporate website for one of the leading backery ingrediences manufactors in Germany, developed by kitconcept GmbH)
- Excellence at Humboldt-Universität zu Berlin (Website for the excellence initiative of the Humboldt University Berlin, developed by kitconcept GmbH)
- Please create a new issue or pull request to add your Volto-site here!
You can find the (beta) documentation in http://docs.voltocms.com
A detailed training on how to create your own website using Volto is available as part of the Plone training docs at https://training.plone.org/5/volto/index.html.
Rob Gietema / Víctor Fernández de Alba - Volto Extensibility Story
Víctor Fernández de Alba - Theming Volto
Timo Stollenwerk / Víctor Fernández de Alba / Ramon Navarro - Volto Case Studies
Timo Stollenwerk - Reinventing Plone, Roadmap to the Modern Web
Volto works well with any modern (and updated) browser, including their mobile flavors: Chrome, Firefox, Safari, Edge.
We do not guarantee that browsers who were deprecated by their vendors (e.g. Internet Explorer 11) will be supported by Volto in the future.
You can find the upgrade guide here: https://docs.voltocms.com/upgrade-guide/
For Volto development you need all the requirements already mentioned on the Quick Start section.
$ git clone https://github.com/plone/volto.git$ yarnEither using a Docker image
$ docker run -it --rm --name=plone -p 8080:8080 -e SITE=Plone -e ADDONS="kitconcept.voltodemo" -e ZCML="kitconcept.voltodemo.cors" ploneor using the convenience makefile command:
$ make start-backend-dockeror running Plone on your machine (advanced), additional dependencies might be required, only for Plone experienced integrators/developers. Check the Plone Installation Documentation.
$ make build-backendIt still doesn't support the full API/features that Plone provides.
$ docker-compose -f g-api/docker-compose.yml up -dor using the convenience makefile command:
$ make start-backend-docker-guillotina$ yarn startBrowse to http://localhost:3000 in your browser.
$ yarn testFor ease the release process, a package that helps with the process is
installed: release-it.
https://www.npmjs.com/package/release-it
For using it and start a release you need to fulfill the requirements:
- Have permissions to push on master branch
- Have permissions on the @plone org on npmjs.com
- Have a environment variable (
GITHUB_TOKEN) with a GitHub personal token to write the Release page on GitHub (https://www.npmjs.com/package/release-it#github-releases)
Then the command for release:
$ yarn releasea dry-release command for testing the output is also available:
$ yarn dry-releaseVolto uses Cypress for browser-based acceptance testing.
Run acceptance tests (with the Plone backend):
$ yarn ci:cypress:runRun acceptance tests (with the Guillotina backend):
$ yarn ci:cypress:run:guillotinaWhen writing new acceptance tests you usually want to minimize the time it takes to run the tests.
To do so, start three individual terminal sessions for running the Plone backend, the Volto frontend and the acceptance tests.
Start the Plone backend:
$ make start-test-backendStart the Volto frontend:
$ make start-test-frontendOpen Cypress and start acceptance tests:
$ make start-testGo to the cypress/integration folder to see existing tests.
This directory is hot reloaded with your changes as you write the tests. For more information on how to write Cypress tests:
https://docs.cypress.io
If you want to use Guillotina as backend to run the tests you should run:
$ yarn ci:start-api-plone-guillotinaMIT License. Copyrights hold the Plone Foundation.
See LICENSE.md for details.