Documentation for container component (#3412)

* Documentation for container component * Apply suggestions --------- Co-authored-by: Ndricim Rrapi <[email protected]> Co-authored-by: Johannes Doberer <[email protected]> Co-authored-by: Philipp Pracht <[email protected]>
SAP · Oct 31, 2023 · f56cea6 · f56cea6
1 parent ca0bd59
commit f56cea6
Show file tree

Hide file tree

Showing 3 changed files with 89 additions and 1 deletion.
diff --git a/container/README.md b/container/README.md
@@ -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>
 ```
 

diff --git a/docs/getting-started.md b/docs/getting-started.md
@@ -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).

diff --git a/docs/luigi-container.md b/docs/luigi-container.md
@@ -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 [email protected]: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 ---->