Frontend Add-on docker

Plone Support Add-on Development
1

Hello, I introduce myself, I'm Andres, I've been studying plone for a while, but I'm a little overwhelmed and stuck in one part, I'm managing plone 6 with docker containers, with portainer, I have a problem and is adding addons to volto frontend, since no changes are made, if you can visualize in the backend addons, but in the frontend, it gives me a lot of errors when I access the container and manipulate the files as recommended by the official documentation, to this I add the configuration of my docker-compose. yml to give me feedback on what I'm failing or how I can improve.

frontend:
image: plone/plone-frontend:latest
container_name: frontend
environment:
RAZZLE_INTERNAL_API_PATH: http://backend:8080/Plone
RAZZLE_DEV_PROXY_API_PATH: http://backend:8080/Plone
# Add the add-on here
ports:
- “3000:3000” # Changed to 3000 to match Nginx configuration.
depends_on:
- backend

backend:
image: plone/plone-backend:latest
container_name: backend
environment:
SITE: Plone
ADDONS: collective.exportimport collective.easyform collective.volto.otp plone.restapi plone.volto redturtle.voltoplugin.editablefooter
PLONE_DEVELOP: src/my.addon # Development path for your addon
DELETE_EXISTING: “false” # Keeps the existing database
ZEO_ADDRESS: db:8100
ports:
- “8080:8080” # Changed to 8080 to match Nginx configuration.
depends_on:
- db

2

Hi Andres,
Can you clarify what you mean by this?

3

In response to your question regarding accessing the frontend container and manipulating files for Volto add-ons installation, here's what I typically do:

To access the frontend container, I use the following command:

docker exec -it frontend /bin/bash

This allows me to interact with the files inside the Volto frontend container. Once inside, I can follow the official documentation to install any required add-ons for Volto.

According to the Plone documentation on how to work with the frontend in containers, after entering the container, I typically navigate to the Volto project directory and use tools like yarn to install the add-ons as specified. For example:

Enter the container as mentioned above.
Navigate to the project directory (usually /app).
Install the required add-ons with:

yarn add

After installing the add-on, it's necessary to rebuild the frontend:

yarn build

Finally, you may need to restart the container for changes to take effect.

This process follows the guidance from the Plone 6 documentation, which provides detailed steps for managing Volto in container environments.

I encountered the following error when trying to build the Volto frontend:

YN0000: ┌ Link step
➤ YN0008: │ app@workspace:. must be rebuilt because its dependency tree changed
➤ YN0009: │ app@workspace:. couldn't be built successfully (exit code 127, logs can be found here: /tmp/xfs-9426627f/build.log)
➤ YN0000: └ Completed in 2s 672ms
➤ YN0000: Failed with errors in 55s 937ms

4

Have you tried building the front end without add-ons and then adding the add-ons only one at a time?

5

Can you share a link to the document you're following?
As a general rule, it's probably a bad idea to modify a container in that way.
If the docs do have that, it's probably more for demo/familiarisation.

6

You're absolutely right; modifying a container directly like that is generally not a good idea for production environments.

What I'm trying to achieve is adding the Volto add-ons directly in the Docker configuration, similar to how it's done with the backend. Here's an example of the docker-compose.yml setup I'm using:

frontend:
  image: plone/plone-frontend:latest
  container_name: frontend
  environment:
    RAZZLE_INTERNAL_API_PATH: http://backend:8080/Plone
    RAZZLE_DEV_PROXY_API_PATH: http://backend:8080/Plone
    # Add the add-on here
  ports:
    - "3000:3000" # Changed to 3000 to match Nginx configuration.
  depends_on:
    - backend

backend:
  image: plone/plone-backend:latest
  container_name: backend
  environment:
    SITE: Plone
    ADDONS: collective.exportimport collective.easyform collective.volto.otp plone.restapi plone.volto redturtle.voltoplugin.editablefooter
    PLONE_DEVELOP: src/my.addon # Development path for your addon
    DELETE_EXISTING: "false" # Keeps the existing database
    ZEO_ADDRESS: db:8100
  ports:
    - "8080:8080" # Changed to 8080 to match Nginx configuration.
  depends_on:
    - db

