Implement Micro Frontends in Your UI5 App with Luigi Container

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.

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 Copy

   cd luigi.ui5app
   npm start # or "yarn start"

Luigi Container can be installed via a npm 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 Copy

   npm install ui5-tooling-modules -D

2. In this step, you will add the UI5 tooling task and middleware declaration. Open your application’s ui5.yaml file. Replace the content with the one below. Keep in mind that the version numbers might be higher in your case.

   YAML Copy

   specVersion: "4.0"
   metadata:
     name: luigi.ui5app
   type: application
   framework:
     name: OpenUI5
     version: "1.146.0"
     libraries:
       - name: sap.m
       - name: sap.ui.core
       - name: themelib_sap_horizon
   builder:
     resources:
       excludes:
         - "test/e2e/**"
     customTasks:
       - name: ui5-tooling-modules-task
         afterTask: replaceVersion
   server:
     customMiddleware:
       - name: ui5-tooling-modules-middleware
         afterMiddleware: compression
         configuration:
           debug: true
           persistentCache: false
       - name: "@ui5/middleware-code-coverage"
         afterMiddleware: compression
         configuration:
           excludePatterns:
             - "resources/"
             - "test/"
       - name: ui5-middleware-livereload
         afterMiddleware: compression

   Show all 33 lines Show less

3. In Command Prompt/Terminal, download the Luigi Container npm package:

   Shell Copy

   npm install @luigi-project/container
   npm install --save-dev @ui5/webcomponents

4. 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 Copy

   [...]
   "devDependencies": {
   [...]
       "ui5-tooling-modules": "^3.35.0",
       "@ui5/webcomponents": "^2.21.0",
   },
   "dependencies": {
       "@luigi-project/container": "^1.7.6"
   }

1. In this step, you will use Luigi Container in your app and configure the Luigi viewurl property in order 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 Copy

   <mvc:View
       controllerName="luigi.ui5app.controller.Main"
       displayBlock="true"
       xmlns="sap.m"
       xmlns:mvc="sap.ui.core.mvc"
       xmlns:core="sap.ui.core"
       xmlns:webc="@ui5/webcomponents"
       xmlns:luigi="@luigi-project/container" 
       core:require="{
   	    core: 'sap/ui/core/Core'
       }">
   
       <Page
           title="{i18n>appTitle}"
           icon="sap-icon://accept"
           id="page">
           <content>
               <luigi:LuigiContainer viewurl="https://sdk.openui5.org/test-resources/sap/m/demokit/cart/webapp/index.html" theme="{= core.getConfiguration().getTheme() }"/>
           </content>
       </Page>
   
   </mvc:View>

2. Run your application:

   Shell Copy

   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 in order 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 property like so:

   XML Copy

   [...]
           <content>
               <luigi:LuigiContainer viewurl="https://fiddle.luigi-project.io/examples/microfrontends/fundamental/table-demo-page.html" theme="{= core.getConfiguration().getTheme() }"/>
           </content>
   [...]

5. Open http://localhost:8080/ in your browser. You should see the new micro frontend on your page: