App toolkit now runs on Vite, with HMR dev server and code splitting

The Dynatrace App Toolkit has a new engine under the hood: Vite. This new engine replaces the custom dev server built on esbuild and Fastify, and it powers a new optimized production build. For you, that means hot module replacement (HMR) while you develop and further optimizations for production builds, including code splitting for smaller bundles and faster apps. Check out Code optimization for detailed guidance on improving your app's performance.

Why Vite

The old dev server was one of the oldest, most interconnected parts of the toolchain, and esbuild's plugin model made it brittle to extend. Plugins weren't chainable and each file could pass through only one loader, which caused friction for features like i18n combined with vanilla-extract. Adding support for common tooling such as Sass meant hand-rolling it in the build.

Vite solves this the way the rest of the ecosystem already has—Angular, SolidStart, Remix, Astro, and React's own recommended setup all build on it. Its Rollup-compatible plugin system gives you a huge catalog of integrations out of the box, and it leaves the toolchain far easier to maintain and evolve. The migration also moved the toolchain onto Vite 8 with Rolldown support, keeping it aligned with where the ecosystem is heading.

Instant feedback with HMR

Run the dev server with the new --hmr flag and you get two immediate wins: the server starts significantly faster, and edits show up in the browser instantly, without a full-page reload:

npx dt-app dev --hmr

Because the page never reloads, your app keeps its state across edits, so you stay in flow instead of clicking your way back to where you were. Fastify is gone from this path, source maps still work exactly as before, and breakpoints still hit—so debugging is unchanged. HMR works for the app UI as well as for Workflow and Settings widgets.

Smaller production bundles with code splitting

The new production build is opt-in behind the --optimize flag, which is available on the build, deploy, and analyze commands. Add --enable-code-splitting to break your bundle into chunks that load on demand instead of shipping everything upfront:

npx dt-app build --optimize --enable-code-splitting
npx dt-app deploy --optimize --enable-code-splitting

When code splitting is on, the build automatically splits lazy loaded components into their own chunks. The build splits CSS the same way. If you use vanilla-extract, it keeps working, though you might need its dedicated Vite plugin. You don't create a vite.config.js — the toolkit manages Vite configuration internally.

Check out the Lazy loading quickstart for a step-by-step guide to converting your routes and heavy components to lazy loading. The Understand lazy loading guide explains the principles and provides more detailed guidance.

What's next

These features are opt-in for now, but that's changing. In the near future, Vite will be the default engine for all dt-app commands—no flags required. Stay tuned for more updates.