How to modify Web UI

[adam-zakaria]

Hello!

I am running DIVE locally using the docker compose from here https://kitware.github.io/dive/Deployment-Docker-Compose/

I want to modify the Web UI but cannot figure out how.

Some things I’ve tried:
I cannot find the client folder of vue files in any of the containers. I cannot figure out how Traefik is routing traffic: I understand it’s mapping 80 inside the container to 8010 outside the container, but I do not see where the web server is actually running. I say this all to demonstrate I’ve been trying to figure it out.

Any help is appreciated :)

[BryonLewis]

During the build process for the girder container the Application is copied from the repository in the ./client directory and yarn build:web is run to create the Vue application in a /dist directory.
https://github.com/Kitware/dive/blob/main/docker/girder.Dockerfile#L7-L13

That build is copied into the Girder static directory where it is served as the main application behind the default route for girder: https://github.com/Kitware/dive/blob/main/docker/girder.Dockerfile#L63

So if you change files in the ./client directory and then run docker-compose build followed by docker-compose up the container will have a new build of the WebUI.

A better way to do client development is to navigate to the /client directory in the repository. Run yarn to install all of the dependencies and then yarn serve to bring up the application at localhost:8080. If you have done docker-compose up the built container will run at localhost:8010. Now using yarn serve you can edit files and it will hot-reload the webUI in real-time. When you're done editing the UI you can run docker-compose build and next time the the containers are launched the changes will be included in the UI.

[adam-zakaria]

Hi Bryon, thanks so much for the prompt and excellent response. I’m having some trouble with yarn right now (seems like some proxy issues), but will confirm this works ASAP.

Edit: I’m able to make changes, see them in the web app, and with the hot reload. Thank you so much Bryon!