Skip to Content

Add Localization to Luigi React Application

0 %
Add Localization to Luigi React Application

Add Localization to Luigi React Application

October 19, 2021
Created by
November 12, 2020
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
QR code

Step 1: 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 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:

    children: [
                pathSegment: "products",
                label: "PRODUCTS",
                icon: "product",
                viewUrl: "/sampleapp.html#/products",
                keepSelectedForChildren: true,
                children: [{
                    pathSegment: ':id',
                    viewUrl: '/sampleapp.html#/productDetail/:id',
                    context: { id: ':id' }
                pathSegment: 'order',
                //AND HERE
                label: 'ORDERHISTORY',
                icon: 'history',
                viewUrl: 'http://localhost:8080/index.html'
  3. Add following at around line 111:

    var dict = {
      "en-US": { PRODUCTS: "Products", ORDERHISTORY: "Order History" },
      "de-DE": { PRODUCTS: "Produkte", ORDERHISTORY: "Bestellungen" },
Log on to answer question
Step 2: 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:

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",
Log on to answer question
Step 3: Configure localization in React app
  1. In the file react-core-mf/src/views/home.js, around line 20, replace the this.options variable with the following code:
    this.options = [{ key: 'en-US', text: 'en-US' }, { key: 'de-DE', text: 'de-DE' }];
What is the name of the file used to configure Luigi?

Next Steps

Back to top