vite-plugin-ui5

vite-plugin-ui5

Vite plugin for SAP Fiori/UI5 applications.

Installation

npm install vite-plugin-ui5

Configuration

Add the plugin to your vite.config.js:

import { defineConfig } from "vite";
import ui5 from "vite-plugin-ui5";

export default defineConfig({
  plugins: [ui5()],
  server: {
    proxy: {
      "/resources/": "https://ui5.sap.com",
      "/test-resources/": "https://ui5.sap.com",
    },
  },
});

The plugin reads manifest.json from the webapp directory to detect the UI5 application namespace automatically. UI5 framework resources (/resources/*, /test-resources/*) are not proxied by the plugin — configure Vite's server.proxy to point them at the CDN of your choice.

Options

ui5({
  // Path to webapp directory relative to cwd.
  // Default: 'webapp'
  webappPath: "webapp",

  // Custom module path aliases.
  aliases: { "@shared": "./src/shared" },

  // Set to true when the app uses ESM syntax (import/export) or TypeScript.
  // The plugin transpiles app files to AMD at serve time
  // using babel-plugin-transform-modules-ui5 so the UI5 loader can handle them.
  // Default: false (classic UI5/AMD -> sap.ui.define)
  isESM: false,
});

Writing UI5 apps

Classic AMD (default)

Regular UI5 apps using sap.ui.define work out of the box with no extra configuration:

// Component.js
sap.ui.define(["sap/ui/core/UIComponent"], function (UIComponent) {
  return UIComponent.extend("my.app.Component", {
    metadata: { manifest: "json" },
  });
});

ESM (isESM: true)

With isESM: true, app files can be written using standard ESM syntax. The plugin transpiles them to AMD at serve time using babel-plugin-transform-modules-ui5:

// Component.js
import UIComponent from "sap/ui/core/UIComponent";

export default UIComponent.extend("my.app.Component", {
  metadata: { manifest: "json" },
});

TypeScript (isESM: true)

TypeScript files are also supported when isESM: true. Type annotations and ES class syntax are stripped and transpiled to AMD:

// Component.ts
import UIComponent from "sap/ui/core/UIComponent";

export default class Component extends UIComponent {
  public static metadata = { manifest: "json" };
}

How it works

Module resolution

The plugin resolves three categories of imports:

Framework resources

Requests to /resources/* and /test-resources/* are passed through to Vite's proxy. Configure server.proxy in your vite.config.ts to forward them to the UI5 CDN of your choice. All other webapp files are served statically, except .js/.ts files when isESM: true which pass through Vite's transform pipeline.

HMR

Any file change inside webappDir triggers a full page reload. UI5's AMD loader does not support partial module re-evaluation, so granular HMR is not possible.

Playground

Integration with UI5 CLI

vite-plugin-ui5 is a development tool only. Production builds should continue to use @ui5/cli: