diff --git a/tutorials/luigi-app-basic-setup/luigi-app-basic-setup.md b/tutorials/luigi-app-basic-setup/luigi-app-basic-setup.md
new file mode 100644
index 0000000..965afa5
--- /dev/null
+++ b/tutorials/luigi-app-basic-setup/luigi-app-basic-setup.md
@@ -0,0 +1,127 @@
+---
+parser: v2
+author_name: Johannes Doberer
+author_profile: https://github.com/JohannesDoberer
+auto_validation: true
+time: 5
+tags: [ tutorial>beginner, programming-tool>javascript]
+primary_tag: topic>user-interface
+---
+
+# Build Skeleton React and UI5 Projects
+ Create skeleton React and UI5 projects and install Luigi.
+
+## Prerequisites
+ - It's recommended to try the simpler examples on [GitHub](https://github.com/SAP/luigi/tree/master/core/examples) or the [Getting Started page](https://docs.luigi-project.io/docs/getting-started/?section=examples) before this tutorial.
+ - You need to install [Node.js](https://nodejs.org/en/download/current/). If you already have an old version installed on your machine, please run `npm install npm@latest -g`.
+ - You need to install [SAP Fonts](https://experience.sap.com/fiori-design-web/downloads/#sap-icon-font).
+
+## You will learn
+ - How to create a skeleton React project
+ - How to create a skeleton UI5 project
+ - How to add Luigi and other dependencies to your project
+
+---
+
+### Create React app
+
+
+In this step, you will create a React skeleton project which will be used to create your Luigi app.
+
+1. Open a Terminal or Command Prompt window and navigate to the space where you want to install the app. Then create a new folder:
+
+ ```Shell
+ mkdir luigi-react-ui5
+ cd luigi-react-ui5
+ ```
+
+2. Create a new folder to host the React core app:
+
+ ```Shell
+ mkdir react-core-mf
+ cd react-core-mf
+ ```
+
+ 3. Download the React example package JSON file containing minimal dependencies required for a React app. Next, install styling libraries to handle CSS files, as well as Fundamentals and React web components packages.
+
+ ```Shell
+ curl https://raw.githubusercontent.com/SAP/luigi/main/core/examples/luigi-example-react/package.json > package.json
+ npm install fundamental-styles @ui5/webcomponents-react --save
+ npm install style-loader css-loader --save-dev
+ ```
+
+4. The React application will be bundled using Webpack. Download the Luigi Webpack configuration from an existing [Luigi example app](https://github.com/SAP/luigi/blob/main/core/examples/luigi-example-react/webpack.config.js) using the line below:
+
+ ```Shell
+ curl https://raw.githubusercontent.com/SAP/luigi/main/core/examples/luigi-example-react/webpack.config.js > webpack.config.js
+ ```
+
+5. Next, create the project structure for the React app. Create the following folders:
+
+ ```Shell
+ mkdir -p src/views
+ mkdir -p src/assets
+ mkdir -p public
+ ```
+
+6. Download the Luigi React app files:
+
+ ```Shell
+ curl https://raw.githubusercontent.com/SAP/luigi/main/core/examples/luigi-example-react/public/luigi-config.js > public/luigi-config.js
+ curl https://raw.githubusercontent.com/SAP/luigi/main/core/examples/luigi-example-react/src/views/home.js > src/views/home.js
+ curl https://raw.githubusercontent.com/SAP/luigi/main/core/examples/luigi-example-react/src/views/sample1.js > src/views/sample1.js
+ curl https://raw.githubusercontent.com/SAP/luigi/main/core/examples/luigi-example-react/src/views/sample1.js > src/views/sample2.js
+ curl https://raw.githubusercontent.com/SAP/luigi/main/core/examples/luigi-example-react/public/index.html > public/index.html
+ curl https://github.com/SAP/luigi/blob/main/core/examples/luigi-example-react/public/sampleapp.html > public/sampleapp.html
+ ```
+
+7. Install and run the configuration:
+
+ ```Shell
+ npm i
+ npm run start
+ ```
+
+8. Move back into the root directory:
+
+ ```Shell
+ cd ..
+ ```
+
+
+### Create UI5 micro-frontend
+
+
+In this step, you will create a skeleton UI5 project for your UI5 micro-frontend.
+
+1. If you didn't already, navigate to the root folder of your project in the terminal.
+
+2. Create a new folder:
+
+ ```Shell
+ mkdir ui5-mf && cd ui5-mf
+ ```
+
+3. Install the UI5 project generator:
+
+ ```Shell
+ npm install -g yo generator-easy-ui5
+ ```
+
+4. Enter this command in the Terminal/Command Prompt:
+
+ ```Shell
+ yo easy-ui5
+ ```
+
+5. Use the settings shown in the screenshot below. For "Select your generator", use the arrow keys to scroll down and select `app`. For the questions "Which framework do you want to use?" and "Who is the author of this application?", choose the default option and press Enter.
+
+ 
+
+
+
+
+
+
+
+---
diff --git a/tutorials/luigi-app-basic-setup/ui5-yo.png b/tutorials/luigi-app-basic-setup/ui5-yo.png
new file mode 100644
index 0000000..d55401c
Binary files /dev/null and b/tutorials/luigi-app-basic-setup/ui5-yo.png differ
diff --git a/tutorials/luigi-app-localization-react/luigi-app-localization-react.md b/tutorials/luigi-app-localization-react/luigi-app-localization-react.md
new file mode 100644
index 0000000..66f7ddb
--- /dev/null
+++ b/tutorials/luigi-app-localization-react/luigi-app-localization-react.md
@@ -0,0 +1,123 @@
+---
+parser: v2
+author_name: Johannes Doberer
+author_profile: https://github.com/JohannesDoberer
+auto_validation: true
+time: 10
+tags: [ tutorial>beginner, topic>javascript]
+primary_tag: topic>user-interface
+---
+
+# Add Localization to Luigi React Application
+ Enable your main application to be displayed in multiple languages using the Luigi localization features.
+
+## You will learn
+ - How to add localization to the part of your application developed with React
+
+---
+
+
+### Configure localization in Luigi navigation
+
+
+ In this step, you will update the Luigi configuration with the labels for the German language localization that will be implemented in the later steps.
+
+1. Open `react-core-mf/public/luigi-config.js`.
+
+2. Change the `label` attribute of the `products` and `order` node as shown below:
+
+ ```JavaScript
+ children: [
+ {
+ pathSegment: "products",
+ //<---Around line 13, change this label--->
+ label: "PRODUCTS",
+ //<------>
+ icon: "product",
+ viewUrl: "/sampleapp.html#/microfrontend/products",
+ keepSelectedForChildren: true,
+ children: [{
+ pathSegment: ':id',
+ viewUrl: '/sampleapp.html#/microfrontend/productDetail/:id',
+ context: { id: ':id' }
+ }]
+ },
+ {
+ pathSegment: 'order',
+ //<---Around line 25, change this label--->
+ label: 'ORDERHISTORY',
+ //<------>
+ icon: 'history',
+ viewUrl: 'http://localhost:8080/index.html'
+ }
+ ],
+ ```
+
+3. Add the following translation for German inside the `myTranslationProvider` function:
+
+ ```JavaScript
+ var dict = {
+ "en-US": { PRODUCTS: "Products", ORDERHISTORY: "Order History" },
+ //Around line 55, add the following:
+ "de-DE": { PRODUCTS: "Produkte", ORDERHISTORY: "Bestellungen" },
+ //<------>
+ };
+ ```
+
+
+### Add second language in `language.js`
+
+
+In this step, you will add text for your React app in multiple languages by creating a "dictionary" file.
+
+In the previously created `language.js` file in `react-core-mf/src`, replace the content with:
+
+```JavaScript
+export const dict = {
+ 'de-DE': {
+ ITEMS: 'Produkte',
+ STOCKS: 'Bestand',
+ SELECTLANGUAGE: 'Bitte wählen Sie eine Sprache',
+ PRICE: 'Preis',
+ WELCOME_LUIGI: 'Willkommen bei Luigi - einem Micro-Frontend Framework',
+ DESCRIPTION: 'Beschreibung',
+ PRODUCTADDED: 'Das Produkt wurde hinzugefügt',
+ AVAILABLE: 'Verfügbar',
+ AVAILABLEQUANT: 'Verfügbare Anzahl: ',
+ ADDTOCART: 'Zu Einkaufswagen hinzufügen',
+ BACK: 'Zurück',
+ OUTOFSTOCK: 'Nicht auf Lager'
+ },
+ "en-US": {
+ ITEMS: "Products",
+ STOCKS: "Stocks",
+ SELECTLANGUAGE: "Please select a language",
+ PRICE: "Price",
+ WELCOME_LUIGI: "Welcome to Luigi - a micro-frontend framework",
+ DESCRIPTION: "Description",
+ PRODUCTADDED: "Product has been added to cart",
+ AVAILABLE: "Available",
+ AVAILABLEQUANT: "Available quantity: ",
+ ADDTOCART: "Add to cart",
+ BACK: "Back",
+ OUTOFSTOCK: "Out of stock",
+ },
+ };
+```
+
+
+### Configure localization in React app
+
+
+1. In the file `react-core-mf/src/views/home.js`, update the options state to include both English and German as in the following:
+
+ ```JavaScript
+ const [options] = useState([{ key: 'en-US', text: 'en-US' }, { key: 'de-DE', text: 'de-DE' }]);
+ ```
+
+
+
+
+
+
+---
diff --git a/tutorials/luigi-app-localization-ui5/luigi-app-localization-ui5.md b/tutorials/luigi-app-localization-ui5/luigi-app-localization-ui5.md
new file mode 100644
index 0000000..08f5c57
--- /dev/null
+++ b/tutorials/luigi-app-localization-ui5/luigi-app-localization-ui5.md
@@ -0,0 +1,155 @@
+---
+parser: v2
+author_name: Johannes Doberer
+author_profile: https://github.com/JohannesDoberer
+auto_validation: true
+time: 5
+tags: [ tutorial>beginner, topic>javascript]
+primary_tag: topic>user-interface
+---
+
+# Add Localization to Luigi UI5 Micro-Frontend
+ Enable your micro-frontend to be displayed in multiple languages using the Luigi localization features.
+
+## You will learn
+ - How to add localization to your UI5 micro-frontend
+
+---
+
+
+### Update current language with Luigi Client
+
+
+In this step, you will add a function to get the current language from Luigi Client and then update it, so that the language of the UI5 micro-frontend can be changed accordingly.
+
+ 1. Open the `ui5-mf/webapp/controller/Main.controller.js` file and replace its content with the code below:
+
+ ```js
+ sap.ui.define(["luigi/ui5/controller/BaseController"], function (Controller) {
+ "use strict";
+
+ return Controller.extend("luigi.ui5.controller.Main", {
+ onInit: function (Controller) {
+ const oModel = new sap.ui.model.json.JSONModel();
+
+ oModel.loadData("../model/products.json");
+ this.getView().setModel(oModel);
+ //This has been added - to update the current language
+ const updateCurrentLanguage = () => {
+ const currentLanguage = LuigiClient.uxManager().getCurrentLocale();
+ sap.ui.getCore().getConfiguration().setLanguage(currentLanguage);
+ }
+ //This has been added - listener for language changes
+ LuigiClient.addInitListener(updateCurrentLanguage);
+ },
+
+ onListItemPress: function (oEvent) {
+ const id = oEvent.getSource().getBindingContext().getProperty("id");
+ // Getting trasnlated text for the modal text title
+ const title = this.getView().getModel("i18n").getResourceBundle().getText("ModalText");
+
+ LuigiClient.linkManager().openAsModal('/home/products/' + id, { title: title, size: 'm' });
+ }
+ });
+ });
+ ```
+
+
+### Add files with multi-language content
+
+
+In this step, you will create files with the text that is to be changed within the UI5 micro-frontend.
+
+1. Find the `i18n` folder inside `webapp`. Create a file there called `i18n_de.properties` with the following content:
+
+ ```json
+ ModalText = Produktdetails
+ Quantity = Anzahl
+ appTitle = ui5
+ appDescription = Deutsch
+ ```
+
+2. Create another file called `i18n_en.properties` with the following content:
+
+ ```json
+ ModalText = Product Details
+ appTitle = ui5
+ appDescription = English
+ Quantity = Quantity
+ ```
+
+
+### Add default language to index.html
+
+
+1. Edit the `ui5-mf/webapp/index.html` file by adding the default language (EN):
+
+ ```HTML
+
+ ```
+
+
+### Provide translation in UI5
+
+
+This step involves the standard process in UI5 for providing translation.
+
+1. Edit the `ui5-mf/webapp/view/Main.view.xml` file by marking the translated target text. Replace the `` tag with:
+
+ ```XML
+
+ ```
+
+
+### Run completed app
+
+
+Now, your app should be complete and you can run it locally to see if everything works. First, open a terminal/command prompt window and navigate to your project folder.
+
+1. Navigate to the React app and run it:
+
+ ```Shell
+ cd react-core-mf
+ ```
+
+ and:
+
+ ```Shell
+ npm start
+ ```
+
+2. In another window, navigate to the UI5 micro-frontend and run it:
+
+ ```Shell
+ cd ui5-mf
+ ```
+
+ and:
+
+ ```Shell
+ npm start
+ ```
+
+3. See your completed app at `http://localhost:3000/`. Try changing the language and clicking around. If there are errors, retrace your steps in the tutorial or compare with the finished app on [SAP Samples](https://github.com/SAP-samples/luigi-micro-frontend-application).
+
+
+
+
+
+
+
+
+---
diff --git a/tutorials/luigi-app-react/luigi-app-react.md b/tutorials/luigi-app-react/luigi-app-react.md
new file mode 100644
index 0000000..bb5e716
--- /dev/null
+++ b/tutorials/luigi-app-react/luigi-app-react.md
@@ -0,0 +1,692 @@
+---
+parser: v2
+author_name: Johannes Doberer
+author_profile: https://github.com/JohannesDoberer
+auto_validation: true
+time: 25
+tags: [ tutorial>beginner, programming-tool>javascript]
+primary_tag: topic>user-interface
+---
+
+# Build Luigi App with React
+ Create a mock shopping application with React and configure it using Luigi.
+
+## You will learn
+ - How to add content to your React web shopping app
+ - How to use Luigi to configure navigation
+ - How to create simple micro-frontends using React
+---
+
+### Add a file with product data
+
+
+In this step, you will create a file with information about the products on sale in your shopping app.
+
+In a real life implementation, this data would be provided by an external service/API. But for simplicity, you will create a `.js` file containing dummy data. This file will provide the displayed data in the micro-frontend. You will create a similar file in the UI5 micro-frontend to avoid bundling issues.
+
+1. Navigate to `react-core-mf/src/assets` and create a `products.js` file with the following content:
+
+ ```Javascript
+ export const ProductCollection = [
+ {
+ "id": 101,
+ "name": "Mouse",
+ "price": 45.0,
+ "stock": 80,
+ "icon": "product",
+ "currencyCode": "EUR",
+ "orderQuantity": 2,
+ "description": "Wireless Gaming Mouse with Sensor"
+ },
+ {
+ "id": 102,
+ "name": "Keyboard",
+ "price": 50.0,
+ "stock": 22,
+ "icon": "product",
+ "currencyCode": "EUR",
+ "orderQuantity": 1,
+ "description": "A physical keyboard that uses an individual spring and switch for each key. Today, only premium keyboards are built with key switches."
+ },
+ {
+ "id": 103,
+ "name": "Optical Mouse",
+ "price": 35.0,
+ "stock": 4,
+ "icon": "product",
+ "currencyCode": "EUR",
+ "orderQuantity": 2,
+ "description": "Utilizing the latest optical sensing technology, the USB Optical Scroll Mouse records precise motion."
+ },
+ {
+ "id": 104,
+ "name": "Laptop Pro",
+ "price": 1299.0,
+ "stock": 11,
+ "icon": "laptop",
+ "currencyCode": "EUR",
+ "orderQuantity": 3,
+ "description": "Newest laptop featuring a touch-sensitive OLED display."
+ },
+ {
+ "id": 105,
+ "name": "Mouse 2",
+ "price": 40.0,
+ "stock": 20,
+ "icon": "product",
+ "currencyCode": "EUR",
+ "orderQuantity": 6,
+ "description": "The Mouse 2 is a computer mouse featuring a multi-touch acrylic surface for scrolling. The mouse features a lithium-ion rechargeable battery and Lightning connector for charging and pairing."
+ },
+ {
+ "id": 106,
+ "name": "Printer",
+ "price": 235.0,
+ "stock": 24,
+ "icon": "fx",
+ "currencyCode": "EUR",
+ "orderQuantity": 1,
+ "description": "Affordable printer providing you with the optimal way to take care of all your printing needs."
+ },
+ {
+ "id": 107,
+ "name": "Phone 11",
+ "price": 835.0,
+ "stock": 45,
+ "icon": "iphone",
+ "currencyCode": "EUR",
+ "orderQuantity": 8,
+ "description": "The Phone 11 dimensions are 150.9mm x 75.7mm x 8.3mm (H x W x D). It weighs about 194 grams (6.84 ounces)."
+ },
+ {
+ "id": 108,
+ "name": "Phone 3a",
+ "price": 299.0,
+ "stock": 54,
+ "icon": "desktop-mobile",
+ "currencyCode": "EUR",
+ "orderQuantity": 7,
+ "description": "At 5.6 inches, the display is proportionate to the relatively small body of the phone."
+ },
+ {
+ "id": 109,
+ "name": "Game Console 4",
+ "price": 330.0,
+ "stock": 94,
+ "icon": "video",
+ "currencyCode": "EUR",
+ "orderQuantity": 1,
+ "description": "This is the fourth home video game console compatible with all gaming systems."
+ },
+ {
+ "id": 110,
+ "name": "Monitor",
+ "price": 630.0,
+ "stock": 20,
+ "icon": "sys-monitor",
+ "currencyCode": "EUR",
+ "orderQuantity": 3,
+ "description": "34'' Monitor, Display with stand Height adjustable (115 mm), tiltable (-5° to 21°), rotatable (-30° to 30°) Security slot (cable lock sold separately), anti-theft slot for locking to stand (for display). Includes: DisplayPort cable, HDMI cable, Power cable, Stand, USB 3.0 Type-A to Type-B cable, USB-C cable."
+ }
+];
+ ```
+
+
+
+### Add Luigi to index.html
+
+
+In this step, you will let Luigi take control of the `index.html` file - the entry point for your app.
+
+1. Go to `react-core-mf/public/index.html` and change its content to:
+
+ ```HTML
+
+
+
+ Luigi
+
+
+
+
+
+
+
+
+
+
+ ```
+
+
+### Create micro-frontends template
+
+
+In this step, you will create another HTML file which will serve as a template for React to create the React micro-frontends.
+
+1. Go to `react-core-mf/public` and create a new file called `sampleapp.html`. Paste this code into the file:
+
+ ```HTML
+
+
+
+
+
+
+ React App
+
+
+
+
+
+
+ ```
+
+
+
+### Configure webpack
+
+
+In this step, you will configure `webpack` and adjust dependencies in order to make it easier to develop and build the app.
+
+1. Go to `react-core-mf/webpack.config.js`. Note that by default the `webpack-dev-server` will redirect all requests to `index.html` which is the app's main entry point where the Luigi Core library is injected. However, since the micro-frontends are also built in the same environment, it's necessary to host the root React micro-frontend app inside another file, in this case named `sampleapp.html`. This has been done in lines 40-16 and a similar approach can be chosen with any other frontend framework:
+
+2. In `webpack.config.js` around line 80, add a Webpack rule to allow importing CSS in the React project:
+
+ ```Javascript
+ module: {
+ rules: [
+ {
+ test: /\.js$/,
+ exclude: /node_modules/,
+ use: {
+ loader: 'babel-loader',
+ options: {
+ presets: [
+ ['@babel/preset-env', { targets: 'defaults' }],
+ ['@babel/preset-react', { runtime: 'automatic' }]
+ ]
+ }
+ }
+ },
+ /// <---Add this rule -->
+ {
+ test: /\.(css)$/,
+ use: ['style-loader', 'css-loader'],
+ },
+ /// <----->
+ ]
+ },
+ ```
+
+
+### Configure Luigi for "Home" node
+
+
+With the help of simple parameters pertaining to [navigation](https://docs.luigi-project.io/docs/navigation-parameters-reference) and [general settings](https://docs.luigi-project.io/docs/general-settings), you will create your first "Home" navigation node and make your application responsive.
+
+These are the Luigi navigation parameters you will use:
+
+ - `pathSegment` - text segment added to the URL
+ - `label` - the name of the node displayed in the navigation
+ - `icon` - a SAP icon shown next to the label
+ - `viewUrl`- the URL of your micro-frontend
+
+
+1. Go to the file `react-core-mf/public/luigi-config.js`. This is where you can find the Luigi configuration. Copy and paste this code inside it:
+
+ ```JavaScript
+
+ Luigi.setConfig({
+ navigation: {
+ nodes: () => [
+ {
+ pathSegment: "home",
+ label: "Home",
+ icon: "home",
+ viewUrl: "/sampleapp.html#/microfrontend/home",
+ },
+ ],
+ },
+ settings: {
+ header: { title: "Luigi React App"},
+ responsiveNavigation: "simpleMobileOnly",
+ customTranslationImplementation: myTranslationProvider,
+ },
+ lifecycleHooks: {
+ luigiAfterInit: () => {
+ Luigi.i18n().setCurrentLocale(defaultLocale);
+ },
+ },
+ communication: {
+ customMessagesListeners: {
+ "set-language": (msg) => {
+ Luigi.i18n().setCurrentLocale(msg.locale);
+ },
+ },
+ },
+ });
+
+
+ var defaultLocale = "en-US";
+ function myTranslationProvider() {
+ var dict = {
+ "en-US": { PRODUCTS: "Products", ORDERHISTORY: "Order History" },
+ };
+ return {
+ getTranslation: function (label, interpolation, locale) {
+ const local = locale || Luigi.i18n().getCurrentLocale() || defaultLocale
+ return (
+ dict[local][label] || label
+ );
+ },
+ };
+ }
+ ```
+
+
+### Configure router for "Home" view
+
+
+In this step, you will make changes to the entry point `index.js` for the React app. You will create a new view called `home.js` in `react-core-mf/src/views`, configure the router for this view, and import the Luigi Client. You will also create a file called `language.js` which will be useful for the next tutorials dealing with localization.
+
+1. Open `react-core-mf/src/index.js` and change its content to:
+
+ ```JavaScript
+ import React, { useState, useEffect } from 'react';
+ import { createRoot } from 'react-dom/client';
+ import { HashRouter as Router, Routes, Route } from 'react-router-dom';
+ import Home from './views/home.js';
+ import { dict } from './language.js';
+ import { addInitListener, addContextUpdateListener, removeContextUpdateListener, removeInitListener, uxManager} from '@luigi-project/client';
+ import { ThemeProvider } from "@ui5/webcomponents-react";
+
+ const container = document.getElementById('root');
+ const root = createRoot(container);
+
+ const App = () => {
+ const [currentLocale, setCurrentLocale] = useState('en-US');
+ const [initListener, setInitListener] = useState(null);
+ const [contextUpdateListener, setContextUpdateListener] = useState(null);
+
+ useEffect(() => {
+ const updateCurrentLanguage = () => {
+ setCurrentLocale(uxManager().getCurrentLocale())
+ }
+
+ setInitListener(
+ addInitListener(() => {
+ console.log("Luigi Client initialized.");
+ // update current language upon Luigi Client initialization
+ updateCurrentLanguage();
+ })
+ );
+
+ setContextUpdateListener(
+ addContextUpdateListener(() => {
+ // update current language upon Luigi Client context update event
+ updateCurrentLanguage();
+ })
+ );
+
+ return function cleanup() {
+ removeContextUpdateListener(contextUpdateListener);
+ removeInitListener(initListener);
+ };
+ }, []);
+
+ return (
+
+
+
+
+ } />
+
+
+
+
+ );
+ };
+
+ root.render();
+ ```
+
+ 2. Next, go to the `react-core-mf/src/views` directory created in step 6 of the [previous tutorial](luigi-app-basic-setup). Find the file called `home.js` and paste the following code into it:
+
+ ```JavaScript
+ import React, { useState, useEffect } from 'react';
+ import "fundamental-styles/dist/fundamental-styles.css";
+ import { addInitListener, addContextUpdateListener, removeContextUpdateListener, removeInitListener, sendCustomMessage } from "@luigi-project/client";
+ import { Grid, Panel, Select, Option } from "@ui5/webcomponents-react";
+
+ const Home = (props) => {
+ const [options] = useState([{ key: 'en-US', text: 'en-US' }]);
+
+ function onChangeValue(event) {
+ sendCustomMessage({
+ id: "set-language",
+ locale: event.detail.selectedOption.innerText,
+ });
+ }
+
+ return (
+
+
+
+
+
+ );
+ };
+
+ export default Home;
+ ```
+
+3. Create a new file in `react-core-mf/src` called `language.js` with the following content:
+
+ ```JavaScript
+ export const dict = {
+ "en-US": {
+ ITEMS: "Products",
+ STOCKS: "Stocks",
+ SELECTLANGUAGE: "Please select a language",
+ PRICE: "Price",
+ WELCOME_LUIGI: "Welcome to Luigi - a micro-frontend framework",
+ DESCRIPTION: "Description",
+ PRODUCTADDED: "Product has been added to cart",
+ AVAILABLE: "Available",
+ AVAILABLEQUANT: "Available quantity: ",
+ ADDTOCART: "Add to cart",
+ BACK: "Back",
+ OUTOFSTOCK: "Out of stock",
+ },
+ };
+ ```
+
+
+### Add "Products" view to Luigi app
+
+
+In this step, you will add a navigation node in Luigi for the "Products" micro-frontend.
+
+1. Open `react-core-mf/public/luigi-config.js`
+
+2. Add a new "Products" node to your navigation:
+
+ ```JavaScript
+ navigation: {
+ nodes: () => [
+ {
+ pathSegment: "home",
+ label: "Home",
+ icon: "home",
+ viewUrl: "/sampleapp.html#/microfrontend/home",
+ //<---Add the section below to the config file--->
+ children: [
+ {
+ pathSegment: "products",
+ label: "Products",
+ icon: "product",
+ viewUrl: "/sampleapp.html#/microfrontend/products",
+ }
+ ],
+ // <------>
+ },
+ ],
+ },
+ ```
+
+3. Next, rename the file `sample1.js` in `react-core-mf/src/views` to `products.js` and paste following code into it:
+
+ ```JavaScript
+ import React, { useEffect, useState } from 'react';
+ import "../../node_modules/fundamental-styles/dist/fundamental-styles.css";
+ import "@ui5/webcomponents-icons/dist/AllIcons.js";
+ import { Grid, List, StandardListItem } from "@ui5/webcomponents-react";
+ import { linkManager } from "@luigi-project/client";
+ import { ProductCollection } from "../assets/products.js";
+
+ const Products = (props) => {
+ const [listItems, setListItems] = useState([]);
+
+ useEffect(() => {
+ const tempList = [];
+ ProductCollection.forEach((product) => {
+ tempList.push(
+ handleItemClick(product.id)}>
+
{product.name}
+
+ );
+ setListItems(tempList);
+ });
+ }, [])
+
+ // navigates to productDetail microfrontend through Luigi Client linkManager API
+ function handleItemClick(event) {
+ linkManager().withParams({ root: "products" });
+ linkManager().navigate(
+ "/home/products/" + event.detail.item.id.toString()
+ );
+ };
+
+ return (
+
+
+ {listItems}
+
+
+ );
+ };
+ export default Products;
+ ```
+
+4. Add the routing module to the `index.js` by adding the following lines to the file:
+
+ ```JavaScript
+ //<---Around line 8, paste this line: --->:
+ import Products from "./views/products.js";
+ //<------>
+ ...
+
+
+ } />
+ //<---Around line 45, paste this line: --->
+ } />
+ //<------>
+
+
+ ```
+
+
+### Add "Product Detail" view to Luigi app
+
+
+In this step, you will add the `ProductDetail` view to the app. You will be able to show details for each product via a Luigi [dynamic parameter](https://docs.luigi-project.io/docs/navigation-advanced?section=dynamically-changeable-paths), in this case named `:id`.
+
+ 1. In `react-core-mf/public/luigi-config.js` add a child node `:id` to the `products` node:
+
+ ```js
+ children: [
+ {
+ pathSegment: "products",
+ label: "Products",
+ icon: "product",
+ viewUrl: "/sampleapp.html#/microfrontend/products",
+ //<---Paste the section below to your config:--->
+ keepSelectedForChildren: true,
+ children: [{
+ pathSegment: ':id',
+ viewUrl: '/sampleapp.html#/microfrontend/productDetail/:id',
+ context: { id: ':id' }
+ }]
+ //<------>
+ },
+ ```
+
+2. Next, create a new file in `react-core-mf/src/views` named `productDetail.js` and paste following content into it:
+
+ ```js
+ import React, { useEffect, useState, useRef } from 'react';
+ import "../../node_modules/fundamental-styles/dist/fundamental-styles.css";
+ import "@ui5/webcomponents-icons/dist/AllIcons.js";
+ import {
+ Grid, ObjectPage, Label, DynamicPageHeader, DynamicPageTitle, ObjectStatus, FlexBox, Button, Toast, ObjectPageSection, FormItem, Form, Text, Bar
+ } from "@ui5/webcomponents-react";
+ import { linkManager, getContext } from "@luigi-project/client";
+ import { ProductCollection } from "../assets/products.js";
+
+ const ProductDetail = (props) => {
+ const [currentProduct, setCurrentProduct] = useState({});
+ const [availability, setAvailability] = useState({
+ state: "Warning",
+ text: props.localeDict.OUTOFSTOCK
+ });
+ const toast = useRef(null);
+
+ useEffect(() => {
+ setProductAndAvailability();
+ }, []);
+
+ function setProductAndAvailability() {
+ // get id from Luigi Client getContext API
+ const id = getContext().id;
+
+ let product = ProductCollection.find(
+ (product) => product.id.toString() === id
+ ) || ProductCollection[0]
+
+ setCurrentProduct(product);
+ currentProduct.stock ? setAvailability({ state: "Success", text: props.localeDict.AVAILABLE }) : ""
+ }
+
+ // Use Luigi Client linkManager API to navigate to the previous microfrontend
+ function navBack() {
+ // checks if there is a previous view in history
+ if (linkManager().hasBack()) {
+ // navigates to the previously opened microfrontend
+ linkManager().goBack();
+ } else {
+ // navigates to the products page directly
+ linkManager().navigate("/home/products");
+ }
+ };
+
+ return (
+
+
+
+
+
+
+
+
+ }
+ footer={
+
+
+
+
+ }
+ />
+ }
+ headerContentPinnable
+ headerTitle={
+
+
+ {props.localeDict.PRODUCTADDED}
+
+
+
+
+ }
+ header={currentProduct.name}
+ >
+
+ {availability.text}
+
+
+ }
+ onSelectedSectionChange={function noRefCheck() { }}
+ selectedSectionId="details"
+ showHideHeaderButton
+ style={{
+ height: "700px",
+ }}
+ >
+
+
+
+
+
+ );
+ };
+
+ export default ProductDetail;
+
+ ```
+
+2. Add the route configuration to the `index.js` by pasting below code into it:
+
+ ```JavaScript
+ //<---Around line 9, paste this line:--->
+ import ProductDetail from './views/productDetail';
+ //<------>
+ ...
+
+
+ } />
+ } />
+ //<---Around line 50, paste this line:--->
+ } />
+ //<------>
+
+
+ ```
+
+
+### Run your core app
+
+
+In this step, you can check if your core app is configured correctly so far by running it locally.
+
+1. Open a terminal/command prompt window. Navigate to the `react-core-mf` folder.
+
+2. Input `npm start`. Your application should be up and running at `http://localhost:3000/`. You should be able to see the homepage and "Products" view. You can also navigate toward the `ProductDetail` view via "Products".
+
+
+
+
+---
diff --git a/tutorials/luigi-app-ui5/luigi-app-ui5.md b/tutorials/luigi-app-ui5/luigi-app-ui5.md
new file mode 100644
index 0000000..16d6d83
--- /dev/null
+++ b/tutorials/luigi-app-ui5/luigi-app-ui5.md
@@ -0,0 +1,257 @@
+---
+parser: v2
+author_name: Johannes Doberer
+author_profile: https://github.com/JohannesDoberer
+auto_validation: true
+time: 10
+tags: [ tutorial>beginner, topic>javascript]
+primary_tag: topic>user-interface
+---
+
+# Build Luigi Micro-Frontend with UI5
+ Create a micro-frontend with UI5 and connect it to the core React app using Luigi client.
+
+## You will learn
+ - How to create a Luigi view with UI5
+ - How to import Luigi Client to your view
+
+---
+
+### Add Luigi to UI5 micro-frontend
+
+
+In this step, you will import Luigi Client to the UI5 micro-frontend so you can use `linkManager` and other API function in the next steps.
+
+1. Open `ui5-mf/webapp/index.html` and add this line in the head section of the file:
+
+ ```HTML
+
+
+ ```
+
+2. In the same file, change the UI5 option from `data-sap-ui-frameOptions="trusted"` to `data-sap-ui-frameOptions="allow"`. Directly below, add `data-sap-ui-preload=""`:
+
+ ```HTML
+
+ ```
+
+
+### Create "Order History" view
+
+
+In this step, you will add a new navigation node in Luigi config hosted in the React application, then create the micro-frontend content using UI5.
+
+1. Add an "Order History" node to your Luigi navigation in `react-core-mf/public/luigi-config.js`:
+
+ ```JavaScript
+ children: [
+ {
+ pathSegment: "products",
+ label: "Products",
+ icon: "product",
+ viewUrl: "/sampleapp.html#/microfrontend/products",
+ keepSelectedForChildren: true,
+ children: [{
+ pathSegment: ':id',
+ viewUrl: '/sampleapp.html#/microfrontend/productDetail/:id',
+ context: { id: ':id' }
+ }]
+ }, // <--- Don't forget to add a comma here --->
+ //<---Add the section below to the Luigi config--->
+ {
+ pathSegment: 'order',
+ label: 'Order History',
+ icon: 'history',
+ viewUrl: 'http://localhost:8080/index.html'
+ }
+ //<------>
+ ],
+ ```
+
+2. Open the `ui5-mf/webapp/view/MainView.view.xml` file in your UI5 app, and replace the content with:
+
+ ```XML
+
+
+
+
+
+
+
+ ```
+
+3. Open `ui5-mf/webapp/controller/Main.controller.js` and replace it with:
+
+ ```JavaScript
+ sap.ui.define(["luigi/ui5/controller/BaseController"], function (Controller) {
+ "use strict";
+
+ return Controller.extend("luigi.ui5.controller.Main", {
+ onInit: function (Controller) {
+ const oModel = new sap.ui.model.json.JSONModel();
+
+ oModel.loadData("../model/products.json");
+ this.getView().setModel(oModel);
+ },
+
+ onListItemPress: function (oEvent) {
+ const id = oEvent.getSource().getBindingContext().getProperty("id");
+
+ LuigiClient.linkManager().openAsModal('/home/products/' + id, { title: 'Product Detail', size: 'm' });
+ }
+ });
+ });
+ ```
+
+4. Navigate to `ui5-mf/webapp/model` and create a `products.json` file with the following content.
+
+```JSON
+{
+ "ProductCollection": [
+ {
+ "id": 101,
+ "name": "Mouse",
+ "price": 45.0,
+ "stock": 80,
+ "icon": "product",
+ "currencyCode": "EUR",
+ "orderQuantity": 2,
+ "description": "Wireless Gaming Mouse with Sensor"
+ },
+ {
+ "id": 102,
+ "name": "Keyboard",
+ "price": 50.0,
+ "stock": 22,
+ "icon": "product",
+ "currencyCode": "EUR",
+ "orderQuantity": 1,
+ "description": "A physical keyboard that uses an individual spring and switch for each key. Today, only premium keyboards are built with key switches."
+ },
+ {
+ "id": 103,
+ "name": "Optical Mouse",
+ "price": 35.0,
+ "stock": 4,
+ "icon": "product",
+ "currencyCode": "EUR",
+ "orderQuantity": 2,
+ "description": "Utilizing the latest optical sensing technology, the USB Optical Scroll Mouse records precise motion."
+ },
+ {
+ "id": 104,
+ "name": "Laptop Pro",
+ "price": 1299.0,
+ "stock": 11,
+ "icon": "laptop",
+ "currencyCode": "EUR",
+ "orderQuantity": 3,
+ "description": "Newest laptop featuring a touch-sensitive OLED display."
+ },
+ {
+ "id": 105,
+ "name": "Mouse 2",
+ "price": 40.0,
+ "stock": 20,
+ "icon": "product",
+ "currencyCode": "EUR",
+ "orderQuantity": 6,
+ "description": "The Mouse 2 is a computer mouse featuring a multi-touch acrylic surface for scrolling. The mouse features a lithium-ion rechargeable battery and Lightning connector for charging and pairing."
+ },
+ {
+ "id": 106,
+ "name": "Printer",
+ "price": 235.0,
+ "stock": 24,
+ "icon": "fx",
+ "currencyCode": "EUR",
+ "orderQuantity": 1,
+ "description": "Affordable printer providing you with the optimal way to take care of all your printing needs."
+ },
+ {
+ "id": 107,
+ "name": "Phone 11",
+ "price": 835.0,
+ "stock": 45,
+ "icon": "iphone",
+ "currencyCode": "EUR",
+ "orderQuantity": 8,
+ "description": "The Phone 11 dimensions are 150.9mm x 75.7mm x 8.3mm (H x W x D). It weighs about 194 grams (6.84 ounces)."
+ },
+ {
+ "id": 108,
+ "name": "Phone 3a",
+ "price": 299.0,
+ "stock": 54,
+ "icon": "desktop-mobile",
+ "currencyCode": "EUR",
+ "orderQuantity": 7,
+ "description": "At 5.6 inches, the display is proportionate to the relatively small body of the phone."
+ },
+ {
+ "id": 109,
+ "name": "Game Console 4",
+ "price": 330.0,
+ "stock": 94,
+ "icon": "video",
+ "currencyCode": "EUR",
+ "orderQuantity": 1,
+ "description": "This is the fourth home video game console compatible with all gaming systems."
+ },
+ {
+ "id": 110,
+ "name": "Monitor",
+ "price": 630.0,
+ "stock": 20,
+ "icon": "sys-monitor",
+ "currencyCode": "EUR",
+ "orderQuantity": 3,
+ "description": "34'' Monitor, Display with stand Height adjustable (115 mm), tiltable (-5° to 21°), rotatable (-30° to 30°) Security slot (cable lock sold separately), anti-theft slot for locking to stand (for display). Includes: DisplayPort cable, HDMI cable, Power cable, Stand, USB 3.0 Type-A to Type-B cable, USB-C cable."
+ }
+ ]
+}
+```
+
+
+### Run UI5 app
+
+
+You can run the UI5 project to check if it's assembled correctly. Open a terminal/command prompt and navigate to `ui5-mf`, then execute:
+
+```Shell
+npm start
+```
+
+You should be able to access the app at `http://localhost:8080/index.html`. If you want to see the UI5 project in the context of the larger app, open a new terminal window, navigate to `react-core-mf` and run `npm start`. Refresh your browser to see the changes.
+
+
+
diff --git a/tutorials/luigi-container/luigi-container.md b/tutorials/luigi-container/luigi-container.md
new file mode 100644
index 0000000..2cebf2d
--- /dev/null
+++ b/tutorials/luigi-container/luigi-container.md
@@ -0,0 +1,272 @@
+---
+parser: v2
+author_name: Johannes Doberer
+author_profile: https://github.com/JohannesDoberer
+auto_validation: true
+time: 20
+keywords: tutorial
+tags: [ tutorial>beginner, programming-tool>javascript]
+primary_tag: topic>user-interface
+---
+
+# Implement Micro Frontends in Your UI5 App with Luigi Container
+ Learn how to build a UI5 application that utilizes the Luigi micro frontend framework. With the help of Luigi Container, you can create more modular and reusable applications in a simple way.
+
+## Prerequisites
+ - It's recommended to try the simpler Luigi examples on [GitHub](https://github.com/SAP/luigi/tree/main/core/examples) first to get acquainted with the framework.
+ - You need to have [Node.js](https://nodejs.org/en/download/current/) installed.
+
+## You will learn
+ - The basics of the Luigi micro frontend framework and Luigi Container
+ - How to install Luigi Container.
+ - How to use Luigi Container inside a sample UI5 application.
+
+## Intro
+
+[Project "Luigi"](https://luigi-project.io) is an open-source micro frontend framework suitable for SAP environments, providing Fiori-compliant navigation out-of-the-box. Luigi is technology-agnostic, allowing you to create your app using any given frontend toolkit.
+
+Normally, Luigi consists of two main parts: **Luigi Core** and **Luigi Client**. Core refers to the main app which houses the micro frontends, while Client refers to the micro frontends themselves.
+
+However, a third feature called [Luigi Container](https://docs.luigi-project.io/docs/luigi-container) allows you to easily insert Luigi micro frontends anywhere without the need for a Luigi Core application. This feature simplifies the use of Luigi for developers, eliminating the need for significant changes in their applications.
+
+This tutorial shows you how to incorporate micro frontends inside a [UI5](https://sdk.openui5.org) application. Nevertheless, a similar process will also apply to other frontend frameworks such as [Angular](https://angular.io/) or [React](https://react.dev/).
+
+> **Note:** In addition to this tutorial, you can also experiment with the Luigi Container test app on [GitHub](https://github.com/SAP/luigi/tree/main/container/test-app).
+
+---
+
+### Install UI5 generator
+
+1. Open a new Command Prompt/Terminal window and install the UI5 generator:
+
+ `npm install -g yo generator-easy-ui5`
+
+2. Run this command to ensure that Yeoman has been installed correctly:
+
+ `yo`
+
+Make sure the `easy-ui5` generator is listed.
+
+### Create UI5 application
+
+1. Create your UI5 project:
+
+ `yo easy-ui5`
+
+2. Answer the prompts in this way to create your new project:
+
+ 
+
+3. Run the app locally:
+
+ ```shell
+ cd luigi.ui5app
+ npm start # or "yarn start"
+ ```
+
+### Install Luigi Container
+
+Luigi Container can be installed via a [npm](https://www.npmjs.com/) package.
+
+To use npm packages in UI5, you need to first install the tooling extension `ui5-tooling-modules`.
+
+1. In your project directory, run:
+
+ ```shell
+ npm install ui5-tooling-modules -D
+ ```
+
+
+2. In this step, you'll add the UI5 tooling task and middleware declaration. Open your application's `ui5.yaml` file. Replace the content with the following content. Keep in mind that the version numbers might be higher in your case.
+
+ ```yaml
+ specVersion: "3.0"
+ metadata:
+ name: luigi.ui5app
+ type: application
+ framework:
+ name: OpenUI5
+ version: "1.121.1"
+ libraries:
+ - name: sap.m
+ - name: sap.ui.core
+ - name: themelib_sap_fiori_3
+ - name: themelib_sap_horizon
+ builder:
+ customTasks:
+ - name: ui5-tooling-modules-task
+ afterTask: generateVersionInfo
+ server:
+ customMiddleware:
+ - name: ui5-tooling-modules-middleware
+ afterMiddleware: compression
+ - name: ui5-middleware-livereload
+ afterMiddleware: compression
+
+ ```
+
+3. Create a new folder called `control` in `luigi.ui5app/webapp`. In it, create a file called `LuigiContainer.js` and paste the following content into it:
+
+ ```javascript
+ sap.ui.define([
+ "sap/ui/core/webc/WebComponent",
+ "@luigi-project/container"
+ ], function(WebComponent) {
+ "use strict";
+
+ /**
+ * The luigi.ui5app.control.LuigiContainer is a component to render a Luigi micro frontend (iframe or web component based) without the need of it being a Luigi Core application.
+ */
+ var LuigiContainer = WebComponent.extend("luigi.ui5app.control.LuigiContainer", {
+ metadata: {
+ tag: "luigi-container",
+ properties: {
+ /**
+ * Defines the view URL to load
+ */
+ viewURL: {
+ type: "string",
+ defaultValue: "",
+ mapping: {
+ to: "viewURL"
+ }
+ },
+
+ /**
+ * Defines whether to load the Luigi component as web component
+ */
+ webComponent: {
+ type: "any",
+ defaultValue: false,
+ mapping: {
+ to: "webcomponent",
+ formatter: "_mapIsWebComponent"
+ }
+ },
+
+ /**
+ * Defines the height of the control
+ */
+ height: {
+ type: "sap.ui.core.CSSSize",
+ mapping: "style"
+ },
+
+ /**
+ * Defines the width of the control
+ */
+ width: {
+ type: "sap.ui.core.CSSSize",
+ mapping: "style"
+ },
+
+ /**
+ * Defines label of the Luigi component
+ */
+ label: {
+ type: "string",
+ defaultValue: ""
+ },
+
+ /**
+ * Defines the context to use
+ */
+ context: {
+ type: "object",
+ defaultValue: {}
+ },
+
+ theme: {
+ type: "string",
+ defaultValue: ""
+ }
+ },
+ methods: [
+ "updateContext", /** Updates the context of the Luigi component */
+ "sendCustomMessage", /** Sends a custom message to the referenced iFrame or web component */
+ "closeAlert" /** Sends a message to the Luigi component notifying that the alert has been closed */
+ ]
+ }
+ });
+
+ LuigiContainer.prototype._mapIsWebComponent = function(vIsWebComponent) {
+ return vIsWebComponent !== "false" && vIsWebComponent ? "true" : undefined;
+ };
+
+ return LuigiContainer;
+ });
+ ```
+
+4. In Command Prompt/Terminal, download the Luigi Container npm package:
+
+ ```shell
+ npm install @luigi-project/container
+ ```
+
+5. Go to the `package.json` file and ensure that the ` @luigi-project/container` and `ui5-tooling-modules` dependencies are added. Keep in mind that the version numbers might be higher in your case.
+
+ ```json
+ [...]
+ "devDependencies": {
+ [...]
+ //Around line 30
+ "ui5-tooling-modules": "^3.2.4"
+ },
+ "dependencies": {
+ "@luigi-project/container": "^1.0.0"
+ }
+ ```
+
+### Use Luigi Container
+
+1. In this step, you'll use Luigi Container in your app and configure the Luigi [viewURL](https://docs.luigi-project.io/docs/navigation-parameters-reference/?section=viewurl) property to render a micro frontend on the page. Go to the `webapp/view/Main.view.xml` file of your UI5 application. Replace the content with the following:
+
+ ```xml
+
+
+
+
+
+
+
+
+
+ ```
+
+2. Run your application:
+
+ ```shell
+ npm start
+ ```
+
+3. Open `http://localhost:8080/` in your browser. You should see a sample shopping app with the URL `https://sdk.openui5.org/test-resources/sap/m/demokit/cart/webapp/index.html` on your page:
+
+ 
+
+4. Now that your application is using Luigi Container, you can easily exchange micro frontends to create a modular, scalable app. To insert a different micro frontend, simply go back to `webapp/view/Main.view.xml` and change the Luigi [viewURL](https://docs.luigi-project.io/docs/navigation-parameters-reference/?section=viewurl) property like so:
+
+ ```xml
+ [...]
+
+
+
+ [...]
+ ```
+
+5. Open `http://localhost:8080/` in your browser. You should see the new micro frontend on your page:
+
+ 
diff --git a/tutorials/luigi-container/shopping.png b/tutorials/luigi-container/shopping.png
new file mode 100644
index 0000000..4ae5db9
Binary files /dev/null and b/tutorials/luigi-container/shopping.png differ
diff --git a/tutorials/luigi-container/table.png b/tutorials/luigi-container/table.png
new file mode 100644
index 0000000..5bdb9a5
Binary files /dev/null and b/tutorials/luigi-container/table.png differ
diff --git a/tutorials/luigi-container/ui5.png b/tutorials/luigi-container/ui5.png
new file mode 100644
index 0000000..41d7d28
Binary files /dev/null and b/tutorials/luigi-container/ui5.png differ
diff --git a/tutorials/luigi-getting-started/architecture.png b/tutorials/luigi-getting-started/architecture.png
new file mode 100644
index 0000000..7b496af
Binary files /dev/null and b/tutorials/luigi-getting-started/architecture.png differ
diff --git a/tutorials/luigi-getting-started/luigi-getting-started.md b/tutorials/luigi-getting-started/luigi-getting-started.md
new file mode 100644
index 0000000..24bb9f6
--- /dev/null
+++ b/tutorials/luigi-getting-started/luigi-getting-started.md
@@ -0,0 +1,93 @@
+---
+parser: v2
+author_name: Johannes Doberer
+author_profile: https://github.com/JohannesDoberer
+auto_validation: true
+time: 5
+keywords: tutorial
+tags: [ tutorial>beginner, topic>javascript]
+primary_tag: topic>user-interface
+---
+
+# Introduction to Luigi
+ Learn about the basic architecture and terminology of the Luigi micro-frontend framework, and learn what you will build in the next tutorial steps.
+
+## You will learn
+ - What micro-frontends are
+ - What the Luigi project is
+ - Luigi terminology
+
+---
+
+### What are micro-frontends?
+
+
+Micro-frontends are often called "microservices for the front-end". They allow you to break down large monolith front-ends into independent, scalable, individual parts which work together. Micro-frontend architecture is especially useful for complex products or companies with many teams and can help you create consistent web applications.
+
+Watch this video which explains the basics of micro-frontend architecture and how it can be implemented with Luigi:
+
+
+
+
+### What is Luigi?
+
+
+[Luigi](https://luigi-project.io) is an open source micro-frontend framework written in Svelte. It allows you to create a consistent user interface and navigation, while also offering additional features to make development easier. Its appearance is based on Fundamentals Library Styles. Luigi is technology agnostic, allowing you to build your app and add micro-frontends to it using React, Angular, UI5, or any other technology.
+
+[Luigi Fiddle](https://fiddle.luigi-project.io) is a test playground where you can get a feel for Luigi.
+
+This diagram portrays the basic architecture of Luigi:
+
+
+
+
+
+### Luigi terminology
+
+
+This is a small list of Luigi terms that will be helpful when doing the tutorial:
+
+- **Luigi Core** - refers to the main application inside which a micro-frontend is displayed. It includes the top and side navigation and all other settings related to the main application.
+- **Luigi Client** - a term covering all micro-frontend-related settings offered by Luigi. Micro-frontends are configurable via the Luigi Client API.
+- **Parameters** - parameters are the elements used to configure your Luigi application. Read the Luigi documentation for a full list of [navigation](https://docs.luigi-project.io/docs/navigation-parameters-reference), [authorization](https://docs.luigi-project.io/docs/authorization-configuration), and [general settings](https://docs.luigi-project.io/docs/general-settings) parameters.
+- **Navigation nodes** - the individual links of the side navigation in Luigi.
+- **Contexts** - contexts are Luigi parameters which allow you to pass objects to the micro-frontend.
+- **Views** - another name for micro-frontends.
+
+
+
+### What you will build
+
+
+In the subsequent tutorials, you will create an application with Luigi from scratch. It will be based around the idea of a **web shopping platform** and it will include additional features such as localization for displaying the website in English and German.
+
+The app consists of three main parts:
+
+1. Luigi Core app built using React: the "main app" which houses the micro-frontends and includes the top and side navigation that stays consistent no matter which sub-page of the app you navigate to.
+
+2. Micro-frontends built using React: they include the homepage, a "Products" page, and a "Product Detail" list with information on each product.
+
+3. Micro-frontend built using UI5: an "Order History" page showing the quantity and price of products that were purchased.
+
+In the end, the homepage for your finished app should look like this:
+
+
+
+
+### Further support
+
+
+If you need help with the tutorials or Luigi in general, you can:
+
+- Refer to the source code for the completed tutorial app on our [SAP Samples repository](https://github.com/SAP-samples/luigi-micro-frontend-application).
+- Refer to the [Luigi documentation](https://docs.luigi-project.io/docs/getting-started).
+- Check out our [GitHub Discussions](https://github.com/SAP/luigi/discussions) page.
+- Contact the Luigi team on [Slack](https://slack.luigi-project.io).
+
+
+
+
+
+
+
+---
diff --git a/tutorials/luigi-getting-started/luigi-shopping-app.png b/tutorials/luigi-getting-started/luigi-shopping-app.png
new file mode 100644
index 0000000..6eca26c
Binary files /dev/null and b/tutorials/luigi-getting-started/luigi-shopping-app.png differ