Iris Apps now use Vite instead of Rspack

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:

npm install

Step 6: Verify

Run serve and build to verify everything works:

# Start dev server
npx nx run {app-name}:serve

# Production build
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:

1. Verify the Vite server is running
2. Check that "Use Local Apps" is enabled in developer settings
3. Ensure no proxy is interfering with requests