What do you know about Nx? Based on the introduction in the Nx documentation:
Nx is a powerful, open-source, technology-agnostic build platform designed to efficiently manage codebases of any scale.
Actually, you can implement a Monorepo platform, but that could be implemented as a micro-frontend platform based on the Module Federation feature. So, I don't want to teach Nx this here. I’d like to share a real problem I faced in one of my projects.
Imagine you have a project with a main dashboard and many small shared libraries and features. For example, you have a Layout with a Sidebar, a Navbar, a Settings page, and a Home page. These components are specific to this platform. Additionally, you have several shared features, including authentication, a Reports page, a User Settings page, and Design systems, among others.
At first, you think about Monorepo architecture, and it's a good solution, but it's not enough. We have to use those shared features in several projects. Actually, we're not an online platform; we're a B2B platform, and we try to implement a platform for each customer.
It was a technical challenge for me, and I had to solve this as a senior front-end developer. The core issue when mixing frameworks is Module Federation. While MF allows one framework (like Angular) to load a module built with another (like React), it still requires the module to be built in a way that the host can consume it, and often relies on sharing core dependencies. Let's check my approach.
My solution: Decoupled Build with a Private Registry
I used a private package registry and Polyrepo to publish/consume internally within my company's network. Actually, this uses Nx's ability to manage projects independently.
1- Separate Repositories for Frameworks
I created a dedicated Nx workspace/repo for my main applications as a host, and a smaller Nx workspace for each micro-frontend module or shared library.
2- Establish a Private Package Registry
I was working on a secure app so that I couldn't use public services. I should set up a self-hosted, private NPM registry within my secured network. I found these two options:
- Verdaccio: Lightweight, easy to set up.
- Nexus Repository OSS: Robust, enterprise-grade solution.
3- Publish from Remote Repositories
In each remote repository, I would configure the Nx build to not just create a Module Federation remote, but also bundle and publish the module as a deployable NPM package, because our host apps could be implemented with any frameworks and libraries.
The host apps (Angular or React) only need to interact with the private registry:
// angular-host-app/package.json
"dependencies": {
// ... other dependencies
"@my-org/dashboard-feature": "1.0.0"
}
Updating dependencies is so simple, I just need to publish a new version (e.g., 2.0.0) from the remote repo to the private NPM registry (e.g., Verdaccio), and update the version in the host app's package.json.
I used this solution 2 years ago; maybe we have many approaches to implement a platform like this now. I tried to explain my approach, and this article provides a comprehensive view. I didn't want to enter too technical explanations.
If you’re a front-end developer dealing with multiple client projects or multi-framework setups, this approach might help you.
Top comments (0)