Plone in React


1616380.8.34 years ago5 years agoMinified + gzip package size for @plone/plone-react in KB


Plone in React

Build Status Coverage Dependencies Dev Dependencies NPM



Install dependencies

$ yarn

Install backend

$ cd api
$ ./bootstrap.sh


Run backend

$ cd api
$ ./bin/instance fg


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

Run frontend

$ yarn start


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


$ yarn test

Acceptance testing

$ 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 && 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

Static Code Analysis


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"

Using Plugins

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:

  1. The CLI, via the --plugin flag:

prettier --write main.foo --plugin=./foo-plugin

  1. Or the API, via the plugins field:
  parser: "foo",
  plugins: ["./foo-plugin"]
Pre commit hook

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.

  1. 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"]
  1. 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


MIT License. Copyrights hold the Plone Foundation. See LICENSE.md for details.

Running Guillotina Tests

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;

If you find any bugs or have a feature request, please open an issue on github!

The npm package download data comes from npm's download counts api and package details come from npms.io.