In this setup, I can specify the add-ons in the backend service by listing them in the ADDONS environment variable, which works fine for the backend. However, for the frontend, there doesn't seem to be a similar mechanism to handle add-ons automatically like the backend does.

Ideally, I would like to add the add-ons directly to the frontend image the same way it's done for the backend, but I haven't found a reliable way to achieve this. It seems we need a more integrated method for adding add-ons to the frontend as part of the build process.

If anyone has suggestions or best practices for handling this, I'd love to hear your input

https://6.docs.plone.org/install/containers/images/frontend.html

What I'm trying to do is add custom blocks to Volto, which are essentially the add-ons. These blocks extend Volto’s functionality, and my goal is to incorporate them directly into the frontend setup image container.

7

Yes, I do

8

For development, and to maintain sanity, I recommend you start with:

It will give you a local non-docker version of the frontend and most things can be operated using some specially crafted make commands.
If you get stuck, come back to this thread to report, someone will help you move forward.

9

Does the front end build and run successfully when there are no add-ons?

10

If I understand correctly you are having trouble adding custom blocks, is that right? If so, we would need to see more details about the custom blocks.

It would also help to know which version of Plone and Volto you are using, as well as versions of tools.

11

image
image1353×630 137 KB

Hi everyone,

I am still encountering the same error as before, despite following the documentation.
volto-form-block Here’s the output I’m getting:

➤ YN0002: │ react-select-async-paginate@npm:0.5.3 [270ca] doesn't provide react-dom (p192e3), requested by react-is-mounted-hook
➤ YN0002: │ volto-app@workspace:src/addons/volto-app doesn't provide @babel/core (p24667), requested by @babel/eslint-parser
➤ YN0002: │ volto-app@workspace:src/addons/volto-app doesn't provide @babel/plugin-syntax-flow (p60846), requested by eslint-plugin-flowtype
➤ YN0002: │ volto-app@workspace:src/addons/volto-app doesn't provide @babel/plugin-transform-react-jsx (p96ec2), requested by eslint-plugin-flowtype
➤ YN0002: │ volto-app@workspace:src/addons/volto-app doesn't provide postcss (p1516a), requested by postcss-less
➤ YN0002: │ volto-app@workspace:src/addons/volto-app doesn't provide postcss (pe34fc), requested by postcss-scss
➤ YN0002: │ volto-app@workspace:src/addons/volto-app doesn't provide postcss (p1e59b), requested by stylelint-config-sass-guidelines
➤ YN0060: │ volto-app@workspace:src/addons/volto-app provides stylelint (paeb55) with version 15.10.3, which doesn't satisfy what stylelint-config-idiomatic-order and some of its descendants request
➤ YN0002: │ volto-form-block@npm:3.9.3 [0460f] doesn't provide react (p05d27), requested by @hcaptcha/react-hcaptcha
➤ YN0002: │ volto-form-block@npm:3.9.3 [0460f] doesn't provide react (pa3c32), requested by react-google-recaptcha-v3
➤ YN0002: │ volto-form-block@npm:3.9.3 [0460f] doesn't provide react-dom (p22371), requested by @hcaptcha/react-hcaptcha
➤ YN0002: │ volto-form-block@npm:3.9.3 [0460f] doesn't provide react-dom (p7e7ff), requested by react-google-recaptcha-v3
➤ YN0002: │ volto-subblocks@npm:2.1.0 [0460f] doesn't provide react (p2f184), requested by react-dnd
➤ YN0000: │ Some peer dependencies are incorrectly met; run yarn explain peer-requirements <hash> for details, where <hash> is the six-letter p-prefixed code
➤ YN0000: └ Completed in 1s 875ms
➤ YN0000: ┌ Fetch step
➤ YN0013: │ yargs@npm:16.2.0 can't be found in the cache and will be fetched from the remote registry
➤ YN0013: │ yarnhook@npm:0.5.1 can't be found in the cache and will be fetched from the remote registry
➤ YN0013: │ yauzl@npm:2.10.0 can't be found in the cache and will be fetched from the remote registry
➤ YN0013: │ yocto-queue@npm:0.1.0 can't be found in the cache and will be fetched from the remote registry
➤ YN0013: │ zwitch@npm:1.0.5 can't be found in the cache and will be fetched from the remote registry
➤ YN0066: │ typescript@patch:typescript@npm%3A5.2.2#~builtin<compat/typescript>::version=5.2.2&hash=a1c5e5: Cannot apply hunk #1
➤ YN0000: └ Completed in 46s 665ms
➤ YN0000: ┌ Link step
➤ YN0008: │ app@workspace:. must be rebuilt because its dependency tree changed
➤ YN0009: │ app@workspace:. couldn't be built successfully (exit code 127, logs can be found here: /tmp/xfs-d9d3b7ce/build.log)
➤ YN0000: └ Completed in 2s 641ms
➤ YN0000: Failed with errors in 52s 145ms

