feat(FR-2606): Vite PoC phase 1 — dev server + HMR + React Compiler parity by nowgnuesLee · Pull Request #6869 · lablup/backend.ai-webui

nowgnuesLee · 2026-04-22T05:29:48Z

Summary

First commit of the Vite migration stack. Stands up a working Vite dev server that mirrors the CRA/Craco dev behaviour so downstream commits can iterate safely.

react/vite.config.ts: @vitejs/plugin-react with babel-plugin-react-compiler (annotation mode), babel-plugin-relay, and vite-plugin-svgr. React Compiler parity with the existing CRA babel config.
projectRootStaticPlugin: serves /resources/, /manifest/, /dist/, /config.toml, etc. from the project root and reads the real project-root index.html as the SPA template (replaces craco devServer.static + HtmlWebpackPlugin).
transformIndexHtml hook injects /src/index.tsx, strips {{nonce}} in dev, and shims process.env.NODE_ENV = 'development' so dev-only branches still work.
Module aliases for src/, backend.ai-ui workspace source, backend.ai-client-esm (from dist/lib), and ESM shims for CJS leaf deps (void-elements, use-sync-external-store/shim).
optimizeDeps.exclude: ['backend.ai-ui', 'i18next', 'react-i18next'] — intentional; see the follow-up commit that explains the i18n dual-instance requirement.

Test plan

pnpm run vite:dev serves the app at localhost:9083 with HMR working
React Compiler 'use memo' annotations are applied (manual diff verified post-build)
Relay graphql\`tagged templates resolve togenerated/*` imports

Stack

Part of the Vite migration stack: FR-2606 → FR-2607 → FR-2610 → FR-2608 → FR-2609 → FR-2611 + fixes.

nowgnuesLee · 2026-04-22T05:30:02Z

fix(FR-2529): include backend.ai-client src in craco TS loader and tsconfig paths #6615
refactor(FR-2529): extract backend.ai-client as standalone workspace package #6614
fix(FR-2607): align Electron publicPath patch with Vite output #7189
fix(FR-2606): clear residual build-time warnings (BUI dts + module directive) #7113
fix(FR-2606): restore Monaco self-hosting in Vite dev server #7104
feat(FR-2748): fully migrate test files from jest.* to vi.* and align TS globals #7083
feat(FR-2746): re-enable 5 tests skipped during Vitest migration #7071
feat(FR-2744): restore Vitest coverage reporting in CI #7065
fix(FR-2606): replace webpackIgnore with @vite-ignore in dynamic plugin imports #6879
fix(FR-2606): replace global.packageVersion with globalThis.packageVersion in WebUISider #6878
fix(FR-2608): disable vite-plugin-pwa auto-manifest to preserve existing manifest.json #6877
feat(FR-2611): retire Craco/Webpack — build, Makefile, CI all on Vite/Vitest #6876
feat: migrate BUI + root tests from Jest to Vitest (follow-up to FR-2609) #6875
feat(FR-2609): Vitest migration for react/ (100% pass, 856/856 tests) #6874
feat(FR-2608): Vite production build with vite-plugin-pwa service worker #6873
feat(FR-2610): Vite dev-reload plugin for i18n / theme / config.toml file changes #6872
feat(FR-2607): Vite spike answer — es6:// Electron publicPath works via renderBuiltUrl #6871
feat(FR-2606): restore BUI i18n context isolation under Vite dep optimization #6870
feat(FR-2606): Vite PoC phase 1 — dev server + HMR + React Compiler parity #6869 👈 (View in Graphite)
main

How to use the Graphite Merge Queue

Add either label to this PR to merge it via the merge queue:

flow:merge-queue - adds this PR to the back of the merge queue
flow:hotfix - for urgent changes, fast-track this PR to the front of the merge queue

You must have a Graphite account in order to use the merge queue. Sign up using this link.

_{An organization admin has required the Graphite Merge Queue in this repository.} _{Please do not merge from GitHub as this will restart CI on PRs being processed by the merge queue.}

This stack of pull requests is managed by Graphite. Learn more about stacking.

github-actions · 2026-04-27T14:00:56Z

Coverage report for `./react`

St.^❔	Category	Percentage	Covered / Total
🔴	Statements	8.12% (+0% 🔼)	1859/22905
🔴	Branches	7.35%	1187/16156
🔴	Functions	4.83% (+0.02% 🔼)	297/6154
🔴	Lines	7.89% (+0% 🔼)	1750/22190

Test suite run success

865 tests passing in 40 suites.

Report generated by 🧪jest coverage report action from 4ac49a9

Copilot

Pull request overview

Adds an initial Vite-based dev-server setup for the react/ workspace to support the Phase 1 PoC of migrating off CRA/Craco while preserving dev-mode behavior (HMR, Relay artifacts, React Compiler annotations, and project-root static asset serving).

Changes:

Introduces react/vite.config.ts with Vite dev server config, custom project-root static middleware, HTML transforms, Relay artifact directory routing, SVGR, and Node polyfills.
Adds a vite:dev script and Vite-related devDependencies in react/package.json.
Documents Phase 1 scope, validation steps, and follow-ups in react/VITE_POC_NOTES.md.

Reviewed changes

Copilot reviewed 3 out of 4 changed files in this pull request and generated 4 comments.

File	Description
react/vite.config.ts	New Vite config + dev-server middleware to mirror Craco/Cra dev behavior and Babel plugin parity (React Compiler + Relay).
react/package.json	Adds `vite:dev` script and Vite/plugin devDependencies for the PoC.
react/VITE_POC_NOTES.md	Captures PoC rationale, verification evidence, and known follow-ups.

graphite-app · 2026-04-30T12:11:47Z

Merge activity

Apr 30, 12:11 PM UTC: yomybaby added this pull request to the Graphite merge queue.
Apr 30, 12:23 PM UTC: Merged by the Graphite merge queue.

…arity (#6869) Resolves #6809(FR-2606) ## Summary First commit of the Vite migration stack. Stands up a working Vite dev server that mirrors the CRA/Craco dev behaviour so downstream commits can iterate safely. - `react/vite.config.ts`: `@vitejs/plugin-react` with `babel-plugin-react-compiler` (annotation mode), `babel-plugin-relay`, and `vite-plugin-svgr`. React Compiler parity with the existing CRA babel config. - `projectRootStaticPlugin`: serves `/resources/`, `/manifest/`, `/dist/`, `/config.toml`, etc. from the project root and reads the real project-root `index.html` as the SPA template (replaces craco `devServer.static` + `HtmlWebpackPlugin`). - `transformIndexHtml` hook injects `/src/index.tsx`, strips `{{nonce}}` in dev, and shims `process.env.NODE_ENV = 'development'` so dev-only branches still work. - Module aliases for `src/`, `backend.ai-ui` workspace source, `backend.ai-client-esm` (from `dist/lib`), and ESM shims for CJS leaf deps (`void-elements`, `use-sync-external-store/shim`). - `optimizeDeps.exclude: ['backend.ai-ui', 'i18next', 'react-i18next']` — intentional; see the follow-up commit that explains the i18n dual-instance requirement. ## Test plan - [x] `pnpm run vite:dev` serves the app at localhost:9083 with HMR working - [x] React Compiler `'use memo'` annotations are applied (manual diff verified post-build) - [x] Relay `graphql\`\`` tagged templates resolve to `__generated__/*` imports ## Stack Part of the Vite migration stack: FR-2606 → FR-2607 → FR-2610 → FR-2608 → FR-2609 → FR-2611 + fixes.

github-actions Bot assigned nowgnuesLee Apr 22, 2026

github-actions Bot added the size:XL 500~ LoC label Apr 22, 2026

nowgnuesLee force-pushed the 04-20-feat_fr-2606_vite_poc_phase_1_dev_server_hmr_react_compiler_parity branch from bf0e617 to 7cb1e84 Compare April 27, 2026 13:57

nowgnuesLee mentioned this pull request Apr 27, 2026

fix(FR-2606): restore Monaco self-hosting in Vite dev server #7104

Merged

3 tasks

nowgnuesLee mentioned this pull request Apr 28, 2026

fix(FR-2606): clear residual build-time warnings (BUI dts + module directive) #7113

Merged

2 tasks

nowgnuesLee marked this pull request as ready for review April 28, 2026 04:25

Copilot AI review requested due to automatic review settings April 28, 2026 04:25

Copilot started reviewing on behalf of nowgnuesLee April 28, 2026 04:25 View session

Copilot AI reviewed Apr 28, 2026

View reviewed changes

Comment thread react/vite.config.ts Outdated

Comment thread react/vite.config.ts

Comment thread react/vite.config.ts

Comment thread react/vite.config.ts

nowgnuesLee force-pushed the 04-20-feat_fr-2606_vite_poc_phase_1_dev_server_hmr_react_compiler_parity branch from 7cb1e84 to c115607 Compare April 28, 2026 05:02

yomybaby mentioned this pull request Apr 30, 2026

fix(FR-2607): align Electron publicPath patch with Vite output #7189

Merged

yomybaby force-pushed the 04-20-feat_fr-2606_vite_poc_phase_1_dev_server_hmr_react_compiler_parity branch from c115607 to 7807fa6 Compare April 30, 2026 12:08

github-actions Bot added poc quick-capture labels Apr 30, 2026

yomybaby mentioned this pull request Apr 30, 2026

refactor(FR-2529): extract backend.ai-client as standalone workspace package #6614

Merged

4 tasks

yomybaby mentioned this pull request Apr 30, 2026

fix(FR-2529): include backend.ai-client src in craco TS loader and tsconfig paths #6615

Closed

5 tasks

graphite-app Bot force-pushed the 04-20-feat_fr-2606_vite_poc_phase_1_dev_server_hmr_react_compiler_parity branch from 7807fa6 to 4ac49a9 Compare April 30, 2026 12:12

graphite-app Bot merged commit 4ac49a9 into main Apr 30, 2026
12 checks passed

graphite-app Bot deleted the 04-20-feat_fr-2606_vite_poc_phase_1_dev_server_hmr_react_compiler_parity branch April 30, 2026 12:23

github-pages Bot temporarily deployed to github-pages April 30, 2026 12:24 Inactive

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat(FR-2606): Vite PoC phase 1 — dev server + HMR + React Compiler parity#6869

feat(FR-2606): Vite PoC phase 1 — dev server + HMR + React Compiler parity#6869
graphite-app[bot] merged 1 commit intomainfrom
04-20-feat_fr-2606_vite_poc_phase_1_dev_server_hmr_react_compiler_parity

nowgnuesLee commented Apr 22, 2026 •

edited

Loading

Uh oh!

nowgnuesLee commented Apr 22, 2026 •

edited by yomybaby

Loading

Uh oh!

github-actions Bot commented Apr 27, 2026 •

edited

Loading

Uh oh!

Copilot AI left a comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

graphite-app Bot commented Apr 30, 2026 •

edited

Loading

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

Conversation

nowgnuesLee commented Apr 22, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary

Test plan

Stack

Uh oh!

nowgnuesLee commented Apr 22, 2026 • edited by yomybaby Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

How to use the Graphite Merge Queue

Uh oh!

github-actions Bot commented Apr 27, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Coverage report for ./react

Test suite run success

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Reviewed changes

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

graphite-app Bot commented Apr 30, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Merge activity

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

nowgnuesLee commented Apr 22, 2026 •

edited

Loading

nowgnuesLee commented Apr 22, 2026 •

edited by yomybaby

Loading

github-actions Bot commented Apr 27, 2026 •

edited

Loading

Coverage report for `./react`

graphite-app Bot commented Apr 30, 2026 •

edited

Loading