Skip to content

Latest commit

 

History

History
204 lines (134 loc) · 4.29 KB

DEVELOP.md

File metadata and controls

204 lines (134 loc) · 4.29 KB
Raw

volto-accordion-block

Develop

With Docker

  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 message

  3. Go to http://localhost:3000

  4. Happy hacking!

    cd src/addons/volto-accordion-block/

Or add 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

    yarn

  5. Start backend

    docker compose up backend

    ...wait for backend to set up 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