Setting up a local development env for working on the theme

I'd like to work on improving the default theme for Plone (https://github.com/plone/plonetheme.barceloneta)

I've gone through the documentation and couldn't seem to find a way to setup an env so as to work on it and see the changes reflected. Being a JS Frontend developer, buildout configs and python codebases seem to a bit vague to me. So, working on code and viewing changes through webpack hot reload or maybe npm run build is what I'm used to.

What would be the best way to get started?

Barceloneta has a grunt-based build system, which is not really today's favorite tool for building frontend stuff, but still works fine. Inside the barceloneta folder, a first good step is explained in the HOWTO_DEVELOP.rst file, which basically tells you to npm install and run grunt, but you still need a running Plone site to develop a theme.
There is an optional browser sync task in the Gruntfile which lets you have hot replacement of your styles while working on them.

One thing I did not understand from your question is: do you have any past experience with Plone, or is this the first time you are trying to install Plone?
The actual answer you are looking for may vary based on this :slight_smile:

On the other hand, I'm looking right now into the barceloneta repo, it looks like there was an attempt at making it possible to develop it without a Plone site, but it's not working. I think that the index.html file in the project root is probably there for dev purposes. It has bugs (or it's just outdated) and it could use an update in the js dependencies.
For example, the link to the less files is broken, they are now inside plonetheme/barceloneta/theme/less, and some less variables are missing or have simple typos (missing colons).

I have Plone installed in my system already, but I haven't worked on it. I've just been using and working on the restapi part of it mostly.

So having a Plone 5.1 instance installed running on the system, how do I make it work with the theme dev env?

If I remember right, you can do like this:

  1. Fork it on GitHub, into 'src' folder inside zinstance-folder.
  2. Add src/plonetheme.barceloneta to the src section of your buildout
  3. 'run grunt' from within src/plonetheme.barceloneta
  4. Edits should happen 'live'.(can't remember if you need to start with bin/instance fg )

Out of curiousity: what are you planning to do ?

Hey @espenmn
Thanks a lot, I'll check it out.

About what I'm planning to do, well I was checking out how Plone worked and exploring it. I came across a bunch of issues in the UI, and wanted to contribute in fixing them. I was told to look for the design/theme files in barceloneta and so I'm trying to setup and work on it.

1 Like

@ajayns depending on what UI issues you mean, it depends what it need to solve it.
If it's something with theme, you are in the right place.
If it's more detail UI of the logged in user, like some UI components, then you might be looking for Plone mockup. That is the way any components, are implemented. Basically kind of HTML/JS components, but comming from the backend.

As @pnicolli said, the grunt setup allows you to develop with a browsr sync as well.
And as the theme for Plone are usually basic static themes with the Diazo mappings (rules.xml).
But for some details you want to have the real plone content already included, thats why many of use using it with a running Plone at the end. But the static grunt setup should be fix, please file an issue for that and maybe fix it.
If you get stuck with the setup, let us know.

I will definitely open issues and/or PR to fix some problems I've noticed in these days, I started already :slight_smile: