Iris Apps have been migrated from Rspack to Vite as the build system. Vite provides near-instant dev server startup, fast HMR using native ES modules, and optimized production builds.
Affected packages:
- @trackunit/iris-app-sdk-vite — new package, replaces
@trackunit/iris-app-sdk-rspack for build and serve
- @trackunit/iris-app-sdk-rspack — deprecated for Iris Apps, will be removed in a future version
Old executors removed:
- @trackunit/iris-app:build — removed (was already deprecated)
- @trackunit/iris-app:serve — removed (was already deprecated)
Step 1: Update all Trackunit dependencies
Make sure you are on the latest Trackunit dependencies:
npx npm-check-updates "/@trackunit/" -u
Then install:
npm install
npm install @trackunit/iris-app-sdk-vite -D
Step 2: Update project.json
Replace the Rspack executors with the Vite equivalents.
Before:
{
"targets": {
"build": {
"executor": "@trackunit/iris-app-sdk-rspack:build",
"options": {
"rspackConfig": "apps/{app-name}/rspack.config.ts",
"outputPath": "dist/apps/{app-name}"
},
"outputs": ["{options.outputPath}"]
},
"serve": {
"executor": "@trackunit/iris-app-sdk-rspack:serve",
"options": {
"rspackConfig": "apps/{app-name}/rspack.config.ts"
}
}
}
}
After:
{
"targets": {
"build": {
"executor": "@trackunit/iris-app-sdk-vite:build",
"options": {
"outputPath": "dist/apps/{app-name}"
},
"outputs": ["{options.outputPath}"]
},
"serve": {
"executor": "@trackunit/iris-app-sdk-vite:serve",
"options": {}
}
}
}
Key changes:
- Executor changed from
@trackunit/iris-app-sdk-rspack to @trackunit/iris-app-sdk-vite
- The
rspackConfig option is removed — Vite works with zero config by default
- Optionally, you can add a
viteConfig option if you need custom configuration (see Step 3)
Step 3: Replace rspack.config.ts with vite.config.ts
Delete your existing rspack.config.ts file.
If you had no customizations in your rspack config (i.e., it just returned the default configuration), you can skip creating a vite config entirely — it works out of the box.
If you need custom configuration, create a vite.config.ts in your app root:
import { defineConfig, UserConfig } from "vite";
export default defineConfig(async (configuration: UserConfig): Promise<UserConfig> => {
return configuration;
});
You can extend the default configuration by spreading and adding your overrides:
import { defineConfig, UserConfig } from "vite";
export default defineConfig(async (configuration: UserConfig): Promise<UserConfig> => {
return {
...configuration,
define: {
...configuration.define,
__MY_CUSTOM_FLAG__: JSON.stringify(true),
},
};
});
Then reference it in your project.json:
{
"serve": {
"executor": "@trackunit/iris-app-sdk-vite:serve",
"options": {
"viteConfig": "apps/{app-name}/vite.config.ts"
}
},
"build": {
"executor": "@trackunit/iris-app-sdk-vite:build",
"options": {
"viteConfig": "apps/{app-name}/vite.config.ts",
"outputPath": "dist/apps/{app-name}"
}
}
}
Step 4: Remove tailwind.config.js (if present)
If your app has a tailwind.config.js file, delete it. Tailwind CSS v4 is now configured automatically by the Vite plugin using PostCSS — no manual Tailwind config is needed.
See the Tailwind 4 upgrade changelog for more details on the Tailwind migration.
Step 5: Clean up old dependencies
Remove unwanted packages from your NX's package.json (if present):
@trackunit/iris-app-webpack-plugin
@trackunit/iris-app-sdk-rspack
@rspack/core
@rspack/dev-server,
copy-webpack-plugin
css-loader
esbuild-loader
style-loader
postcss
postcss-loader
json-loader
webpack
webpack-cli
webpack-dev-server
Then install to update your lockfile:
Step 6: Verify
Run serve and build to verify everything works:
npx nx run {app-name}:serve
npx nx run {app-name}:build
The dev server will start on a port in the range 22220–22229 and print a link to open your app:
✨ Iris App is now started, check it out ✨
https://new.manager.trackunit.com/goto/iris-app-dev
New executor options
Serve options
| Option | Type | Default | Description |
|---|
viteConfig | string | — | Path to custom Vite config file (optional) |
port | number | auto (22220-22229) | Dev server port |
host | string | localhost | Dev server host |
skipTypeChecking | boolean | false | Skip TypeScript type checking during dev |
Build options
| Option | Type | Default | Description |
|---|
viteConfig | string | — | Path to custom Vite config file (optional) |
outputPath | string | — | Output directory (required) |
skipTypeChecking | boolean | false | Skip TypeScript type checking during build |
Bundle analysis
To analyze your bundle size, set the BUNDLE_ANALYSE environment variable:
BUNDLE_ANALYSE=true npx nx run {app-name}:build
This generates a stats.html file in the output directory using rollup-plugin-visualizer.
Troubleshooting
CORS errors during development
The Vite dev server automatically sets CORS headers for Trackunit domains. If you see CORS errors:
- Verify the Vite server is running
- Check that "Use Local Apps" is enabled in developer settings
- Ensure no proxy is interfering with requests