I’m trying to resolve these peer dependency issues, but the errors persist. Any guidance would be greatly appreciated!

Thank you!

12

Yarn is often the issue. What version of yarn are you using?

13

I have 3.2.3

14

sounds fine.

15

Unfortunately, I still haven’t been able to resolve the problem :disappointed:. I'm trying to find a way to add blocks (add-ons) to Volto in the frontend, but so far, I haven't found a solution that works.

16

We could help you better if you gave us more details: How to Ask for Help

17

Subject: Issues Adding Add-ons to Frontend and Backend in Plone 6 with Docker Setup

Hello everyone,

I'm currently working with a Docker setup for Plone 6 and have encountered some issues while trying to add blocks or add-ons, particularly to the frontend. I followed the Docker example from the Plone documentation to configure my docker-compose.yml, which includes separate containers for the frontend (plone/plone-frontend) and backend (plone/plone-backend).

Here are the specifics of my setup:

  • Volto version: 17.18.2
  • Plone version: 6.0.13
  • Plone REST API: 9.7.2
  • Python version: 3.11.9
  • Zope version: 5.10
  • CMF version: 3.5
  • PIL (Pillow): 9.5.0

Add-ons installed:

  • @plone/volto-slate 17.18.2
  • volto-app 0.1.0

What I expect to happen:
I would like to be able to add new blocks or add-ons to both the frontend and backend of my Plone 6 setup.

Steps I took:
I followed the instructions for setting up a Volto frontend with a ZEO backend using Docker from the link above. However, I'm struggling to figure out how to install additional add-ons for the frontend and make them work correctly within this Docker configuration.

Issues I'm facing:

  • When trying to add frontend add-ons, I encounter errors that prevent the add-ons from working.
  • I'm not entirely sure how to properly configure the Docker containers to support new add-ons in both the frontend and backend environments.

What I've observed:
The error messages I've received are inconsistent, but they mostly relate to dependency issues or configuration problems in the Volto frontend container.

Any guidance on how to correctly install add-ons in this type of Docker setup, or advice on troubleshooting common issues with adding frontend blocks, would be greatly appreciated. I can provide more detailed error logs if necessary.

Thanks in advance for your help!

This is the error.

