Skip to content

Modernize DevSpace UI frontend toolchain#3267

Open
sts wants to merge 16 commits into
devspace-sh:mainfrom
sts:ui-upgrade-react-19
Open

Modernize DevSpace UI frontend toolchain#3267
sts wants to merge 16 commits into
devspace-sh:mainfrom
sts:ui-upgrade-react-19

Conversation

@sts
Copy link
Copy Markdown

@sts sts commented May 28, 2026

This PR modernizes the DevSpace UI frontend stack while keeping the existing Webpack-based build and UI behavior intact.

The main goals are to move the UI onto current React/TypeScript tooling, remove deprecated frontend packages, simplify the custom CRA-era build scripts, and make local/release UI builds more reproducible.

What changed

  • Upgraded the UI runtime from React 16 to React 19.
  • Updated the Node target to Node 24 and added ui/.nvmrc.
  • Upgraded TypeScript and related webpack type-checking tooling.
  • Migrated from TSLint to ESLint with a repo-local flat config.
  • Upgraded Webpack dev server and replaced the old custom hot client with the built-in Webpack 5 dev-server client.
  • Replaced deprecated xterm packages with maintained @xterm/* packages.
  • Updated the interactive terminal integration to use the maintained attach addon.
  • Deferred terminal resize requests until the websocket is open to avoid resize_id does not exist errors.
  • Removed unused Jest scaffolding since the UI had no test script or test files.
  • Removed unused frontend dependencies such as moment, history, react-cookie, react-timeago, js-sha256, isomorphic-unfetch, and others.
  • Modernized TypeScript output to es2020 and the automatic React JSX runtime.
  • Upgraded css-loader and applied compatible audit fixes, removing the old PostCSS 7 vulnerability chain.
  • Simplified the frontend build scripts by replacing direct react-dev-utils usage with small local helpers.
  • Made hack/build-ui.bash use npm ci for reproducible installs.
  • Made hack/build-all.bash handle prebuilt UI artifacts more robustly and resolve go-bindata from PATH before falling back to GOPATH/bin.

Compatibility notes

This keeps the existing Webpack build model rather than migrating the UI to a new bundler. The current CSS Modules/SCSS setup is preserved, and the production UI artifact is still packaged through the existing hack/build-ui.bash
flow.

The Google Tag Manager snippet is intentionally left unchanged in this PR.

npm audit is improved, but not fully clean. The remaining non-forced audit findings are currently tied to workbox-webpack-plugin and webpack-dev-server transitive dependencies. Fixing those cleanly should be handled separately,
likely by removing Workbox if the local UI does not need service-worker caching.

Validation

Ran successfully:

  • npm ci
  • npx tsc --noEmit --project tsconfig.json
  • npm run lint
  • npm run build
  • ./hack/build-ui.bash
  • ./hack/build-all.bash
  • UI tests: devspace dev, devspace ui, menu bar, view logs, enter xterm terminal, enter xterm commands, close xterm terminal, run commands

@netlify
Copy link
Copy Markdown

netlify Bot commented May 28, 2026

Deploy Preview for devspace-docs canceled.

Built without sensitive environment variables

Name Link
🔨 Latest commit 12b9acf
🔍 Latest deploy log https://app.netlify.com/projects/devspace-docs/deploys/6a18b648629dd10008648c8e

@sts sts force-pushed the ui-upgrade-react-19 branch from 538f684 to 12b9acf Compare May 28, 2026 21:40
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant