plone/volto

React-based frontend for the Plone Content Management System

Volto - the default Plone 6 frontend

Introduction

Volto is a ReactJS-based frontend for the Plone Content Management System. It is the default frontend starting with the Plone 6 release.

Plone is a CMS built on Python with more than 20 years of history and experience.

Plone has features that appeal to developers and users alike, such as an intuitive editing interface, customizable content types, hierarchical organization, and a sophisticated 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 REST API.

Volto features the Pastanaga editor, a modern block-based content layout editor. It is extensible and customizable, so you can adapt the provided default blocks to meet your requirements, or build new ones.

Volto is extensible using add-ons. You can build your own or choose from the community released ones:

• Volto Add-ons in NPM
• Volto Awesome

Demo

You can try a Volto online demo at https://demo.plone.org/.

Create a Volto project

To start a new project using Volto, follow the Plone installation documentation.

Documentation

You can find the latest documentation at https://6.docs.plone.org/.

For links to trainings and videos, see Other learning resources.

Supported Plone, Python, and Plone REST API versions

See Plone, Python, and Plone REST API compatibility

See the Plone Release Schedule for details of maintenance and support.

Supported Node.js versions

See Node.js version policy.

Supported browsers

See Supported browsers.

Contributing

To contribute to the Volto project by writing code, documentation, translations, and so on, please read Contributing to Plone and Contributing to Volto.

For newcomers to Volto, Plone, or open source software, you must read and follow First-time contributors.

Since December 2023, this repository has a monorepo structure. Volto itself is treated as a library and you can find it in the packages/volto folder.

Contributors

License

MIT License. Copyrights held by the Plone Foundation.

See LICENSE.md for details.

Volto in production

Volto has been actively developed since 2017. It has been used in production since 2018 on numerous websites.

The authoritative source of the list of Volto websites in production is maintained at Awesome Volto.

The Plone Marketing Team copy-pastes its content on a quarterly basis into They use Plone 6.

To ensure your website gets the greatest exposure, add it both to Awesome Volto and this README.

• ASP Area Nord (Website of the Public company of personal services of the Modena municipalities in the north area. Developed by RedTurtle, 2021)
• Baccanale Imola (Baccanale is a food fair that happens every year in Imola, Italy. Developed by RedTurtle, 2020)
• Biblioteche Pianura Est (Website of the Associated libraries of eastern plain. Developed by RedTurtle, 2021)
• BISE (Biodiversity Information System for Europe, developed by Eau de Web, 2019)
• Camera di Commercio dell'Umbria (Website Chamber of Commerce of Umbria. Developed by RedTurtle, 2021)
• Camera di Commercio di Reggio Emilia (Website Chamber of Commerce of Reggio Emilia. Developed by RedTurtle, 2021)
• Comune di Camposanto (Website of the Municipality of Camposanto. Developed by RedTurtle, 2021)
• Comune di Cantagallo (Website of the Municipality of Cantagallo. Developed by RedTurtle, 2021)
• Comune di Medolla (Website of the Municipality of Medolla. Developed by RedTurtle, 2021)
• Comune di Mirandola (Website of the Municipality of Mirandola. Developed by RedTurtle, 2021)
• Comune di Modena (Website of the Municipality of Modena. Developed by RedTurtle, 2020)
• Comune di San Possidonio (Website of the Municipality of San Possidonio. Developed by RedTurtle, 2021)
• Comune di Vaiano (Website of the Municipality of Vaiano. Developed by RedTurtle, 2021)
• Comune di Vernio (Website of the Municipality of Vernio. Developed by RedTurtle, 2021)
• Debabarreneko mankomunitatea (Website of the Commonwealth of Debabarrena, community of municipalities to centralize waste handling services, developed by CodeSyntax, 2022)
• Debako Udala / Ayuntamiento de Deba (Website of the municipality of Deba, developed by CodeSyntax, 2022)
• European Environment Agency (Website of the European Environment Agency. Developed by Eau de Web, 2023)
• Energy Climate Union portal for Europe (Thematic website focusing on European strides towards mitigating climate change, developed by Eau de Web, 2020)
• Excellence at Humboldt-Universität zu Berlin (Website for the excellence initiative of the Humboldt University Berlin, developed by kitconcept GmbH, 2019)
• Forest Information System for Europe (Thematic website focusing on European forests, developed by Eau de Web, 2019)
• Forschungszentrum Jülich (Website for Forschungzentrum Jülich, which is one of the largest research institutions in Europe, developed by kitconcept GmbH, 2022)
• German Aerospace Center (DLR) (The German Aerospace Center (DLR) is the Federal Republic of Germany's research center for aeronautics. With more than 10.000 employees and a yearly budget of more than 1 billion euros, it is one of the largest research institutions in Germany, developed by kitconcept GmbH, 2023)
• Helmholtz-Institut Erlangen-Nürnberg für Erneuerbare Energien (HI-ERN) (Website for HI ERN, a research institution for renewable energies, developed by kitconcept GmbH, 2022)
• Humboldt Labor (The Humboldt Lab is a website where the Humboldt University Berlin presents its latest research projects and findings. Developed by WLDX and kitconcept GmbH, 2020)
• ILPO (the registration portal of continuous learning at the University of Jyväskylä. Developed by University of Jyväskylä, 2022)
• Industrial Emissions portal for Europe (Thematic website focusing on European industrial emissions, developed by Eau de Web, 2020)
• Jobfamilie MEDICE (Carrer website for MEDICE Arzneimittel Pütter GmbH & Co. KG), developed by Werkbank GmbH, 2020)
• Lanku (Website for Lanku Kultur Zerbitzuak, a company offering cultural services and improvised Basque verse singing sessions across the Basque Country, developed by CodeSyntax, 2023)
• Leibniz Institute for Science and Mathematics Education (IPN) (Website of the IPN, a research institute dedicated to issues related to learning and teaching of science, mathematics and computer science in and outside of schools, developed by Starzel, 2023)
• MEDICE Webseite (Website for MEDICE Arzneimittel Pütter GmbH & Co. KG), developed by Werkbank GmbH, 2020)
• Nuova Voce Ecologista (Website of Nuova Voce Ecologista, an Italian green Party, 2020)
• Osaka University (Osaka University is considered one of the most prestigious universities in Japan. Developed by CMScom, 2021)
• ResOU (ResOU is introducing official researched releases by the University of Osaka, Japan. Developed by CMScom, 2020)
• Stradanove (Website of the Department of Youth Policies of the Municipality of Modena, developed by RedTurtle, 2020)
• Study guide at University of Jyväskylä (Static website where Volto is used as a headless CMS for authoring additional content, 2020)
• Talke Carrer Website (Carrer website for Talke, one of the leading a chemical and petrochemical logistics companies in Germany, developed by kitconcept GmbH, 2020)
• UEU (Website for Udako Euskal Unibertsitatea, a non-profit University offering all its service only in Basque: courses, publications, ... developed by CodeSyntax, 2023)
• Unione dei Comuni della Val Bisenzio (Website of the Municipality union of Val Bisenzio. Developed by RedTurtle, 2021)
• VHS Ehrenamtsportal (Website to help volunteers that help refugees for the German Adult Education Association, developed by kitconcept GmbH, 2018)
• VisitModena (Tourist website of the Municipality of Modena, developed by RedTurtle, 2020)
• WISE-Freshwater (WISE-Freshwater, the Freshwater Information System for Europe. Developed by Eau de web for the European Environmental Agency, 2021)
• Zeelandia (Corporate website for one of the leading bakery ingredients manufacturers in Germany, developed by kitconcept GmbH, 2019)

