Restore Luigi tutorials

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
+<!-- description --> 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.  Ins​tall 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. 
+
+    ![UI5 Terminal](ui5-yo.png)
+
+
+
+
+
+
+
+---

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
+<!-- description --> 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' }]);
+    ```
+
+
+
+
+
+
+---