In the new world of frontend developers single page applications built with different JavaScript like Angular, React, Vue.js, etc. are dominating, especially the data driven enterprise applications.

Frameworks & libraries that can used together with

The approach of keeping the user interface code isolated from any backend code or logics are awesome which is promoted by all of the SPA (Single page application) frameworks/libraries but this doesn’t mean that the application you are building will never have the issue of getting bloated or unmaintainable.

What will happen when:

• You want to work with multiple teams that will not have access to your codebase
• You want to use multiple framework / library (Let’s say Angular & ReactJs)
• You want to load different application based on the user type dynamically
• You want to build the application in different flavours

In this example we will create a micro-frontend application with a few commands and some lines of customisation.

Prerequisites:

Creating an empty NX workspace

Let’s create a NX workspace to work and set the name as “micro-frontend”:

npx create-nx-workspace@latest micro-frontend

The create-nx-workspace command will ask you to select a preset, which will configure some plugins and create your applications to help you get started.

? What to create in the new workspace (Use arrow keys)
❯ apps [an empty workspace with no plugins with a layout that works best for building apps]

When presented with interactive options select to choose an empty workspace.

Create Angular HOST & REMOTE application

Prerequisite for creating an Angular host is to have the @nrwl/angular package inside the workspace. Let’s install the nrwl package using the following command

npm install — save @nrwl/angular

Before installing make sure you are inside the “micro-frontend” directory.

Use the following command to create a new Angular application using NX:

npx nx generate @nrwl/angular:application --name=angularHost --style=scss --port=4200 --e2eTestRunner=none --linter=none --mfe --mfeType=host --unitTestRunner=none --no-interactive

Create a remote Angular application using the following command:

npx nx generate @nrwl/angular:application --name=angularRemote --style=scss --port=4199 --e2eTestRunner=none --host=angular-host --linter=none --mfe --routing --unitTestRunner=none --no-interactive

Once installation is done you will be able to run both the application using the following command:

nx run angular-host:serve-mfe

Known error: At the time of writing this article it is a know issue that the Webpack doesn’t get installed by default. In order to fix this issue remove the node_modules directory and package-lock.json file and do npm install again

Add this router configuration in app.module.ts in “/angular-host/src/app/”

RouterModule.forRoot([{
  path: '',
  loadChildren: () =>
    import('angular-remote/Module').then((m) =>m.RemoteEntryModule),
}])

Add <router-outlet></router-outlet> inside the app.module.html to witness the remote-angular application is loaded inside the host application.

And that’s it! We have the basic outline of a working micro frontend up and running.

You can get the repo here: https://github.com/ssunils/micro-frontend-example.

Build Micro Frontends with components

Just like Microservices, Microfrontends are a great way to speed-up and scale app development, with independent deployments, decoupled codebases, and autonomous teams.

OSS Tools likeBitoffer a great developer experience for building component-driven Micro frontends. Build components, collaborate, and compose applications that scale. Give it a try →

An independent product component: watch the auto-generated dependency graph