Open-source websites built with Volto

The following websites have been built with Volto. You can find their complete source code by following their links. Please note that complex websites are built on top of Volto add-ons, and most of the time they're just an empty shell for the add-ons. You should check the dependencies in their package.json for more details.

• Forest Information System for Europe - Volto project for Forest Information System for Europe website
• Freshwater Information System for Europe - Volto project for Freshwater Information System for Europe website
• European Industrial Emissions Portal - Volto project for European Industrial Emissions Portal website
• Biodiversity Information System for Europe - Volto project for Biodiversity Information System for Europe website
• EEA Main Website frontend - Volto project for European Environment Agency
• Climate and energy in the EU - Volto project for Climate and energy in the EU website
• volto-bise - A Volto project packaged as an addon. It provides Theming using a razzle.extend.js provided alias.
• design-volto-theme Volto theme for Italian Public Administration
• 2021.ploneconf.org - Volto project for Plone Conference 2021 site
• 2022.ploneconf.org - Volto project for Plone Conference 2022 site
• 2023.ploneconf.org - Volto project for Plone Conference 2023 site
• plone.org.br - Volto project for the Brazilian Plone Community
• nsw-design-system-plone6-kit - NSW Design System Plone 6 Kit Volto project for NSW.gov.au sites
• volto-centraalmuseum-theme - Volto project for the Centraal Museum & Rietveld made for INTK.
• volto-eea-design-system - EEA Design System Plone 6 Kit Volto project for European Environment Agency web sites
• volto-eea-website-theme - EEA Plone 6 Volto Theme for European Environment Agency web sites
• volto-eea-kitkat - A known good set of Volto add-ons to be used within all EEA projects and beyond, made for European Environment Agency
• volto-rietveldschroderhuis-theme - Volto project for the Rietveld Schröder House made for INTK.
• volto-zeeuwsmuseum-theme - Volto project for the Zeeuws Museum made for INTK.

volto's Issues

Make pages folderish and plone site pagish

The rest api doesn't have support to select an item as the default view. This concept is has long been a discussion and should be removed. For this to work we need the pages to be folderish so we don't need a default view anymore but the page can have rich text and also contain items. The plone site root object also needs to have rich text so we can edit the front page.

yarn dev fails with "Can't resolve '...site.variables' in '...node_modules/semantic-ui-less'

[development      ] [build:dev:client] ERROR in ./node_modules/css-loader?{"importLoaders":2,"sourceMap":true,"localIdentName":"[name]__[local]___[hash:base64:5]"}!./node_modules/less-loader/dist/cjs.js?{"outputStyle":"expanded","sourceMap":true}!./node_modules/semantic-ui-less/semantic.less
[development      ] [build:dev:client] Module build failed:
[development      ] [build:dev:client]
[development      ] [build:dev:client] /* Packaged site.variables */
[development      ] [build:dev:client] @import "@{themesFolder}/@{site}/globals/site.variables";
[development      ] [build:dev:client] ^
[development      ] [build:dev:client] Can't resolve './themes/../../pastanaga-theme/pastanaga/site/globals/site.variables' in '/Users/timo/workspace/react/plone-react/node_modules/semantic-ui-less'
[development      ] [build:dev:client]       in /Users/timo/workspace/react/plone-react/node_modules/semantic-ui-less/theme.less (line 19, column 0)
[development      ] [build:dev:client]  @ ./node_modules/semantic-ui-less/semantic.less 4:14-112 18:2-22:4 19:20-118
[development      ] [build:dev:client]  @ ./src/client.jsx
[development      ] [build:dev:client]  @ multi webpack-hot-middleware/client?path=http://localhost:4301/__webpack_hmr webpack/hot/only-dev-server ./src/client.jsx
[development      ] [run:dev:server  ] [BABEL] Note: The code generator has deoptimised the styling of "/Users/timo/workspace/react/plone-react/dist/server.js" as it exceeds the max of "500KB".
[development      ] [run:dev:server  ] Warning: Accessing PropTypes via the main React package is deprecated, and will be removed in  React v16.0. Use the latest available v15.* prop-types package from npm instead. For info on usage, compatibility, migration and more, see https://fb.me/prop-types-docs
[development      ] [run:dev:server  ] Wed, 18 Oct 2017 10:48:14 GMT plone-react:server:info  ==> 🚧  Webpack development server listening on port 4300

Errors while setting up “plone-react”.

Setting up the backend through plone-react itself ends up with an error:
Error: Couldn't find a distribution for 'zope.i18n[zcml]==4.2.0'

