micro-lc

The Mia-Platform micro frontend solution

micro-lc enables you to create modular applications composed by multiple, independent micro frontends called plugins integrated at runtime. micro-lc consists of a core interface that loads, embeds, and orchestrates plugins, while providing configuration options and useful out-of-the-box features.

The core components are written in Typescript and React, micro-lc is technology-agnostic, which means that it integrates seamlessly with your favourite toolkit, being it Angular, React, Vue, or anything else you like.

You can consult here the full documentation.

An introduction about micro frontend and how micro-lc works:

Horizontal micro-frontend

Are you interested in horizontal split micro-frontends?

Take also a look at micro-lc-element-composer!

Getting Started

The project is a monorepo built with yarn workspaces and lerna. All workspaces can be found under the packages folder. Each package has its own readme file which contains detailed information about its content.

Set up the local environment

To develop the service locally you need:

• Node.js v12 or later,
• Yarn 1.x.x

To set up node.js, we suggest using nvm, so you can manage multiple versions easily. Once you have installed nvm, you can go inside the directory of the project and simply run nvm install, the .nvmrc file will install and select the correct version if you don’t already have it.

To install Yarn, run npm install --global yarn.

Once you have all the dependency in place, you can launch:

yarn install

This command will install the dependencies for every workspace and will trigger a build of the core workspace.

Start the project

In order to try micro-lc on your machine with mocked configurations, you have to execute only the dev script, using the following command:

yarn dev

Run a package script

To run a script in a workspace, you can run yarn workspace PACKAGE_NAME SCRIPT_NAME. For example, to run tests in fe-container you should run:

yarn workspace fe-container test

or you can use the shortcut:

yarn fe-container test

Run tests e2e

To run the e2e tests on your local code, you should first build the front-end and back-end images: otherwise you can use the images uploaded on Docker Hub.

Build fe-container image

Run inside the fe-container directory the commands

yarn build
docker build -t miaplatform/microlc .

Build be-config image

Run inside the root directory

yarn be-config build
docker build -f packages/be-config/Dockerfile -t miaplatform/microlc-config-manager .

Run e2e tests

Run inside the e2e directory the command

docker-compose up

to spin-up the e2e environment, and then

yarn e2e

to run your tests