I'm a bit confused about theming volto and docker images and hope someone can help. I have create a new volto project using yo @plone/volto (@plone/generator-volto@8.1.4) where I have changed the link color by creating src/addons/volto-test-volto/src/theme/globals/site.variables and adding @linkColor :yellow; to it.
If I start frontend and backend using make dev the link color is still blue. If I start volto using PORT=3005 yarn start the link color is yellow as expected.
Adding the environment variable THEME to the Dockerfile helped - thx!
But I did not understand where exactly to add the other two options to select the theme:
If I create a project using yo @plone/volto named my-volto-project there is no volto.config.js - and I am not sure where to create it. At the root project
/my-volto-project/ or the project that is meant to be the theme (e.g.
/my-volto-project/src/addons/volto-my-volto-project)
Which package.json is meant - root project or theme project?
First a disclaimer. The documentation is not meant to be a training or tutorial. They are how-to guides to accomplish a discrete task. Many of the pages lack context—such as create a project, create an add-on, or develop core—and you might get unexpected results from jumping from one page to another. I think that's what happened here.
Trainings, however, provide a single context and hold your hand from start to finish.
All that said, I'm sorry I don't know the answer to your question. Hopefully someone else can jump in who knows. Meanwhile, you can take one of the trainings for a spin. We're preparing them for PloneConf 2024, and will accept issues or pull requests that fix typos, grammar, and other problems that might appear.
When you create a new project the generator created a theme add-on automatically for you taking the name of the project given and prefixing it with volto-.
This is why within your src/addons you had this new theme add-on created named volto-my-volto-project.
there is no make dev command when running the project generated by the yeoman generator.
You can check out the source code from which your project is created and inspect the Makefile commands.
starting your instance with yarn start is the way to start the volto frontend server. that starts it in develop mode where it auto refreshes when you make a change to the less.
To start the backend you need to run the start-backend-docker command
make start-backend-docker
If you want to persist your backend data which I think you do, then you should modify the command from the project Makefile to use the one we added for volto main branch
From there is simply a matter of yarn start and editing the files from src/addons/volto-my-volto-project
Thanks a lot for explanation! I'm new to volto and images (but using Plone since years).
Yes, there I was changing colors ...
and the make file of this project under src/addons has the dev command I was using.
So I did until I need to create an image. While looking around for Dockerfiles I found /src/addons/volto-test-volto/dockerfiles/Dockerfile in this subproject thinking this could be used to build my image. But then realizing that theming was not working in it. After that I saw the dev command in this Makefile with what I could reproduce the not working theming.
Maybe I just missed the documentation about "I`m ready with development, lets build the frontend-image"?
Indeed the addon template has this dev command.
When you have a project created you interact with its Makefile and not with the makefile from the addon for things like starting the backend and the frontend.
Look at the dockerfiles, see what they contain and how things are built that way.
You do that with the make addon-live command
Some documentation you should have a look at to get a better understanding of the stack:
and I have tried this too. But I noticed that theming/changed colors did not work. Maybe something like ENV THEME=$ADDON_NAME is missing at the Dockerfiles?