Instead of the above, If I installed Plone seperately, and only ran the frontend:
Cmd for running the backend: sudo ./plonectl fg (plone/zinstance/bin)
Cmd for running the frontend: yarn dev (plone-react)
Both the backend and the frontend seem to run fine, without any errors. But when I browse to http://localhost:4300/. I get the following on the page.
Something went wrong: Cannot read property 'replace' of undefined

Here is the entire log for sudo ./plonectl fg

x@y:/opt/plone/zinstance/bin$ sudo ./plonectl fg
instance: 2018-02-25 15:14:31 INFO ZServer HTTP server started at Sun Feb 25 15:14:31 2018
	Hostname: 0.0.0.0
	Port: 8080
2018-02-25 15:14:31 INFO Zope Set effective user to "plone_daemon"
2018-02-25 15:14:33 WARNING ZODB.blob (15814) Blob dir /opt/plone/zinstance/var/blobstorage/ has insecure mode setting
2018-02-25 15:14:36 INFO Plone OpenID system packages not installed, OpenID support not available
2018-02-25 15:14:39 INFO Zope Ready to handle requests

Here is the entire log for yarn dev:

x@y:~/Prog/Plone/Contrib/plone-react$ yarn dev
yarn run v1.3.2
$ NODE_ENV=development npm-run-all dev:build
$ npm-run-all -ln clear:dist prepare:dev:build i18n:build development
[clear:dist       ] 
[clear:dist       ] > @plone/[email protected] clear:dist /home/adithya/Prog/Plone/Contrib/plone-react/package.json
[clear:dist       ] > rm -rf dist 
[clear:dist       ] 
[clear:dist       ] $ rm -rf dist
[prepare:dev:build] 
[prepare:dev:build] > @plone/[email protected] prepare:dev:build /home/adithya/Prog/Plone/Contrib/plone-react/package.json
[prepare:dev:build] > universal-webpack --settings ./webpack/universal-webpack-settings.js prepare 
[prepare:dev:build] 
[prepare:dev:build] $ universal-webpack --settings ./webpack/universal-webpack-settings.js prepare
[i18n:build       ] 
[i18n:build       ] > @plone/[email protected] i18n:build /home/adithya/Prog/Plone/Contrib/plone-react/package.json
[i18n:build       ] > babel-node scripts/i18n.js build 
[i18n:build       ] 
[i18n:build       ] $ babel-node scripts/i18n.js build
[development      ] 
[development      ] > @plone/[email protected] development /home/adithya/Prog/Plone/Contrib/plone-react/package.json
[development      ] > npm-run-all -ln --parallel build:dev:client build:dev:server run:dev:server 
[development      ] 
[development      ] $ npm-run-all -ln --parallel build:dev:client build:dev:server run:dev:server
[development      ] [build:dev:client] 
[development      ] [build:dev:client] > @plone/[email protected] build:dev:client /home/adithya/Prog/Plone/Contrib/plone-react/package.json
[development      ] [build:dev:client] > better-npm-run run_dev_client 
[development      ] [build:dev:client] 
[development      ] [build:dev:server] 
[development      ] [build:dev:server] > @plone/[email protected] build:dev:server /home/adithya/Prog/Plone/Contrib/plone-react/package.json
[development      ] [build:dev:server] > better-npm-run build_dev_server 
[development      ] [build:dev:server] 
[development      ] [run:dev:server  ] 
[development      ] [run:dev:server  ] > @plone/[email protected] run:dev:server /home/adithya/Prog/Plone/Contrib/plone-react/package.json
[development      ] [run:dev:server  ] > better-npm-run run_dev_server 
[development      ] [run:dev:server  ] 
[development      ] [build:dev:server] $ better-npm-run build_dev_server
[development      ] [run:dev:server  ] $ better-npm-run run_dev_server
[development      ] [build:dev:client] $ better-npm-run run_dev_client
[development      ] [build:dev:server] running better-npm-run in /home/adithya/Prog/Plone/Contrib/plone-react
[development      ] [build:dev:client] running better-npm-run in /home/adithya/Prog/Plone/Contrib/plone-react
[development      ] [run:dev:server  ] running better-npm-run in /home/adithya/Prog/Plone/Contrib/plone-react
[development      ] [build:dev:client] Executing script: run_dev_client
[development      ] [build:dev:client] 
[development      ] [run:dev:server  ] Executing script: run_dev_server
[development      ] [run:dev:server  ] 
[development      ] [build:dev:server] Executing script: build_dev_server
[development      ] [build:dev:server] 
[development      ] [build:dev:client] to be executed: babel-node webpack/server.dev.js 
[development      ] [run:dev:server  ] to be executed: nodemon --watch ./src/server.jsx --watch ./src --watch ./dist/server.js ./src/start-server.js --exec babel-node 
[development      ] [build:dev:server] to be executed: webpack --config ./webpack/webpack.config.server.dev.entry.js --watch --hot --colors --display-error-details 
[development      ] [run:dev:server  ] [nodemon] 1.14.11
[development      ] [run:dev:server  ] [nodemon] to restart at any time, enter `rs`
[development      ] [run:dev:server  ] [nodemon] watching: ./src/server.jsx /home/adithya/Prog/Plone/Contrib/plone-react/src/**/* ./dist/server.js
[development      ] [run:dev:server  ] [nodemon] starting `babel-node ./src/start-server.js`
[development      ] [run:dev:server  ] [nodemon] Internal watch failed: watch /home/adithya/Prog/Plone/Contrib/plone-react/src/components/theme/App/__snapshots__ ENOSPC
[development      ] [run:dev:server  ] error Command failed with exit code 1.
[development      ] [run:dev:server  ] info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
[development      ] [build:dev:server] 
[development      ] [build:dev:server] Webpack is watching the files…
[development      ] [build:dev:server] 
[development      ] [run:dev:server  ] ("/home/adithya/Prog/Plone/Contrib/plone-react/dist/server.js" not found)
[development      ] [run:dev:server  ] (waiting for the file to be generated; e.g. as a result of a Webpack build)
[development      ] [run:dev:server  ] ("/home/adithya/Prog/Plone/Contrib/plone-react/dist/server.js" not found)
[development      ] [run:dev:server  ] (waiting for the file to be generated; e.g. as a result of a Webpack build)
[development      ] [run:dev:server  ] ("/home/adithya/Prog/Plone/Contrib/plone-react/dist/server.js" not found)
[development      ] [run:dev:server  ] (waiting for the file to be generated; e.g. as a result of a Webpack build)
[development      ] [run:dev:server  ] ("/home/adithya/Prog/Plone/Contrib/plone-react/dist/server.js" not found)
[development      ] [run:dev:server  ] (waiting for the file to be generated; e.g. as a result of a Webpack build)
[development      ] [run:dev:server  ] ("/home/adithya/Prog/Plone/Contrib/plone-react/dist/server.js" not found)
[development      ] [run:dev:server  ] (waiting for the file to be generated; e.g. as a result of a Webpack build)
[development      ] [run:dev:server  ] ("/home/adithya/Prog/Plone/Contrib/plone-react/dist/server.js" not found)
[development      ] [run:dev:server  ] (waiting for the file to be generated; e.g. as a result of a Webpack build)
[development      ] [run:dev:server  ] ("/home/adithya/Prog/Plone/Contrib/plone-react/dist/server.js" not found)
[development      ] [run:dev:server  ] (waiting for the file to be generated; e.g. as a result of a Webpack build)
[development      ] [build:dev:server] Hash: 6542c9da98a9e5748b99
[development      ] [build:dev:server] Version: webpack 3.10.0
[development      ] [build:dev:server] Time: 14232ms
[development      ] [build:dev:server]         Asset     Size  Chunks                    Chunk Names
[development      ] [build:dev:server]     server.js   856 kB       0  [emitted]  [big]  server
[development      ] [build:dev:server] server.js.map   734 kB       0  [emitted]         server
[development      ] [build:dev:server]   favicon.ico  15.1 kB          [emitted]         
[development      ] [build:dev:server] overrides.css  8.39 kB          [emitted]         
[development      ] [build:dev:server]   [25] ./src/helpers/index.js 1.52 kB {0} [built]
[development      ] [build:dev:server]   [27] ./src/config.js 418 bytes {0} [built]
[development      ] [build:dev:server]   [38] ./src/reducers/index.js 3.54 kB {0} [built]
[development      ] [build:dev:server]   [48] ./src/constants/Languages.js 246 bytes {0} [built]
[development      ] [build:dev:server]   [49] ./src/reducers/userSession/userSession.js 1.84 kB {0} [built]
[development      ] [build:dev:server]   [50] ./src/server.jsx 6.7 kB {0} [built]
[development      ] [build:dev:server]   [59] ./dist/locales/nl.json 8.54 kB {0} [built]
[development      ] [build:dev:server]   [60] ./dist/locales/de.json 8.55 kB {0} [built]
[development      ] [build:dev:server]   [61] ./dist/locales/en.json 8.09 kB {0} [built]
[development      ] [build:dev:server]   [62] ./src/helpers/AuthToken/AuthToken.js 1.52 kB {0} [built]
[development      ] [build:dev:server]   [63] ./src/helpers/Url/Url.js 8.17 kB {0} [built]
[development      ] [build:dev:server]   [67] ./src/error.jsx 844 bytes {0} [built]
[development      ] [build:dev:server]   [68] ./src/routes.jsx 3.76 kB {0} [built]
[development      ] [build:dev:server]  [169] ./src/store.js 2.65 kB {0} [built]
[development      ] [build:dev:server]  [172] ./src/middleware/index.js 542 bytes {0} [built]
[development      ] [build:dev:server]     + 179 hidden modules
[development      ] [run:dev:server  ] ("/home/adithya/Prog/Plone/Contrib/plone-react/dist/webpack-chunks.json" not found)
[development      ] [run:dev:server  ] (waiting for the file to be generated; e.g. as a result of a Webpack build)
[development      ] [run:dev:server  ] ("/home/adithya/Prog/Plone/Contrib/plone-react/dist/webpack-chunks.json" not found)
[development      ] [run:dev:server  ] (waiting for the file to be generated; e.g. as a result of a Webpack build)
[development      ] [run:dev:server  ] ("/home/adithya/Prog/Plone/Contrib/plone-react/dist/webpack-chunks.json" not found)
[development      ] [run:dev:server  ] (waiting for the file to be generated; e.g. as a result of a Webpack build)
[development      ] [run:dev:server  ] ("/home/adithya/Prog/Plone/Contrib/plone-react/dist/webpack-chunks.json" not found)
[development      ] [run:dev:server  ] (waiting for the file to be generated; e.g. as a result of a Webpack build)
[development      ] [run:dev:server  ] ("/home/adithya/Prog/Plone/Contrib/plone-react/dist/webpack-chunks.json" not found)
[development      ] [run:dev:server  ] (waiting for the file to be generated; e.g. as a result of a Webpack build)
[development      ] [run:dev:server  ] ("/home/adithya/Prog/Plone/Contrib/plone-react/dist/webpack-chunks.json" not found)
[development      ] [run:dev:server  ] (waiting for the file to be generated; e.g. as a result of a Webpack build)
[development      ] [run:dev:server  ] ("/home/adithya/Prog/Plone/Contrib/plone-react/dist/webpack-chunks.json" not found)
[development      ] [run:dev:server  ] (waiting for the file to be generated; e.g. as a result of a Webpack build)
[development      ] [run:dev:server  ] ("/home/adithya/Prog/Plone/Contrib/plone-react/dist/webpack-chunks.json" not found)
[development      ] [run:dev:server  ] (waiting for the file to be generated; e.g. as a result of a Webpack build)
[development      ] [run:dev:server  ] ("/home/adithya/Prog/Plone/Contrib/plone-react/dist/webpack-chunks.json" not found)
[development      ] [run:dev:server  ] (waiting for the file to be generated; e.g. as a result of a Webpack build)
[development      ] [run:dev:server  ] ("/home/adithya/Prog/Plone/Contrib/plone-react/dist/webpack-chunks.json" not found)
[development      ] [run:dev:server  ] (waiting for the file to be generated; e.g. as a result of a Webpack build)
[development      ] [run:dev:server  ] ("/home/adithya/Prog/Plone/Contrib/plone-react/dist/webpack-chunks.json" not found)
[development      ] [run:dev:server  ] (waiting for the file to be generated; e.g. as a result of a Webpack build)
[development      ] [run:dev:server  ] ("/home/adithya/Prog/Plone/Contrib/plone-react/dist/webpack-chunks.json" not found)
[development      ] [run:dev:server  ] (waiting for the file to be generated; e.g. as a result of a Webpack build)
[development      ] [run:dev:server  ] ("/home/adithya/Prog/Plone/Contrib/plone-react/dist/webpack-chunks.json" not found)
[development      ] [run:dev:server  ] (waiting for the file to be generated; e.g. as a result of a Webpack build)
[development      ] [run:dev:server  ] ("/home/adithya/Prog/Plone/Contrib/plone-react/dist/webpack-chunks.json" not found)
[development      ] [run:dev:server  ] (waiting for the file to be generated; e.g. as a result of a Webpack build)
[development      ] [run:dev:server  ] ("/home/adithya/Prog/Plone/Contrib/plone-react/dist/webpack-chunks.json" not found)
[development      ] [run:dev:server  ] (waiting for the file to be generated; e.g. as a result of a Webpack build)
[development      ] [build:dev:client] Hash: 6c3ab785d831f4c3fbfb
[development      ] [build:dev:client] Version: webpack 3.10.0
[development      ] [build:dev:client] Time: 46104ms
[development      ] [build:dev:client]                                          Asset     Size  Chunks                    Chunk Names
[development      ] [build:dev:client]     icons.eot?dbc1ef8ba83ec7f4f34cb4a368193841  54.9 kB          [emitted]         
[development      ] [build:dev:client]     flags.png?9c74e172f87984c48ddf5c8108cabe67  28.1 kB          [emitted]         
[development      ] [build:dev:client]          df45b7de0654df9fd07d53ad002e18ba.woff  54.8 kB          [emitted]         
[development      ] [build:dev:client]     icons.ttf?06400145288e8e87306ccac8b852b1d4  54.7 kB          [emitted]         
[development      ] [build:dev:client]     icons.svg?022583c4ba2db2f47847c80e5511cb48   199 kB          [emitted]         
[development      ] [build:dev:client]      Logo.svg?912d8f6db45eefe8abbd58d767f048e4  14.2 kB          [emitted]         
[development      ] [build:dev:client] pastanaga.svg?08f24832ce4ee36a16d053130056f6bf  14.3 kB          [emitted]         
[development      ] [build:dev:client]                   main-6c3ab785d831f4c3fbfb.js  28.2 MB       0  [emitted]  [big]  main
[development      ] [build:dev:client]                                  overrides.css  8.39 kB          [emitted]         
[development      ] [build:dev:client]                                    favicon.ico  15.1 kB          [emitted]         
[development      ] [build:dev:client]    [0] ./node_modules/react/react.js 56 bytes {0} [built]
[development      ] [build:dev:client]    [1] ./node_modules/babel-runtime/helpers/extends.js 544 bytes {0} [built]
[development      ] [build:dev:client]   [15] (webpack)/buildin/module.js 517 bytes {0} [built]
[development      ] [build:dev:client]   [24] ./node_modules/react-intl/lib/index.es.js 51.2 kB {0} [built]
[development      ] [build:dev:client]  [937] multi webpack-hot-middleware/client?path=http://localhost:4301/__webpack_hmr webpack/hot/only-dev-server ./src/client.jsx 52 bytes {0} [built]
[development      ] [build:dev:client]  [938] (webpack)-hot-middleware/client.js?path=http://localhost:4301/__webpack_hmr 7.35 kB {0} [built]
[development      ] [build:dev:client]  [939] ./node_modules/querystring-es3/index.js 127 bytes {0} [built]
[development      ] [build:dev:client]  [942] ./node_modules/strip-ansi/index.js 161 bytes {0} [built]
[development      ] [build:dev:client]  [944] (webpack)-hot-middleware/client-overlay.js 2.21 kB {0} [built]
[development      ] [build:dev:client]  [949] (webpack)-hot-middleware/process-update.js 4.33 kB {0} [built]
[development      ] [build:dev:client]  [950] (webpack)/hot/only-dev-server.js 2.37 kB {0} [built]
[development      ] [build:dev:client]  [951] (webpack)/hot/log-apply-result.js 1.31 kB {0} [built]
[development      ] [build:dev:client]  [952] (webpack)/hot/emitter.js 77 bytes {0} [built]
[development      ] [build:dev:client]  [954] ./src/client.jsx 2.29 kB {0} [built]
[development      ] [build:dev:client]  [968] ./node_modules/babel-polyfill/lib/index.js 833 bytes {0} [built]
[development      ] [build:dev:client]     + 2196 hidden modules
[development      ] [build:dev:client] webpack built 6c3ab785d831f4c3fbfb in 46104ms
[development      ] [build:dev:client] ℹ ｢wdm｣: Hash: 6c3ab785d831f4c3fbfb
[development      ] [build:dev:client] Version: webpack 3.10.0
[development      ] [build:dev:client] Time: 46104ms
[development      ] [build:dev:client]                                          Asset     Size  Chunks                    Chunk Names
[development      ] [build:dev:client]     icons.eot?dbc1ef8ba83ec7f4f34cb4a368193841  54.9 kB          [emitted]         
[development      ] [build:dev:client]     flags.png?9c74e172f87984c48ddf5c8108cabe67  28.1 kB          [emitted]         
[development      ] [build:dev:client]          df45b7de0654df9fd07d53ad002e18ba.woff  54.8 kB          [emitted]         
[development      ] [build:dev:client]     icons.ttf?06400145288e8e87306ccac8b852b1d4  54.7 kB          [emitted]         
[development      ] [build:dev:client]     icons.svg?022583c4ba2db2f47847c80e5511cb48   199 kB          [emitted]         
[development      ] [build:dev:client]      Logo.svg?912d8f6db45eefe8abbd58d767f048e4  14.2 kB          [emitted]         
[development      ] [build:dev:client] pastanaga.svg?08f24832ce4ee36a16d053130056f6bf  14.3 kB          [emitted]         
[development      ] [build:dev:client]                   main-6c3ab785d831f4c3fbfb.js  28.2 MB       0  [emitted]  [big]  main
[development      ] [build:dev:client]                                  overrides.css  8.39 kB          [emitted]         
[development      ] [build:dev:client]                                    favicon.ico  15.1 kB          [emitted]         
[development      ] [build:dev:client]    [0] ./node_modules/react/react.js 56 bytes {0} [built]
[development      ] [build:dev:client]    [1] ./node_modules/babel-runtime/helpers/extends.js 544 bytes {0} [built]
[development      ] [build:dev:client]   [15] (webpack)/buildin/module.js 517 bytes {0} [built]
[development      ] [build:dev:client]   [24] ./node_modules/react-intl/lib/index.es.js 51.2 kB {0} [built]
[development      ] [build:dev:client]  [937] multi webpack-hot-middleware/client?path=http://localhost:4301/__webpack_hmr webpack/hot/only-dev-server ./src/client.jsx 52 bytes {0} [built]
[development      ] [build:dev:client]  [938] (webpack)-hot-middleware/client.js?path=http://localhost:4301/__webpack_hmr 7.35 kB {0} [built]
[development      ] [build:dev:client]  [939] ./node_modules/querystring-es3/index.js 127 bytes {0} [built]
[development      ] [build:dev:client]  [942] ./node_modules/strip-ansi/index.js 161 bytes {0} [built]
[development      ] [build:dev:client]  [944] (webpack)-hot-middleware/client-overlay.js 2.21 kB {0} [built]
[development      ] [build:dev:client]  [949] (webpack)-hot-middleware/process-update.js 4.33 kB {0} [built]
[development      ] [build:dev:client]  [950] (webpack)/hot/only-dev-server.js 2.37 kB {0} [built]
[development      ] [build:dev:client]  [951] (webpack)/hot/log-apply-result.js 1.31 kB {0} [built]
[development      ] [build:dev:client]  [952] (webpack)/hot/emitter.js 77 bytes {0} [built]
[development      ] [build:dev:client]  [954] ./src/client.jsx 2.29 kB {0} [built]
[development      ] [build:dev:client]  [968] ./node_modules/babel-polyfill/lib/index.js 833 bytes {0} [built]
[development      ] [build:dev:client]     + 2196 hidden modules
[development      ] [build:dev:client] ℹ ｢wdm｣: Compiled successfully.
[development      ] [run:dev:server  ] [BABEL] Note: The code generator has deoptimised the styling of "/home/adithya/Prog/Plone/Contrib/plone-react/dist/server.js" as it exceeds the max of "500KB".
[development      ] [run:dev:server  ] Warning: Accessing PropTypes via the main React package is deprecated, and will be removed in  React v16.0. Use the latest available v15.* prop-types package from npm instead. For info on usage, compatibility, migration and more, see https://fb.me/prop-types-docs
[development      ] [run:dev:server  ] Sun, 25 Feb 2018 09:46:24 GMT plone-react:server:info  ==> 🚧  Webpack development server listening on port 4300

