Custom CSS in Zammad docker compose

Technical assistance
1

Infos:

  • Used Zammad version: 5.3.1-6
  • Used Zammad installation type: docker-compose
  • Operating system: Rocky 9.1
  • Browser + version: Firefox 111

Question

I already found this post earlier: Custom CSS won't work

There it says that you have to place CSS in
/opt/zammad/app/assets/stylesheets/custom

and then run

zammad run rake assets:precompile

So i tried first mapping my css files into the containers and then saw that the command is not there in the containers. I also found this post Use zammad console commands with docker-compose where it says that you can just use ‘rails’ instead.

However running

rails run rake assets:precompile

in the railsserver container just gave me an error:

zammad@b08a5773c365:~$ rails run rake assets:precompile
rails aborted!
ExecJS::RuntimeUnavailable: Could not find a JavaScript runtime. See https://github.com/rails/execjs for a list of available runtimes.
... traceback ...

Whats the correct way to apply custom css in a docker compose installation?

Thanks

2

The docker stack is not made for customization.
That’s an essential feature of docker and stuff.

The containers come pre-bundled with precompiled CSS and JS data. So if you have to do that you’ll have to build them outside or adjust the container accordingly.

That’s outside of our scope I’m afraid.
Personally I’d say customizing a package installation is by far easier.

3

Thank you for answering!

I know what you mean and I would say this is true for code but its actually pretty common to bring themes and stylesheets into containers these days … :woman_shrugging:

The containers come pre-bundled with precompiled CSS and JS data. So if you have to do that you’ll have to build them outside or adjust the container accordingly.

That actually sounds like a plan :slight_smile:

The setup I’m thinking of right now is

  • Checkout the project
  • Minimal install of prerequisites to build the assets
  • Build the assets
  • Mount the updated assets into the container

Is this something that would work? Could you point me to some documentation on how to do something like that (especially the install prereqs and build assets part)

Thanks,
Katrin

4

No because you need the Zammad core or install nodejs somehow into the railsserver container. Out of scope I’m afraid.

5

But I’m not talking about building it inside the container …

My thinking is that I create a development environment outside of the container and mount the generated assets into the container (which is trivial).

6

Yeah sure.
I pointed you out the easiest way. You can also go with a source code installation if you like the thrill.

As I said. You’d require the whole source code including the enviornment. That’s documented here: Install from source — Zammad documentation (the hard way) or here Install from package — Zammad documentation (the easier way).

How to push in the assets if your part after that. I can’t help further.

8

oh the last part is actually the easiest.

in fact i already to set up a pipeline yesterday…

for whoever might come across the same issue, here is a small howto.

regarding my situation: i’m using rocky 9.1 as a host syste and i already have a repository for the docker compose files and overrides so how i started was that i added ‘zammad’ as subrepo to my existing repo and checked out the tag of the release i’m using (5.4.0).

please note that the following is only a reconstruction from the top of my head but it should be easy to figure out for your system since it roughly follows: Install from source — Zammad documentation

in general we are setting this up so that the user ‘rocky’ that is the main unprivileged user can use the asset generation pipeline

# as root

# keys necessary to install some of the packages
gpg2 --keyserver hkp://keyserver.ubuntu.com --recv-keys 409B6B1796C275462A1703113804BB82D39DC0E3 7D2BAF1CF37B13E2069D6956105BD0E739499BDB

# setup sources for node and yarn
curl -fsSL https://rpm.nodesource.com/setup_lts.x | bash -
curl -sL https://dl.yarnpkg.com/rpm/yarn.repo | tee /etc/yum.repos.d/yarn.repo

# install necessary packages we have in the repo already
dnf install -y nodejs yarn imlib2-devel postgresql-server libpq-devel

# install rvm
curl -L https://get.rvm.io | bash -s stable

# setup postgres; 
# unfortunately we need this since the asset generation
# process of zammad requires the database to be setup
/usr/bin/postgresql-setup --initdb
systemctl enable postgresql
systemctl start postgresql
sudo -i -u postgres createuser -d rocky

# now install ruby and other necessary gems
# note: this could probably be use a user writeable 
# location instead but i didn't bother since i'm using
# this from a VM and the process only has to be done once
# also i dont know ruby and rvm that well ;)
source /etc/profile.d/rvm.sh
rvm install ruby-3.1.3
rvm use 3.1.3
gem install bundler rake rails

# make it writeable so user cann add gems as well
chown rocky:rocky -R /usr/local/rvm

# as rocky

# enter main git repo
cd ~/zammad-docker-compose

# add zammad repo as submodule using tag 5.4.0
git submodule add https://github.com/zammad/zammad.git
cd zammad
git checkout 5.4.0
cd ..
git add zammad

# install bundles for project
cd zammad
bundle config set without "test mysql"
bundle install

# use default database config; suffices to run the build process
# if there is anything needed from production
# i probably need to sync the databases
# but at this point i just dont know
cp config/database/database.yml config/database.yml

# this should now work
rake assets:precompile

For the docker part i’m just using a new container with an image that has ‘rsync’ and mount both folders. At the moment I simply copy over the assets over the existing ones …

version: '3'

  sync_assets:
    image: <any image that has 'rsync' or a tool you like>
    volumes:
      - zammad-data:/opt/zammad
      - ./zammad/public:/opt/public
    command: rsync --progress -av --delete /opt/public/ /opt/zammad/public/

volumes:
  zammad-data:
    driver: local
  zammad-backup:
    driver: local

Note: I dont like the copy step in particular but unfortunately it doesn’t seem to be possible to bind mount a host folder onto a folder thats on the volume. Seems like docker mounts the binding first and then it gets lost when the volume is mounted :confused:

after building the assets i just run

docker compose -f docker-compose.assets.yml run -T --rm sync_assets

to get the assets onto the data volume

3 Likes
9

Oh and one last thing I forgot. After copying over the resources you need to restart the docker instance that hosts the rails server. This can easily done with (assuming the containers name is zammad-railsserver)

docker restart zammad-railsserver
# have a look at the logs to see when its up again ...
docker logs -f zammad-railsserver
2 Likes
10

This topic was automatically closed 360 days after the last reply. New replies are no longer allowed.