This content originally appeared on Bits and Pieces - Medium and was authored by Sunil Soundarapandian
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.
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 like Bit offer a great developer experience for building component-driven Micro frontends. Build components, collaborate, and compose applications that scale. Give it a try →
Micro Frontends with Module Federation was originally published in Bits and Pieces on Medium, where people are continuing the conversation by highlighting and responding to this story.
This content originally appeared on Bits and Pieces - Medium and was authored by Sunil Soundarapandian
Sunil Soundarapandian | Sciencx (2022-02-01T09:32:39+00:00) Micro Frontends with Module Federation. Retrieved from https://www.scien.cx/2022/02/01/micro-frontends-with-module-federation/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.