Luigi Container

Overview

Luigi Container is a web component that can be used to render a Luigi micro frontend without the need of a Luigi Core application. Luigi Container can work with any framework that supports HTML. It can be an easy solution for integrating micro frontends inside already existing apps without the cost of refactoring. You can also have multiple micro frontends on the same page.

Installation

1. Install the Luigi Container npm package: @luigi-project/container

Click to copy

npm install @luigi-project/container

2. Import it into your project:

Click to copy

import '@luigi-project/container';

3. (optional) Add VS Code HTML support to enhance HTML editing for LuigiContainer and LuigiCompoundContainer. You can do it by adding the following lines to .vscode/settings.json (since container v1.4.0)

Click to copy

{
  ...some other settings,
  "html.customData": [
    "PATH/TO/node_modules/@luigi-project/container/vscode.html-custom-data.json"
  ]
}

Usage

After importing the package, you can use the Luigi container anywhere in your application. You can configure it just like a regular Luigi application, for example by using parameters such as viewURL (which specifies the URL of the micro frontend):

Click to copy

    <luigi-container 
        viewURL="https://www.example-microfronted.com" 
        webcomponent="false" 
        label="my label"
        context='{"label": "Calendar"}'>
    </luigi-container>

Examples

Test Application

1. You can find a Luigi Container example application on GitHub. First, clone the Luigi repository if you haven't already done so:

Click to copy

git clone git@github.com:SAP/luigi.git
cd luigi/container

2. Then, build the bundle and start the example app:

Click to copy

npm install
npm run build
npm run start-examples

The app should be available at http://localhost:2222 in your browser.

3. Check the examples folder to see how Luigi Container is used.