I’m trying to make frontend/CSS changes in a local Galaxy installation, but the changes I make aren’t appearing in the interface. I’m having trouble applying even the most basic CSS changes.
Changes I Made:
Changed the background color of the .theme-masthead class in the client/src/components/User/ThemeSelector.vue file from orange (#ff5500) to blue (#0000ff).
This is a very simple change that should be visible in the interface.
Steps I’ve Tried:
File Editing:
Edited the client/src/components/User/ThemeSelector.vue file
Saved the change and confirmed the file was successfully updated
Rebuilding Client:
Ran cd ~/galaxy && ./rebuild_client.sh command
Tried cd ~/galaxy/client && yarn run build-production command
In both cases, received various “Module not found” errors
Manually Creating Hash File:
Ran cd ~/galaxy && date | md5sum | cut -d' ' -f1 > static/client_build_hash.txt command
Confirmed the hash file was created
Restarting Galaxy:
Restarted Galaxy with cd ~/galaxy && ./run.sh command
The application started successfully and is running
Clearing Cache:
Completely cleared browser cache (in Chrome and Firefox)
Opened Galaxy in Incognito/Private mode
Tried hard refresh (Ctrl+F5)
Cleaning static/dist Folder:
Cleaned build outputs with cd ~/galaxy && rm -rf static/dist command
Then tried rebuilding the client again
Running in Developer Mode:
Tried running in developer mode with cd ~/galaxy && ./run.sh --dev command
Errors I’m Encountering:
I get many “Module not found” errors during the client build process
Example error messages:
ERROR in ./src/components/WorkflowInvocationState/InvocationMessage.vue?vue&type=script&setup=true&lang=ts
Module not found: Error: Can't resolve '@/composables/useWorkflowInstance' in '/home/refgen/galaxy/client/src/components/WorkflowInvocationState'
The Galaxy application runs but CSS changes aren’t reflected
System Information:
Operating System: Linux (Ubuntu)
Galaxy Version: v24.1
Node.js Version: v20.18.3
Yarn Version: 10.8.2
Browser: Chrome and Firefox (latest versions)
Questions:
How can I properly apply CSS changes when doing local development in Galaxy?
How can I resolve the “Module not found” errors in the client build process?
What exact steps should I follow for changes in Vue components like ThemeSelector.vue to be reflected in the interface?
Is there more detailed documentation about Galaxy’s frontend development workflow?
Thanks for your question. It was temporary flagged for a person to review, so apologies for the delay (I also cleaned up the duplicated post). So now, let’s get to helping you!
Interesting question, and I think we’ll need developer feedback. All of your details are great, so thanks for including those. They will probably reply here, but also feel free to join that chat now or later. You're invited to talk on Matrix
Looking at the steps you’re following – where is this rebuild_client.sh coming from? Can you provide a bit more information about what sort of Galaxy installation this is?
The very short version of how I’d recommend running is, given a running Galaxy installation (with ./run.sh already active and running on port 8080, and assuming you are using the default .venv virtual environment), in a separate terminal window:
cd <galaxy>/client
source ../.venv/bin/activate
yarn install && yarn develop
This may take a moment, but then you’ll see something like:
<i> [webpack-dev-server] [HPM] Proxy created: ** -> http://127.0.0.1:8080
<i> [webpack-dev-server] Project is running at:
<i> [webpack-dev-server] Loopback: http://localhost:8081/
<i> [webpack-dev-server] On Your Network (IPv4): http://172.19.93.194:8081/
<i> [webpack-dev-server] Content not from webpack is served from '/home/dannon/work/galaxy/client/public' directory
<i> [webpack-dev-middleware] wait until bundle finished: /
Note that last message about waiting until the build is finished. Once it is, access your galaxy at port 8081, and you’ll see a hot-reloading client that will proxy all other connections to your existing, running galaxy on 8080. This means you can tweak things, pretty much immediately refresh the browser (or it will usually refresh on its own), and see changes you have made right away.
