Skip to content

Commit

Permalink
Documentation for container component (#3412)
Browse files Browse the repository at this point in the history
* Documentation for container component

* Apply suggestions

---------

Co-authored-by: Ndricim Rrapi <ndricim.rrapi@sap.com>
Co-authored-by: Johannes Doberer <johannes.doberer@sap.com>
Co-authored-by: Philipp Pracht <philipp.pracht@sap.com>
  • Loading branch information
4 people authored Oct 31, 2023
1 parent ca0bd59 commit f56cea6
Show file tree
Hide file tree
Showing 3 changed files with 89 additions and 1 deletion.
2 changes: 1 addition & 1 deletion container/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -34,7 +34,7 @@ import '@luigi-project/container';
```
<luigi-compound-container
context='{"label": "Dashboard"}'
compoundConfig = { your config here }
compoundConfig = { your config here }>
</luigi-compound-container>
```

Expand Down
3 changes: 3 additions & 0 deletions docs/getting-started.md
Original file line number Diff line number Diff line change
Expand Up @@ -54,6 +54,9 @@ Luigi consists of two main parts:
* [General settings](general-settings.md) - other settings that can be configured in Luigi, such as HTML attributes, third-party cookie configuration and more.
* [API](luigi-core-api.md) - functions to help with almost every part of your app: navigation, authorization, adding a [search box](luigi-core-api.md#globalsearch), configuring a light/dark [theme](luigi-core-api.md#theming) and others.

<!-- add-attribute:class:success -->
>**NOTE:** You can also use [Luigi Container](luigi-container.md) to embed a Luigi micro frontend into any existing application without it being a Luigi Core app.
**Luigi Client** - refers to Luigi options related to micro frontends:
* [API](luigi-client-api.md) - diverse API functions which can be used on the micro frontend side.
* [Communication](communication.md) - sending messages between the micro frontend and the main application (Luigi Core module).
Expand Down
85 changes: 85 additions & 0 deletions docs/luigi-container.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,85 @@
<!-- meta
{
"node": {
"label": "Luigi Container",
"category": {
"label": "Advanced",
"collapsible": true
},
"metaData": {
"categoryPosition": 7,
"position": 3
}
}
}
meta -->

# Luigi Container

## Overview

Luigi Container is a [web component](https://developer.mozilla.org/en-US/docs/Web/Web_Components) which 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. The scenario of [multiple](#compound-container) micro frontends on the same page is also supported.

## Installation

1. Install the Luigi container [npm](https://www.npmjs.com/) package: `@luigi-project/container`

```bash
npm install @luigi-project/container
```

2. Import it into your project:

```
import '@luigi-project/container';
```

## 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](navigation-parameters-reference.md) such as [viewURL](navigation-parameters-reference.md#viewurl) (which specifies the URL of the micro frontend):

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

### Compound container

The Luigi compound container works similarly to Luigi's compound web components [feature](web-component.md#compound-web-components) and it allows you to insert multiple micro frontends on the same page.

You can use the Luigi compound container as follows:

```html
<luigi-compound-container
context='{"label": "Dashboard"}'
compoundConfig = { your config here }>
</luigi-compound-container>
```

## Example

1. You can find a Luigi Container example on [GitHub](https://github.com/SAP/luigi/tree/main/container). First, clone the Luigi repository if you haven't already done so:

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

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

```bash
npm install
npm run build
npm start
```

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

3. Check `./test-app/index.html` to see how Luigi Container is used.


<!--- TODO: Add OpenUI5 tutorial, on SAP developers website ---->

0 comments on commit f56cea6

Please sign in to comment.