Applications

Applications are micro-frontends rendered in the dynamic section of micro-lc. Each application corresponds to a URL pathname, and micro-lc is responsible to handle routing between them.

micro-lc supports three different micro-frontend patterns to integrate applications:

• iframe, where applications are embedded in an iframe tag providing full strict encapsulation,
• compose, where applications are dynamically composed of HTML5 elements or web components following a provided configuration, and
• parcel, where the orchestrator is provided with the full scope of assets needed to start the applications (most of the time either an HTML file or JS scripts).

There also exists a particular type of applications, error pages, which differ in that have a fixed routing pattern.

📄️ iFrames

Nested browsing contexts

📄️ Compose

Composition of HTML tags

📄️ Parcels

micro-frontend loaded using parcels

📄️ Error pages

Applications to cover for errors

Configuration

Applications are registered in the context of micro-lc through configuration key applications, a map linking application unique identifiers to specific information needed for the integration.

interface Applications {
  [unique_id: string]: IFrameApplication | ComposableApplication | ParcelApplication
}

Example

YAML

micro-lc.config.yaml

applications:
  iFrame:
    integrationMode: iframe
    route: ./my-iframe-application
    src: https://www.wikipedia.org/
    attributes:
      title: Wikipedia
      
  compose:
    integrationMode: compose
    route: ./my-compose-application
    config:
      - tag: div
        attributes:
          style: "color: red;"
        content: Hello World!
  
  parcel:
    integrationMode: parcel
    route: ./my-parcel-application
    entry: https://my-static-server/my-parcel-entry.html

JSON

micro-lc.config.json

{
  "applications": {
    "iFrame": {
      "integrationMode": "iframe",
      "route": "./my-iframe-application",
      "src": "https://www.wikipedia.org/",
      "attributes": {
        "title": "Wikipedia"
      }
    },
    "compose": {
      "integrationMode": "compose",
      "route": "./my-compose-application",
      "config": [
        {
          "tag": "div",
          "attributes": {
            "style": "color: red;"
          },
          "content": "Hello World!"
        }
      ]
    },
    "parcel": {
      "integrationMode": "parcel",
      "route": "./my-parcel-application",
      "entry": "https://my-static-server/my-parcel-entry.html"
    }
  }
}