@sap/vite-plugin-leanix-custom-report
v9.0.3
Published
Vite plugin for developing SAP LeanIX Custom Reports
Readme
@sap/vite-plugin-leanix-custom-report
A Vite plugin for developing SAP LeanIX Custom Reports with hot reload, TypeScript support, and seamless deployment.
Features
- 🚀 Fast development with Vite's hot module replacement
- 📦 Automatic bundling and optimization for SAP LeanIX reports
- 🔧 Built-in TypeScript support
- 📤 One-command deployment to SAP LeanIX workspace
- ⚛️ Optimized for React with TypeScript
Prerequisites
- Node.js 24+ and npm/yarn/pnpm
- A SAP LeanIX workspace with API access
Get Started
- Install vite and this plugin with your favorite package manager, here use npm as example:
npm install vite @sap/vite-plugin-leanix-custom-report- Create a
vite.config.tsfile in your project root to config vite to actually use this plugin:
import { fileURLToPath, URL } from 'node:url';
import leanix from '@sap/vite-plugin-leanix-custom-report';
import { defineConfig } from 'vite';
export default defineConfig({
plugins: [leanix()],
resolve: {
alias: {
'@': fileURLToPath(new URL('./src', import.meta.url))
}
},
build: {
rollupOptions: {
input: {
app: './index.html'
}
}
}
});- Create an
./index.htmlfile that will be the entry point to you app:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Vite App</title>
</head>
<body>
<div id="app"></div>
<script type="module" src="/src/main.js"></script>
</body>
</html>Create an
./src/main.jsfile that you can use to add some behavior to your HTML page and/or import a framework such as Vue, React, etc.Add the "upload" command to the "script" section of your
package.jsonfile:
{
"scripts": {
"upload": "vite build --mode upload"
}
}- Make sure that the package.json file contains a "name", "version", and "description", and add the "leanixReport" section as follows:
{
"name": "your-report-name",
"version": "0.0.0",
"description": "Description of the report",
"leanixReport": {
"title": "Your Report Title",
"defaultConfig": {}
}
}- Authenticate with your SAP LeanIX workspace. The recommended way is OAuth via the CLI:
npx lxr loginThis opens a browser window, completes the OAuth flow, and saves credentials to ~/.leanix/lxr.json (shared across all reports on the machine).
Alternatively, you can create a lxr.json file manually in your project root with an API token:
{
"host": "<your workspace instance here, e.g. demo-eu.leanix.net>",
"apitoken": "<your workspace api token here>"
}A project-level lxr.json takes precedence over the user-level one.
⚠️ Security Note: Add lxr.json to your .gitignore. This file stores sensitive credentials (OAuth tokens and/or API tokens) and must never be committed to version control.
- You are now ready to start developing your report by issuing the following command
npm run devTroubleshooting
Common Issues:
- Build fails: Ensure all required package.json fields are present
- Upload fails: Verify your credentials in
lxr.json(runnpx lxr loginto re-authenticate) - Report not loading: Check browser console for JavaScript errors