Meiko: A Micro-Frontend Implementation Project

This project is based on micro frontend implementation. First, let’s see what exactly is a micro frontend architecture.

Micro frontend architecture

The idea behind Micro Frontends is to think about a website or web app as a composition of features which are owned by independent teams. Each team has a distinct area of business or mission it cares about and specialises in. A team is cross functional and develops its features end-to-end, from database to user interface. — micro-frontends.org

Figure 1: Each micro frontend is deployed to production independently. Source

Figure 2: You can usually derive your architecture from the visual structure of the page. Source

Now, you’ll start to understand how micro frontend architecture works. In order to implement micro frontends, you should have a container application to hold them (like in figure 2). That’s what we initially built, a container/ entry point application named meiko.

meiko

Figure 3: Describes the whole idea of meiko and our project. Source.

meiko is the container application for our project. I created a simple Node.js server that serves index.html.

Here’s the pull request to meiko:

Adding container meiko by ThanoshanMV · Pull Request #1 · 99xt-incubator/meiko

Once our container app was ready, we had to think about the micro fronends and how can we assemble them in our container app.

We decided to include each micro frontend as a package dependency to meiko.

Creating meiko-angular

meiko-angular is a simple Angular application that’s used to demonstrate our micro frontend implementation idea.

After creating it, I made some source code changes and bundled it for production (build files).

We chose AWS S3 for storing our build files.