Replace Webpack with Vite for client build#21369
Merged
mvdbeek merged 59 commits intogalaxyproject:devfrom Dec 3, 2025
Merged
Conversation
4 tasks
jmchilton
reviewed
Nov 30, 2025
| * This allows `GALAXY_URL=https://usegalaxy.org yarn develop` to work with | ||
| * full HMR support without any server-side changes. | ||
| */ | ||
|
|
Member
There was a problem hiding this comment.
Well that is fun - very clever!
Member
Author
There was a problem hiding this comment.
So much cleaner (from the usability side) than the previous env var variant toggling the extra stuff server-side in the mako :)
Member
Author
|
Looks like I need to address memory usage issues to make the build work in CI, similar to webpack. I'll iterate on it. |
Member
|
The selenium failures seem consistent - I think there something consistently wrong with the build around the workflow editor. I assume the playwright tests aren't failing because those tests haven't been migrated. Let me know if you want to delegate at least looking into the issue and tests some more and characterizing it for you so you can focus on downstream things. |
Member
Author
|
@jmchilton Yep, they're legit -- one real issue w/ monaco packaging that I think I have a handle on now, but I haven't played with the other workflow editor ones yet. I'll give it a look when I wrap up the monaco stuff, and then can happily pass it on if I can't resolve them right away. |
Member
|
I suppose the monaco tests are still legitimate failures, should I see if I can make sense of them ? |
Member
Author
|
@mvdbeek Yeah, I fixed the stale handle issue earlier this morning but I hadn't pushed yet -- I think there may be one more legit monaco issue though if you wanted to look. Try test_run_custom_tool locally to see it |
Use explicit paths for SCSS imports that Vite cannot resolve, including custom_theme_variables.scss in App.vue, base.scss in 3 files, _breakpoints.scss in 7 files, and theme/blue.scss in 1 file.
Vite requires relative paths for worker imports to resolve correctly.
Replace // comments with /* */ which is valid CSS syntax.
Use Object type instead of IconDefinition for the icon prop to avoid type import issues in non-TypeScript Vue files.
faGear is only available in Font Awesome 6 (FA5 uses faCog), so import it from the font-awesome-6 alias.
Configure Vite to proxy all requests (except its own routes) to the Galaxy backend, matching webpack-dev-server behavior. Supports GALAXY_URL env var to specify backend (default: http://127.0.0.1:8080), CHANGE_ORIGIN env var for remote server support, and listens on 0.0.0.0 for network access.
Creates src/entry/libs.js that exposes required globals (jQuery, underscore, bundleEntries, config) to window for legacy Mako templates. Also updates vite.config.mjs to add libs as an entry point and disables CSS code splitting for single base.css output.
Rename vite-plugin-webpack-aliases.js to vite-plugin-galaxy-legacy.js and remove webpack-related comments and unused getWebpackAliases function.
Remove publicPath.js (webpack-specific), consolidate jquery.custom.js to ESM version, remove __webpack_public_path__ global, and update comments throughout to remove webpack mentions.
Bootstrap-vue checks Vue.version at module init time, which fails when loaded as a separate chunk because ES modules can execute in parallel. Keep these libraries in the main bundle for now - can revisit with dynamic imports in a followup.
- Configure Monaco workers with Vite's ?worker syntax in CustomToolEditor - Use lazy monacoInstance pattern in YamlJs.ts to avoid AMD loader issues - Import CustomToolEditor statically (async loading incompatible with Vue Router 3.x + Vite) The static import increases bundle size by ~7MB but is necessary until Vue Router 4 migration.
Add type declarations for Vite's ?worker suffix imports and use the proper IDisposable type from monaco-types.
Convert the dynamic import of the layout module to a static import. The dynamic import was causing the app to reinitialize after clicking auto-layout in production builds, clearing the workflow stores. This increases the initial bundle size slightly (elkjs is now bundled with the main chunk instead of being lazy-loaded), but ensures the workflow editor functions correctly. TODO: Investigate why dynamic imports in Vite production builds cause this behavior, and consider alternative code-splitting approaches like defineAsyncComponent or manual chunk configuration.
Vite's template compiler doesn't preserve whitespace between inline elements the way Webpack did, so the tool name and description were running together. Adding an explicit space fixes this.
The .view-line elements inside Monaco editor get re-rendered as the editor updates, causing StaleElementReferenceException. Use the stable .monaco-editor container instead.
dannon
force-pushed
the
vite-reorganized
branch
from
15a665b to
842bf5e
Compare
The queue processing for config.set() calls was added to handle a race condition in Vite dev mode, but no Mako templates actually use config.set(). This removes the dead code and simplifies the Window type declaration.
mvdbeek
reviewed
Dec 3, 2025
| editor = self.wait_for_selector_visible(".monaco-editor div.view-line") | ||
| # Try finding Monaco editor and replace skeleton content | ||
| self.sleep_for(self.wait_types.UX_RENDER) # Allow editor to initialize | ||
| # Use the stable .monaco-editor container, not .view-line which gets re-rendered |
Member
mvdbeek
approved these changes
Dec 3, 2025
Member
mvdbeek
left a comment
mvdbeek
left a comment
There was a problem hiding this comment.
This is awesome, and I think the build also nicely stays below the 4GB limit during the build phase, while completing in reasonable time (83 seconds for me).
This seems cleaner ?
mvdbeek
force-pushed
the
vite-reorganized
branch
from
0cfdf13 to
57a3aa6
Compare
This reverts commit 57a3aa6.
Member
|
So something weird is going on. this is with or without the last commit. |
Member
|
ahhhh, the makefile specifies |
bundleEntries.js was deleted upstream and no templates use window.bundleEntries or window.config anymore. Removes dead code from entry points.
This preserves whitespace in Vue templates globally, matching the
default behavior of Webpack's vue-loader. Removes the need for
explicit {{ " " }} hacks in Tool.vue.
Note: Vue 3+ defaults to 'condense' which produces smaller bundles
but can break layouts when whitespace between elements spans
newlines. A future cleanup could switch to condense after auditing
components and using CSS margins instead of whitespace for spacing.
|
This PR was merged without a "kind/" label, please correct. |
nsoranzo
added
kind/enhancement
kind/refactoring
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
5 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Following up on the Vitest migration, this swaps out Webpack for Vite as the
client bundler. Since Vitest already uses Vite under the hood, this gets us on
a single modern toolchain for both building and testing.
The branch is a cleaned up rebase of previous Vite work - same functionality,
just reorganized into cleaner commits. Webpack and Babel dependencies are
removed (~30 packages), build time is around 35 seconds, and all the output
files match what templates expect.
Builds on #21194 and #21348
Will probably need some followup, but the dev server setup ended up being
straightforward - no crazy workarounds needed, and it should be easy to build
on going forward.
How to test the changes?
(Select all options that apply)
License