Skip to Content

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
alexandra-simeonovaAleksandra SimeonovaOctober 19, 2021
Created by
alexandra-simeonova
November 12, 2020
Contributors
alexandra-simeonova
  • Step 1

    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:

      JavaScript
      Copy
      children: [
              {
                  pathSegment: "products",
                  //HERE
                  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:

      JavaScript
      Copy
      var dict = {
        "en-US": { PRODUCTS: "Products", ORDERHISTORY: "Order History" },
        //THIS LINE HERE HAS TO BE ADDED
        "de-DE": { PRODUCTS: "Produkte", ORDERHISTORY: "Bestellungen" },
      };
      
  • Step 2

    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
    Copy
    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",
                },
            };
    
  • Step 3
    1. In the file react-core-mf/src/views/home.js, around line 20, replace the this.options variable with the following code:
      JavaScript
      Copy
      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?

Back to top