Skip to content

README.md

Latest commit

 

History

History
157 lines (117 loc) · 4.44 KB

README.md

File metadata and controls

157 lines (117 loc) · 4.44 KB
Raw

@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

  1. Install vite and this plugin with your favorite package manager, here use npm as example:
npm install vite @sap/vite-plugin-leanix-custom-report
  1. Create a vite.config.ts file 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'
      }
    }
  }
});
  1. Create an ./index.html file 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>

  1. Create an ./src/main.js file that you can use to add some behavior to your HTML page and/or import a framework such as Vue, React, etc.

  2. Add the "upload" command to the "script" section of your package.json file:

{
  "scripts": {
    "upload": "vite build --mode upload"
  }
}
  1. 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": {}
  }
}
  1. Authenticate with your SAP LeanIX workspace. The recommended way is OAuth via the CLI:
npx lxr login

This 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.

  1. You are now ready to start developing your report by issuing the following command
npm run dev

Troubleshooting

Common Issues:

  • Build fails: Ensure all required package.json fields are present
  • Upload fails: Verify your credentials in lxr.json (run npx lxr login to re-authenticate)
  • Report not loading: Check browser console for JavaScript errors

Internal-only: lxr store-upload

⚠️ INTERNAL SAP LeanIX USE ONLY. Regular customers publish reports with vite build --mode upload (see step 5 above). The store-upload command exists so LeanIX-internal reports can be published to the Extension Hub and is documented here only for internal contributors.

Publishes a compiled report bundle to the Extension Hub for a given store asset id:

npx lxr store-upload <asset-id>

Prerequisites:

  • You must be authenticated (npx lxr login or a project-level lxr.json with an API token).
  • package.json must include a leanixReport.id (in addition to the fields required for regular uploads):
{
  "leanixReport": {
    "title": "Your Report Title",
    "id": "net.leanix.myreport",
    "defaultConfig": {}
  }
}

The command runs vite build from the project root, packages dist/ into bundle.tgz, and POSTs it to https://store.leanix.net/services/torg/v1/assetversions/<asset-id>/payload. It reuses the same credentials as the reports-service upload (OAuth or apitoken from lxr.json).

Learn More