UI changes not reflecting

Hello, I have Vikunja running in docker compose and I’m trying to make some simple changes to the UI, just added some exclamation marks to some text for now, goal being to get hot-reload working (i.e. to see changes as soon as I make them).

But right now whatever changes I make don’t reflect. I ran pnpm run build and then docker compose up --build. Tried docker compose down as well to make sure the image was being changed but no luck.

Also tried running Vikunja frontend standalone by running pnpm run serve but on the UI screen it errors that the API server is not up, even though when I hit the URL I can see it’s running on that exact port and endpoint.

Hi ankit,

which version are you using? If you’re using a relatively recent version, building a new container won’t be enough. In essence you would need:

  • Build the frontend part using pnpm run build
  • Build a new Go binary, as the frontend is included in and served from the Go binary directly
  • Build a new container with the new Go binary

This is not very practical for development, so what I typically do is to run the frontend separately (pnpm dev typically is enough) and point it to the backend. When pointing to an existing backend, keep in mind it requires the /api/v1 suffix). The message on the screenshot goes away once I confirm the URL I have entered there.

Also keep in mind that you may need to change the CORS settings of the backend, if configured, otherwise the frontend will not be able to talk to the backend. In our case, the settings are:

cors:
  enable: true
  origins:
    - "https://todo.mxxx.de"
    - "http://127.0.0.1:4173"

The docker image contains multi stage builds and should give you a working version without any other steps required when you run docker build. For that to work with compose, you need to point your compose file to the directory with your Vikunja changes using the build directive.