DEVELOP.md

volto-accordion-block

Develop

1. Make sure you have docker and docker compose installed and running on your machine:

   git clone https://github.com/eea/volto-accordion-block.git
   cd volto-accordion-block
   git checkout -b bugfix-123456 develop
   make
   make start

2. Wait for Volto started at 0.0.0.0:3000 meesage

3. Go to http://localhost:3000

4. Initialize git hooks

   yarn prepare

5. Happy hacking!

Or add @eeacms/volto-accordion-block to your Volto project

Before starting make sure your development environment is properly set. See Volto Developer Documentation

1. Make sure you have installed yo, @plone/generator-volto and mrs-developer

   npm install -g yo @plone/generator-volto mrs-developer
   

2. Create new volto app

   yo @plone/volto my-volto-project --addon @eeacms/volto-accordion-block --skip-install
   cd my-volto-project
   

3. Add the following to mrs.developer.json:

   {
       "volto-accordion-block": {
           "url": "https://github.com/eea/volto-accordion-block.git",
           "package": "@eeacms/volto-accordion-block",
           "branch": "develop",
           "path": "src"
       }
   }
   

4. Install

   make develop
   yarn
   

5. Start backend

   docker run --pull always -it --rm --name plone -p 8080:8080 -e SITE=Plone plone/plone-backend
   

   ...wait for backend to setup and start - Ready to handle requests:

   ...you can also check http://localhost:8080/Plone

6. Start frontend

   yarn start
   

7. Go to http://localhost:3000

8. Happy hacking!

   cd src/addons/volto-accordion-block/
   

Cypress

To run cypress locally, first make sure you don't have any Volto/Plone running on ports 8080 and 3000.

You don't have to be in a clean-volto-project, you can be in any Volto Frontend project where you added volto-accordion-block to mrs.developer.json

Go to:

cd src/addons/volto-accordion-block/

Start:

make
make start

This will build and start with Docker a clean Plone backend and Volto Frontend with volto-accordion-block block installed.

Open Cypress Interface:

make cypress-open

Or run it:

make cypress-run

Prettier

Prettier is an opinionated code formatter. It enforces a consistent style by parsing your code and re-printing it with its own rules that take the maximum line length into account, wrapping code when necessary.

Run prettier linter, executing the following command:

make prettier

To fix the prettier warnings, execute the following command:

make prettier-fix

---

Eslint

ESLint is a tool for identifying and reporting on patterns found in ECMAScript/JavaScript code.

Eslint should run just fine using the setup config from any Volto projects generated by volto project generator.

If for some reason that doesn't work, and you need to manually install eslint, you can also use the following steps to install eslint.

For installing eslint, execute the following command:

yarn add --dev eslint eslint-plugin-jsx-a11y eslint-plugin-prettier eslint-plugin-react-hooks eslint-plugin-import eslint-plugin-flowtype

For setting up eslint, execute the following command:

cp .project.eslintrc.js .eslintrc.js

Run eslint, executing the following command:

make lint

To fix the problems found by eslint, execute the following command:

make lint-fix

---

Stylelint

Stylelint is a mighty CSS linter that helps you avoid errors and enforce conventions.

For installing stylelint, execute the following command:

yarn add --dev stylelint

To run stylelint, execute the following command:

make stylelint

If you need to run stylelint on styles found in .overrides files, execute the following command:

make stylelint-overrides

To auto fix the found issues by stylelint, execute the following command:

make stylelint-fix