vite-plugin-lxr
v5.0.0
Published
A Vite plugin for developing LeanIX Custom Reports
Downloads
42
Readme
vite-plugin-lxr
A Vite plugin for developing LeanIX Custom Reports.
Get Started
- Install vite and this plugin with your favorite package manager, here use npm as example:
npm install vite vite-plugin-lxr- Create a
vite.config.tsfile in your project root to config vite to actually use this plugin:
import { defineConfig } from 'vite'
import leanix from 'vite-plugin-lxr'
import { fileURLToPath, URL } from 'node:url'
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 following commands to the "script" section of your
package.jsonfile:
{
"scripts": {
"dev": "vite",
"build": "vite build",
"upload": "vite build --mode upload"
}
}- Create a new section in the package.json file as follows:
{
"leanixReport": {
"id": "<your report id in dot notation, e.g. leanix.net.report.demo>",
"title": "Your Report Title",
"defaultConfig": {}
}
}- Finally add a
lxr.jsonfile into your project root folder with the following contents:
{
"host": "<your workspace instance here, e.g. demo-eu.leanix.net>",
"apitoken": "<your workspace api token here>"
}- You are now ready to start developing your report by issuing the following command
npm run dev