➤ YN0002: │ react-select-async-paginate@npm:0.5.3 [270ca] doesn't provide react-dom (p192e3), requested by react-is-mounted-hook
➤ YN0002: │ volto-app@workspace:src/addons/volto-app doesn't provide @babel/core (p24667), requested by @babel/eslint-parser
➤ YN0002: │ volto-app@workspace:src/addons/volto-app doesn't provide @babel/plugin-syntax-flow (p60846), requested by eslint-plugin-flowtype
➤ YN0002: │ volto-app@workspace:src/addons/volto-app doesn't provide @babel/plugin-transform-react-jsx (p96ec2), requested by eslint-plugin-flowtype
➤ YN0002: │ volto-app@workspace:src/addons/volto-app doesn't provide postcss (p1516a), requested by postcss-less
➤ YN0002: │ volto-app@workspace:src/addons/volto-app doesn't provide postcss (pe34fc), requested by postcss-scss
➤ YN0002: │ volto-app@workspace:src/addons/volto-app doesn't provide postcss (p1e59b), requested by stylelint-config-sass-guidelines
➤ YN0060: │ volto-app@workspace:src/addons/volto-app provides stylelint (paeb55) with version 15.10.3, which doesn't satisfy what stylelint-config-idiomatic-order and some of its descendants request
➤ YN0002: │ volto-form-block@npm:3.9.3 [0460f] doesn't provide react (p05d27), requested by @hcaptcha/react-hcaptcha
➤ YN0002: │ volto-form-block@npm:3.9.3 [0460f] doesn't provide react (pa3c32), requested by react-google-recaptcha-v3
➤ YN0002: │ volto-form-block@npm:3.9.3 [0460f] doesn't provide react-dom (p22371), requested by @hcaptcha/react-hcaptcha
➤ YN0002: │ volto-form-block@npm:3.9.3 [0460f] doesn't provide react-dom (p7e7ff), requested by react-google-recaptcha-v3
➤ YN0002: │ volto-subblocks@npm:2.1.0 [0460f] doesn't provide react (p2f184), requested by react-dnd
➤ YN0000: │ Some peer dependencies are incorrectly met; run yarn explain peer-requirements <hash> for details, where <hash> is the six-letter p-prefixed code
➤ YN0000: └ Completed in 1s 875ms
➤ YN0000: ┌ Fetch step
➤ YN0013: │ yargs@npm:16.2.0 can't be found in the cache and will be fetched from the remote registry
➤ YN0013: │ yarnhook@npm:0.5.1 can't be found in the cache and will be fetched from the remote registry
➤ YN0013: │ yauzl@npm:2.10.0 can't be found in the cache and will be fetched from the remote registry
➤ YN0013: │ yocto-queue@npm:0.1.0 can't be found in the cache and will be fetched from the remote registry
➤ YN0013: │ zwitch@npm:1.0.5 can't be found in the cache and will be fetched from the remote registry
➤ YN0066: │ typescript@patch:typescript@npm%3A5.2.2#~builtin<compat/typescript>::version=5.2.2&hash=a1c5e5: Cannot apply hunk #1
➤ YN0000: └ Completed in 46s 665ms
➤ YN0000: ┌ Link step
➤ YN0008: │ app@workspace:. must be rebuilt because its dependency tree changed
➤ YN0009: │ app@workspace:. couldn't be built successfully (exit code 127, logs can be found here: /tmp/xfs-d9d3b7ce/build.log)
➤ YN0000: └ Completed in 2s 641ms
➤ YN0000: Failed with errors in 52s 145ms
18

The docs that you mentioned (nginx, Frontend, Backend, ZEO container example – Install – Containers – Examples of Plone 6 using containers — Plone Documentation v6.0) shows how to run the pre-built Plone images using Docker Compose, but this is not a good approach if you want to add add-ons or customize the images in other ways.

Instead, I'd recommend that you start with these instructions: Create a project with Volto (stable release) – Install — Plone Documentation v6.0

This gives you a backend and a frontend folder each with their own Dockerfile to build a custom image. Once you have the images for your project, you can use a similar Docker Compose configuration to run them instead of the plone/plone-frontend and plone/plone-backend images.

19

That's an excellent idea, I'll give it a try and let you know how it goes.

20

Friends, I want to update you that I haven’t been able to install blocks or add-ons in Plone 6. Here’s what I’m trying to install for my tests:

* volto-subblocks 2.0.0
* volto-form-block 3.8.3
* @eeacms/volto-accordion-block 10.4.6
* @kitconcept/volto-button-block 2.3.1
* @kitconcept/volto-heading-block 2.4.0
* @kitconcept/volto-highlight-block 3.0.1
* @kitconcept/volto-introduction-block 1.0.0
* @kitconcept/volto-separator-block 4.1.1
* @kitconcept/volto-slider-block 6.3.1
* @kitconcept/volto-light-theme 3.3.1

I’m facing issues installing these, despite creating a custom image with a Dockerfile. I haven’t been able to find a solution, and adding add-ons is quite complicated due to the problems I’m experiencing:

➤ YN0060: │ frontend@workspace:. provides react-dom (p1beb8) with version 18.2.0, which doesn't satisfy what react-select requests
➤ YN0060: │ frontend@workspace:. provides react-dom (p22932) with version 18.2.0, which doesn't satisfy what react-simple-code-editor requests
➤ YN0060: │ frontend@workspace:. provides react-dom (pe46a1) with version 18.2.0, which doesn't satisfy what react-sortable-hoc requests
➤ YN0060: │ frontend@workspace:. provides react-dom (pead0a) with version 18.2.0, which doesn't satisfy what react-virtualized requests
➤ YN0060: │ frontend@workspace:. provides react-redux (p070ef) with version 8.1.2, which doesn't satisfy what connected-react-router requests
➤ YN0060: │ frontend@workspace:. provides react-redux (pc2f68) with version 8.1.2, which doesn't satisfy what react-intl-redux requests
➤ YN0060: │ frontend@workspace:. provides react-redux (p976dc) with version 8.1.2, which doesn't satisfy what redux-connect requests
➤ YN0060: │ frontend@workspace:. provides react-test-renderer (pfa1e6) with version 18.2.0, which doesn't satisfy what @testing-library/react-hooks requests
➤ YN0060: │ frontend@workspace:. provides redux-actions (pf1da1) with version 3.0.0, which doesn't satisfy what redux-connect requests
➤ YN0002: │ frontend@workspace:. doesn't provide seamless-immutable (p8f6a0), requested by connected-react-router
➤ YN0060: │ frontend@workspace:. provides typescript (pdbdeb) with version 5.6.2, which doesn't satisfy what ts-jest requests
➤ YN0060: │ frontend@workspace:. provides webpack (pa465e) with version 5.90.1, which doesn't satisfy what razzle and some of its descendants request
➤ YN0002: │ razzle-plugin-scss@npm:4.2.18 [d9650] doesn't provide postcss (p8e907), requested by autoprefixer
➤ YN0002: │ razzle-plugin-scss@npm:4.2.18 [d9650] doesn't provide postcss (p6a987), requested by postcss-loader
➤ YN0002: │ razzle-plugin-scss@npm:4.2.18 [d9650] doesn't provide webpack (p329eb), requested by css-loader
➤ YN0002: │ razzle-plugin-scss@npm:4.2.18 [d9650] doesn't provide webpack (pa3e68), requested by postcss-loader
➤ YN0002: │ razzle-plugin-scss@npm:4.2.18 [d9650] doesn't provide webpack (p19412), requested by sass-loader
➤ YN0002: │ razzle@npm:4.2.18 [d9650] doesn't provide @babel/core (pbb1d6), requested by @babel/plugin-transform-modules-commonjs
➤ YN0002: │ razzle@npm:4.2.18 [d9650] doesn't provide @babel/core (p3b79c), requested by babel-jest
➤ YN0002: │ razzle@npm:4.2.18 [d9650] doesn't provide @babel/core (p4a2d9), requested by babel-loader
➤ YN0002: │ rc-trigger@npm:2.6.5 doesn't provide react (p8a8f0), requested by rc-animate
➤ YN0002: │ rc-trigger@npm:2.6.5 doesn't provide react-dom (p1433f), requested by rc-animate
➤ YN0002: │ react-select-async-paginate@npm:0.5.3 [861e9] doesn't provide react-dom (p5f462), requested by react-is-mounted-hook
➤ YN0002: │ react-select-async-paginate@npm:0.5.3 [d9650] doesn't provide react-dom (p2d9dc), requested by react-is-mounted-hook
➤ YN0002: │ volto-form-block@npm:3.8.3 [d9650] doesn't provide react (pafc11), requested by @hcaptcha/react-hcaptcha
➤ YN0002: │ volto-form-block@npm:3.8.3 [d9650] doesn't provide react (pc4dcd), requested by react-google-recaptcha-v3
➤ YN0002: │ volto-form-block@npm:3.8.3 [d9650] doesn't provide react-dom (p59b5f), requested by @hcaptcha/react-hcaptcha
➤ YN0002: │ volto-form-block@npm:3.8.3 [d9650] doesn't provide react-dom (p98575), requested by react-google-recaptcha-v3
➤ YN0002: │ volto-subblocks@npm:2.0.0 [d9650] doesn't provide react (p98121), requested by react-dnd
➤ YN0000: │ Some peer dependencies are incorrectly met; run yarn explain peer-requirements <hash> for details, where <hash> is the six-letter p-prefixed code
➤ YN0000: └ Completed in 0s 643ms
➤ YN0000: ┌ Fetch step
➤ YN0013: │ yargs@npm:15.4.1 can't be found in the cache and will be fetched from the remote registry
➤ YN0013: │ yauzl@npm:2.10.0 can't be found in the cache and will be fetched from the remote registry
➤ YN0013: │ yocto-queue@npm:0.1.0 can't be found in the cache and will be fetched from the remote registry
➤ YN0013: │ yocto-queue@npm:1.1.1 can't be found in the cache and will be fetched from the remote registry
➤ YN0013: │ yoctocolors-cjs@npm:2.1.2 can't be found in the cache and will be fetched from the remote registr
➤ YN0066: │ typescript@patch:typescript@npm%3A5.6.2#~builtin<compat/typescript>::version=5.6.2&hash=a1c5e5: Ca
nnot apply hunk #1
➤ YN0000: └ Completed in 1m 1s
➤ YN0000: ┌ Link step
➤ YN0007: │ cypress@npm:13.13.2 must be built because it never has been before or the last one failed
➤ YN0007: │ full-icu@npm:1.4.0 must be built because it never has been before or the last one failed
➤ YN0007: │ why@npm:0.6.2 must be built because it never has been before or the last one failed
➤ YN0007: │ esbuild@npm:0.23.1 must be built because it never has been before or the last one failed
➤ YN0007: │ core-js-pure@npm:3.38.1 must be built because it never has been before or the last one failed
➤ YN0008: │ core-js@npm:2.6.12 must be rebuilt because its dependency tree changed
➤ YN0007: │ es5-ext@npm:0.10.64 must be built because it never has been before or the last one failed
➤ YN0007: │ frontend@workspace:. must be built because it never has been before or the last one failed
➤ YN0009: │ frontend@workspace:. couldn't be built successfully (exit code 127, logs can be found here: /tmp/xfs-6dbc865a/build.log)
➤ YN0000: └ Completed in 2m 3s
➤ YN0000: Failed with errors in 3m 5s

The guides aren't very concrete, and I've noticed that the videos on how to add add-ons in Volto on their channels are quite outdated. The videos are from 2021 and contain necessary information, but even testing on my local server, I encounter many issues with the Docker image for the frontend when I need it to execute the dependencies. Every time I think I've found what I need, I end up back at square one.

I greatly appreciate your help in figuring out how to correctly configure my setup to work with Plone 6.

**Version Overview**

* App: 1.0.0
* Volto: 17.18.2
* Plone: 6.0.13
* plone.restapi: 9.7.2
* CMF: 3.5
* Zope: 5.10
* Python: 3.11.9 (main, Sep 4 2024, 23:13:27) [GCC 10.2.1 20210110]
* PIL: 9.5.0 (Pillow)

**Add-ons**

* @plone/volto-slate: 17.18.2
* volto-app: 0.1.0

I would appreciate your help!