@plone/volto NPM

Volto

Introduction

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.

Quick Start

First get all the requirements installed on your system.

Prerequisites

Node.js LTS (10.x)
Python 2.7.x or
Docker (if using the Plone/Guillotina docker images)

Create Volto App

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.

Bootstrap the Plone API backend

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 --rm -it -p 8080:8080 kitconcept/plone.restapi:latest

or 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-backend

Start Volto

Once inside your Volto project folder:

$ yarn start

Browsing

Go to http://localhost:3000 in your browser.

Demo

You can try a Volto online demo in https://volto.kitconcept.com

Documentation

You can find the (beta) documentation in http://docs.voltocms.com

Training

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.

Talks

Plone Conference Tokyo 2018

Rob Gietema - Volto

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

Browser support

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.

Volto Development

For Volto development you need all the requirements already mentioned on the Quick Start section.

Checkout the Volto repository

$ git clone https://github.com/plone/volto.git

Install dependencies

$ yarn

Install a backend

Plone (recommended)

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

Guillotina (experimental)

It still doesn't support the full API/features that Plone provides.

$ docker-compose -f g-api/docker-compose.yml up -d

Run frontend

$ yarn start

Browsing

Browse to http://localhost:3000 in your browser.

Testing

$ yarn test

Releasing

For 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 release

a dry-release command for testing the output is also available:

$ yarn dry-release

Acceptance testing

Volto uses Cypress for browser-based acceptance testing.

Run acceptance tests (with the Plone backend):

$ yarn ci:cypress:run

Run acceptance tests (with the Guillotina backend):

$ yarn ci:cypress:run:guillotina

Writing new acceptance tests

When 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:

$ yarn ci:start-api-plone

Start the Volto frontend:

$ RAZZLE_API_PATH=http://localhost:55001/plone yarn start

Open Cypress to run and develop the acceptance tests:

$ yarn cypress:open

Go 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

Running the acceptance tests with Guillotina backend

If you want to use Guillotina as backend to run the tests you should run:

$ yarn ci:start-api-plone-guillotina

License

MIT License. Copyrights hold the Plone Foundation.

See LICENSE.md for details.

volto plone react

@babel/core @babel/plugin-proposal-export-default-from @babel/plugin-proposal-export-namespace-from @babel/plugin-proposal-json-strings @babel/plugin-proposal-nullish-coalescing-operator @babel/plugin-proposal-throw-expressions @babel/plugin-syntax-export-namespace-from @babel/runtime @babel/types @loadable/babel-plugin @loadable/component @loadable/server @loadable/webpack-plugin @plone/scripts @testing-library/cypress @testing-library/jest-dom @testing-library/react @testing-library/react-hooks autoprefixer axe-core babel-eslint babel-plugin-add-module-exports babel-plugin-lodash babel-plugin-react-intl babel-plugin-root-import babel-preset-razzle bundlewatch circular-dependency-plugin classnames commander connected-react-router crypto-random-string css-loader cypress cypress-axe cypress-file-upload debug decorate-component-with-props deep-freeze dependency-graph detect-browser diff draft-js draft-js-block-breakout-plugin draft-js-buttons draft-js-import-html draft-js-inline-toolbar-plugin draft-js-plugins-editor draft-js-plugins-utils draftjs-filters eslint eslint-config-airbnb eslint-config-prettier eslint-config-react-app eslint-import-resolver-alias eslint-import-resolver-babel-plugin-root-import eslint-plugin-flowtype eslint-plugin-import eslint-plugin-jsx-a11y eslint-plugin-prettier eslint-plugin-react eslint-plugin-react-hooks express filesize github-slugger glob history hoist-non-react-statics html-webpack-plugin http-proxy-middleware husky identity-obj-proxy image-extensions immutable is-hotkey is-url jest-file jotai jwt-decode less less-loader linkify-it lint-staged locale lodash lodash-move lodash-webpack-plugin mini-css-extract-plugin moment object-assign pofile postcss postcss-flexbugs-fixes postcss-less postcss-load-config postcss-loader postcss-overrides postcss-scss prepend-http prettier pretty-bytes prismjs promise-file-reader prop-types query-string razzle razzle-dev-utils razzle-plugin-bundle-analyzer razzle-plugin-scss rc-time-picker react react-anchor-link-smooth-scroll react-animate-height react-beautiful-dnd react-cookie react-dates react-detect-click-outside react-dnd react-dnd-html5-backend react-dom react-dropzone react-fast-compare react-image-gallery react-intersection-observer react-intl react-intl-redux react-medium-image-zoom react-portal react-redux react-router react-router-config react-router-dom react-router-hash-link react-select react-select-async-paginate react-share react-side-effect react-simple-code-editor react-sortable-hoc react-test-renderer react-toastify react-transition-group react-virtualized redraft redux redux-actions redux-connect redux-devtools-extension redux-localstorage-simple redux-mock-store redux-thunk rrule semantic-ui-less semantic-ui-react semver serialize-javascript slate slate-hyperscript slate-react start-server-and-test style-loader stylelint stylelint-config-idiomatic-order stylelint-config-prettier stylelint-prettier superagent svg-loader svgo-loader terser-webpack-plugin tlds undoo universal-cookie universal-cookie-express use-deep-compare-effect uuid webpack webpack-dev-server webpack-node-externals xmlrpc yarnhook

@infinitebrahmanuniverse/nolb-_plo @everything-registry/sub-chunk-726 volto-datablocks @adeweb-be/volto-leaflet-block visit-montechiarugolo

10 months ago

10 months ago

12 months ago

11 months ago

12 months ago

11 months ago

11 months ago

11 months ago

10 months ago

10 months ago

11 months ago

10 months ago

10 months ago

10 months ago

12 months ago

12 months ago

11 months ago

11 months ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

1 year ago

1 year ago

1 year ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago