Question: Changing style of the app

[MalteMagnussen]

We are trying to update the styling of Gokapi to fit our company style-guide.

For local development, we use a docker-compose.yml file:

services:
  gokapi:
    build: .
    environment:
      - DOCKER_NONROOT="false"
    ports:
      - "53842:53842"
    develop:
      watch:
        - action: rebuild
          path: ./web/static/
          target: /app/static/
        - action: rebuild
          path: ./web/templates/
          target: /app/templates/
    volumes:
      - ./development/config:/app/config
      - ./development/data:/app/data
    user: "1000:1000"

To run this, we do

docker compose up
# https://github.com/moby/moby/issues/3206
# first time, we have to do:
sudo chown -R 1000:1000 ./

Here is the Dockerfile

FROM gokapi:v1.8.4

COPY ./web/templates/ /app/templates/
COPY ./web/static/ /app/static/

If we make changes to the images, or the html templates, then the change is visible in the app.

But if we make changes to the css web/static/css/cover.css then that doesn't work.

The reason it does not work, is probably because the css is "minified" here: https://github.com/Forceu/Gokapi/blob/master/cmd/gokapi/Main.go#L37-L42

How can we best implement the changes to the style of the app?

[Forceu]

You need to run go generate ./... before building the image. See https://gokapi.readthedocs.io/en/latest/advanced.html#customising

[MalteMagnussen]

Thanks. Will try that out, and mark this as answer if/when I get it working.

Simply adding RUN go generate ./... && go build github.com/forceu/gokapi/cmd/gokapi to the Dockerfile after COPY'ing should be enough?

[Forceu]

If you are using FROM gokapi:v1.8.4 it should be enough to minify the CSS and JS, you probably do not need to rebuild the binary

[MalteMagnussen]

I am "extending" the image:

# Mirror of the image from docker hub
FROM gokapi:v1.8.4

COPY ./web/templates/ /app/templates/
COPY ./web/static/ /app/static/

EDIT: Okay, so simply doing RUN go generate ./... would be enough? let me try that :) thanks

EDIT2: Ahh, you're using a multi-stage build (as you should), so go isn't in the final image.

[Forceu]

You could also simply rename your css to .min.css, it doesn't have to be minified, as long as the file exists.

[MalteMagnussen]

Ah, yes, what a simple solution.

(Not the change we want to make. Just made a really obvious change to test.)

Dockerfile:

FROM gokapi:v1.8.4

COPY ./web/templates/ /app/templates/
COPY ./web/static/ /app/static/

# https://github.com/Forceu/Gokapi/discussions/184#discussioncomment-9871479
RUN mv /app/static/css/cover.css /app/static/css/min/gokapi.min.css

[Forceu]

@MalteMagnussen I was thinking of adding a function to upload CSS and JS files that are in addition to the regular files. This would solve the problem of having to make sure that the modified versions are still compatible after an Gokapi update. Do you think that would make sense or is the current way better, as it is possible to make more in-depth changes?

[MalteMagnussen]

@Forceu - By now we've done the following changes:

• Remove the logout button (Seems broken when using SSO)
• Remove the QR code button (Stakeholders wanted this, idk why)
• Change the link generated by the URL and Hotlink button
  • We have one URL that people access the /admin panel through.
  • We have another URL for customers, to download the files.
  • Both URL's are the same app underneath, but branded differently.
  • Was a bit difficult, because whenever you upload a file, it uses js to create a new row, but when you load the admin page, the html comes from Go templating.
• We use javascript to style the download page (one url) and admin panel page (another url) differently.
• Add a Litestream sidecar to keep the state of the SQLite DB even in a Kubernetes env that has no persistent volumes
• Add a Fluentbit sidecar to change the log format to json for easy ingestion into Elastic
• Build the image ourselves, so we can inject the changed css and js before the build and minify steps
• Maybe 1 or 2 more things I can't remember.

The problem with changing the js and css ourselves is the maintenance overhead whenever you update those files. Then whoever is applying the update on our side needs to make sure we get the js and css updates you've made (if any). But also make sure we keep the changes we have made.

Maybe it would be easier with a feature to upload "extra/overriding" js/css? Depends on how it is implemented.

Not something we're needing atm, but maybe others users would like it?

Just sharing the modifications we have made, so you can get an idea of our usage :)