Hope the above information is enough to solve the problem.

Volto Documentation Integration with docs.plone.org

We should set up a documentation for plone-react. mkdocs seems to be a good fit:

http://www.mkdocs.org/

We choose Markdown over ReST because Markdown is kind of a standard in the JS world.

Control panels

Create all control panels. The rest api doesn't provide most of the calls for this yet.

• Addons
• Discussion
• Theming (not needed for headless)
• Syndication
• TinyMCE (not needed for headless)
• Contentrules
• Content settings
• Dexterity content types
• Users and groups
• HTML filtering
• Errors
• Maintainance
• Configuration Registry
• Resource Registry (not needed for headless)

Add end-to-end testing

Add e2e testing setup using protractor and create tests for basic flows.

Reusable components

Is there a plan on how to separate individual functionality from the plone-react app into small reusable components?
I'd like to direct my development efforts away from mockup to something which becomes part of our Plone JavaScript strategy and I think React is currently the best fit. I'd even consider using Web Components / Polymer for the task of encapsulating components, which itself can use ReactJS.

But what is the current state regarding this topic?

Changing workflow state does not propagate to the current object

The content store does not get the change that some actions do, like the change workflow action. We should make sure that this happens.

@robgietema what will be the best approach to do this? From the reducer? Triggering another action?

Multi lingual

Create views to manage multi lingual content.

Theme customization

Theme customization should be possible. Ideally we want a script similar to create-react-app to setup a new plone-react-theme package. This package should have jbot like functionality to override react components.

Review generated markup

(note to self)
There are several classes and ids repeated all over the place, we should check for them and fix them. We have to come out with a more robust general structure, especially with Views and SubViews (views composed of other views) and the wrapping around them. The content-core class should be addressed.

Rename action

The user should be able to rename the current item using the actions menu.

Mobile toolbar

Create a toolbar for mobile devices.

Error: Cannot find module 'react-jsonschema-form'

1. Checkout repo
2. Run "yarn install"
3. Run "yarn start":

yarn start v0.19.1
$ NODE_ENV=production npm-run-all run:prod:server
yarn run v0.19.1
$ better-npm-run run_prod_server
running better-npm-run in /Users/timo/workspace/plone/plone-react
Executing script: run_prod_server

to be executed: ./node_modules/.bin/babel-node ./src/start-server-prod.js


Error: Cannot find module 'react-jsonschema-form'
    at Function.Module._resolveFilename (module.js:469:15)
    at Function.Module._load (module.js:417:25)
    at Module.require (module.js:497:17)
    at require (internal/module.js:20:19)
    at Object.module.exports.Object.defineProperty.value (/Users/timo/workspace/plone/plone-react/static/dist/server.js:6754:19)
    at __webpack_require__ (/Users/timo/workspace/plone/plone-react/static/dist/server.js:519:30)
    at fn (/Users/timo/workspace/plone/plone-react/static/dist/server.js:50:20)
    at Object.<anonymous> (/Users/timo/workspace/plone/plone-react/static/dist/server.js:6621:29)
    at __webpack_require__ (/Users/timo/workspace/plone/plone-react/static/dist/server.js:519:30)
    at fn (/Users/timo/workspace/plone/plone-react/static/dist/server.js:50:20)
    at Object.module.exports.Object.defineProperty.value (/Users/timo/workspace/plone/plone-react/static/dist/server.js:1591:15)
    at __webpack_require__ (/Users/timo/workspace/plone/plone-react/static/dist/server.js:519:30)
    at fn (/Users/timo/workspace/plone/plone-react/static/dist/server.js:50:20)
    at Object.<anonymous> (/Users/timo/workspace/plone/plone-react/static/dist/server.js:1425:21)
    at __webpack_require__ (/Users/timo/workspace/plone/plone-react/static/dist/server.js:519:30)
    at fn (/Users/timo/workspace/plone/plone-react/static/dist/server.js:50:20)

error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
ERROR: "run:prod:server" exited with 1.
error Command failed with exit code 1.
Timos-MBP:plone-react timo$```

History view

Create the history view to view changes and manage versions.

• Create history list view
• Create view revision page
• Add revert to version
• Diff view

Portlets / viewlets / tiles

We need a methodology to create layouts, either with portlets, viewlets or tiles.

Basic Mosaic editing

• Drag and drop of tiles
• Deletion of tiles
• Resizing of tiles
• Different tile templates
• Adding tiles

View/Route detection to prevent failed fetchs from backend

If you navigate to the a view or route (like the contact form) located in the root, then it tries to GET the content in the backend, and fails.

Wysiwyg editor

Create an editor based on Draft JS with medium like toolbar using semantic ui components. Be able to restrict styling for textfield tiles.

Toastr like notifications

Create a component to show "toastr" like notifications when async actions are performed (copy, paste etc).

Workflow comment and include contained items

Blocked by: plone/plone.restapi#333

Add enzyme for component testing

Currently we're using jest snapshots to test components. This works for simple components but for more complex components we need to add enzyme.

Do we need to checkout a specific branch of plone.restapi?

I just did a fresh checkout of plone-react and I get this error in the js console when I try to log into plone via plone-react:

warning.js:36 Warning: Failed prop type: The prop `title` is marked as required in `Actions`, but its value is `undefined`.
    in Actions (created by Connect(Actions))
    in Connect(Actions) (created by InjectIntl(Connect(Actions)))
    in InjectIntl(Connect(Actions)) (created by Toolbar)
    in div (created by Menu)
    in Menu (created by Toolbar)
    in Toolbar (created by Connect(Toolbar))
    in Connect(Toolbar) (created by InjectIntl(Connect(Toolbar)))
    in InjectIntl(Connect(Toolbar)) (created by AppComponent)
    in div (created by AppComponent)
    in AppComponent (created by Connect(AppComponent))
    in Connect(AppComponent) (created by Connect(Connect(AppComponent)))
    in Connect(Connect(AppComponent)) (created by RouterContext)
    in RouterContext (created by AsyncConnect)
    in AsyncConnect (created by Connect(AsyncConnect))
    in Connect(AsyncConnect) (created by Router)
    in Router
    in IntlProvider (created by Connect(IntlProvider))
    in Connect(IntlProvider) (created by Provider)
    in Provider (created by Provider)
    in Provider

Is it possible that some unmerged feature branches are missing in master branch?

Errors in setting up local dev

To setup the development environment, I've followed the steps in README.md.
The command yarn returns the following errors.

yarn install v0.27.5
[1/4] Resolving packages...
[2/4] Fetching packages...
warning [email protected]: The platform "linux" is incompatible with this module.
info "[email protected]" is an optional dependency and failed compatibility check. Excluding it from installation.
[3/4] Linking dependencies...
[4/4] Building fresh packages...
[-/5] ⠠ waiting...
[2/5] ⠠ uws
[3/5] ⠠ phantomjs-prebuilt
[4/5] ⠠ node-sass
error /media/ajayns/Projects/Code/xPR/plone-react/node_modules/phantomjs: Command failed.
Exit code: 1
Command: sh
Arguments: -c node install.js
Directory: /media/ajayns/Projects/Code/xPR/plone-react/node_modules/phantomjs
Output:
PhantomJS not found on PATH
Phantom installation failed TypeError: Path must be a string. Received undefined
    at assertPath (path.js:28:11)
    at Object.join (path.js:1251:7)
    at findSuitableTempDirectory (/media/ajayns/Projects/Code/xPR/plone-react/node_modules/phantomjs/install.js:127:30)
    at /media/ajayns/Projects/Code/xPR/plone-react/node_modules/phantomjs/install.js:476:19
    at nextTickCallback (/media/ajayns/Projects/Code/xPR/plone-react/node_modules/kew/kew.js:47:28)
    at _combinedTickCallback (internal/process/next_tick.js:131:7)
    at process._tickCallback (internal/process/next_tick.js:180:9) TypeError: Path must be a string. Received undefined
    at assertPath (path.js:28:11)
    at Object.join (path.js:1251:7)
    at findSuitableTempDirectory (/media/ajayns/Projects/Code/xPR/plone-react/node_modules/phantomjs/install.js:127:30)
    at /media/ajayns/Projects/Code/xPR/plone-react/node_modules/phantomjs/install.js:476:19
    at nextTickCallback (/media/ajayns/Projects/Code/xPR/plone-react/node_modules/kew/kew.js:47:28)
    at _combinedTickCallback (internal/process/next_tick.js:131:7)
    at process._tickCallback (internal/process/next_tick.js:180:9)
info Visit https://yarnpkg.com/en/docs/cli/install for documentation about this command.

The backend setup also seems to return a few errors.
Running ./bin/buildout

Getting distribution for 'mr.developer==1.34'.
Got mr.developer 1.34.
Getting distribution for 'zc.buildout==2.5.2'.
While:
  Installing.
  Loading extensions.
  Getting distribution for 'zc.buildout==2.5.2'.

An internal error occurred due to a bug in either zc.buildout or in a
recipe being used:
Traceback (most recent call last):
  File "/media/ajayns/Projects/Code/xPR/plone-react/api/eggs/zc.buildout-2.10.0-py2.7.egg/zc/buildout/buildout.py", line 2123, in main
    getattr(buildout, command)(args)
  File "/media/ajayns/Projects/Code/xPR/plone-react/api/eggs/zc.buildout-2.10.0-py2.7.egg/zc/buildout/buildout.py", line 637, in install
    self._load_extensions()
  File "/media/ajayns/Projects/Code/xPR/plone-react/api/eggs/zc.buildout-2.10.0-py2.7.egg/zc/buildout/buildout.py", line 1163, in _load_extensions
    newest=self.newest, allow_hosts=self._allow_hosts)
  File "/media/ajayns/Projects/Code/xPR/plone-react/api/eggs/zc.buildout-2.10.0-py2.7.egg/zc/buildout/easy_install.py", line 920, in install
    return installer.install(specs, working_set)
  File "/media/ajayns/Projects/Code/xPR/plone-react/api/eggs/zc.buildout-2.10.0-py2.7.egg/zc/buildout/easy_install.py", line 721, in install
    for dist in self._get_dist(req, ws):
  File "/media/ajayns/Projects/Code/xPR/plone-react/api/eggs/zc.buildout-2.10.0-py2.7.egg/zc/buildout/easy_install.py", line 577, in _get_dist
    dist = self._env.best_match(requirement, ws)
  File "build/bdist.linux-x86_64/egg/pkg_resources/__init__.py", line 1111, in best_match
    dist = working_set.find(req)
  File "build/bdist.linux-x86_64/egg/pkg_resources/__init__.py", line 715, in find
    raise VersionConflict(dist, req)
VersionConflict: (zc.buildout 2.10.0 (/media/ajayns/Projects/Code/xPR/plone-react/api/eggs/zc.buildout-2.10.0-py2.7.egg), Requirement.parse('zc.buildout==2.5.2'))

This error also meants the ./bin/instance is never created only.

Still running the dev server with all these errors shows this: (Just added this more info for debug)

Something went wrong: Invalid token specified: Cannot read property 'replace' of undefined

@tisto Please help me out here!

Fill slots

Add fill slots to standard components to add / override content in a view. Use react-slot-fill.

create-react-app like functionality

(See full discussion here.)
plone-react should have create-react-app like functionality i.e using a package boilerplate inside project and extend it to zero configuration.The theme should be pastanaga which may used as a boilerplate theme so that user can initialise a plone project with zero configuration.It also covers #68 so that a create -plone -app will also be a PWA.
This was listed under GSOC projects list for plone foundation. I would love to work on it.
@tisto

Implement Pastanaga Toolbar

So far we implemented the Pastanaga toolbar basics.

Folder contents

Add the folder contents view.

• Basic listing
• Filtering
• Cut, Copy, Paste
• Selecting columns to show
• Delete
• Pagination
• Ordering of items
• Ordering of columns
• Upload files
• Sorting of items
• Batch rename
• Batch tags
• Batch properties
• Batch state

Static code analysis (JavaScript)

We need to document the way we do static code analysis with prettier (cli, IDE, pre-commit hook, CI).

Progressive Web App (PWA)

Turn plone-react into a PWA. create-react-app now comes with a basic PWA functionality. Might be a good starting point: facebook/create-react-app#1728

Restrict what types can be added

Blocked by: plone/plone.restapi#334

plone-react should pick up the user roles and make them available in React.

The @users endpoint in plone.restapi returns the user roles:

HTTP/1.1 200 OK
Content-Type: application/json

[
  {
    "@id": "http://localhost:55001/plone/@users/noam", 
    "description": "Professor of Linguistics", 
    "email": "[email protected]", 
    "fullname": "Noam Avram Chomsky", 
    "home_page": "web.mit.edu/chomsky", 
    "id": "noam", 
    "location": "Cambridge, MA", 
    "roles": [
      "Member"
    ], 
    "username": "noam"
  }
]

plone-react should store the roles of the currently logged in user, e.g. to allow to decide which elements to show to the user.

Form validation

The current form implementation doesn't have validation yet, this needs to be added.

On the properties

• minLength (number)
• uniqueItems (bool)

global:

• required (array of fieldid’s)

Event creation not respecting dates/times

Creating an Event with a specific date and time will result in an event being created with today's date, and time.

In the React app:

Inside Plone, after creation:

Change password

View to change your password.

Upgrade to React Router 4

Waiting on compatibly with redux-connect (makeomatic/redux-connect#107).

Server side rendering with next.js

https://github.com/zeit/next.js/

Reference widget

Widget to select content items in the site.

Component documentation

All basic components (navigation, toolbar, breadcrumbs etc) need to be documented including example usage in a style guide setup. Similar to http://react.semantic-ui.com/introduction, preferably autogenerated using tests or examples.

Collaborative editing

Add collaborative editing

User preferences: Personal information

Pesonal information screen to set the basic user information (email, fullname, home page etc).

Integrate LESS package from Semantic UI

Integrate the semantic-ui-less package so the we can customize and overwrite the theme.

Upgrade to React 16

We need to upgrade react router to v4, react and react-dom to 16, etc. Might be a good topic for a sprint.

Content rules

Create view to manage content rules.

i18n support

Add react-intl for i18n support. See how we can reuse the current translations from Plone.

Live updates

Add live updates (for example navigation bar updates when item is added) using websockets.

User Preferences: Personal Preferences

Personal preferences screen to set wysiwyg editor, language and timezone.

Server Side Rendering for forms

There are some issues with the current form implementation and Server Side Rendering.

• Tabs are not supported, all fieldsets / fields should be rendered
• Page should redirect after a save (maybe wait with this issue on React Router 4 upgrade)

Querystring widget

Create a widget for querystrings to use for content listings etc.

Implement React 16 Error Boundaries

React 16 allows to Error Boundaries to catch errors in components:

https://reactjs.org/blog/2017/07/26/error-handling-in-react-16.html

This way the entire app will not break when there is an error in one component. Also, error reporting to Sentry becomes a lot easier.