Skip to content

Latest commit

 

History

History
188 lines (119 loc) · 4.27 KB

DEVELOP.md

File metadata and controls

188 lines (119 loc) · 4.27 KB
Raw

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