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 more than 17 years of experience. Plone has very interesting features that are still appealing to developers and users alike as customizable content types, hierarchical URL object traversing and a complex content workflow powered by a granular permissions model that allows you to build from simple websites to complex huge intranets. Volto exposes all that 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, which is inspired on Plone 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 (10.x)
- Python 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
We recommend Plone as backend of choice for Volto. You can easily bootstrap a ready Docker Plone container with all the dependencies and ready for Volto use:
$ docker run --rm -it -p 8080:8080 kitconcept/plone.restapi:latest
Once inside your Volto project folder:
$ yarn start
Go to http://localhost:3000 in your browser.
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.
For Volto development you need all the requirements already mentioned on the Quick Start section.
$ git clone https://github.com/plone/volto.git
$ yarn
Either using a Docker image
$ docker run --rm -it -p 8080:8080 kitconcept/plone.restapi:latest
or running Plone on your machine (advanced), additional dependencies might be required only for Plone experienced integrators/developers. Check the Plone Installation Documentation.
$ cd api
$ ./bootstrap.sh
It still doesn't support the full API/features that Plone provides.
$ docker-compose -f g-api/docker-compose.yml up -d
$ yarn start
Go to http://localhost:3000 in your browser.
$ yarn test
$ make test-acceptance
Alternatively individual acceptances test case files can be run with a pure Robot Framework virtual environment, assuming that backend and frontend is running
$ docker-compose -f api/docker-compose.yml up
$ yarn && yarn build && RAZZLE_API_PATH=http://localhost:55001/plone yarn start:prod
$ virtualenv robotenv --no-site-packages
$ robotenv/bin/pip install robotframework robotframework-seleniumlibrary robotframework-webpack
$ robotenv/bin/pybot tests/test_login.robot
Another alternative for developing Robot Framework acceptane tests is to use Jupyter notebook
$ make -C api/jupyter
Please refer this link for all usages.
Run Prettier through the CLI with this script. Run it without any arguments to see the options.
To format a file in-place, use --write. You may want to consider committing your code before doing that, just in case.
prettier [opts] [filename ...]
In practice, this may look something like:
prettier --single-quote --trailing-comma es5 --write "{app,__{tests,mocks}__}/**/*.js"
Plugins are automatically loaded if you have them installed in your package.json. Prettier plugin package names must start with @prettier/plugin- or prettier-plugin- to be registered.
If the plugin is unable to be found automatically, you can load them with:
- The CLI, via the --plugin flag:
prettier --write main.foo --plugin=./foo-plugin
- Or the API, via the plugins field:
prettier.format("code", {
parser: "foo",
plugins: ["./foo-plugin"]
});
You can use Prettier with a pre-commit tool. This can re-format your files that are marked as "staged" via git add before you commit.
- Lint staged Use Case: Useful for when you need to use other tools on top of Prettier (e.g. ESLint)
Install it along with husky:
yarn add lint-staged husky --dev
and add this config to your package.json:
{
"scripts": {
"precommit": "lint-staged"
},
"lint-staged": {
"*.{js,json,css,md}": ["prettier --write", "git add"]
}
}
- Pretty-quick Use Case: Great for when you want an entire file formatting on your changed/staged files.
yarn add pretty-quick husky --dev
and add this config to your package.json:
{
"scripts": {
"precommit": "pretty-quick --staged"
}
}
More Precommit hooks can be found here
First, start up Guillotina:
docker-compose -f g-api/docker-compose.yml up -d
Then, run the tests:
PYTHONPATH=$(pwd)/tests_guillotina env/bin/pybot -v BROWSER:headlesschrome tests_guillotina;
MIT License. Copyrights hold the Plone Foundation. See LICENSE.md for details.