nx VS single-spa

The solution isn't always a knee-jerk switch to a polyrepo. As radwanalmsora highlighted in the discussion, more often it's about investing in robust tooling for your monorepo. Tools like Bazel, Nx, or Turborepo can build graphs to understand dependencies, ensuring CI only runs affected targets. Combined with CODEOWNERS files, these tools enable even massive monorepos (think Google or Meta scale) to function efficiently. The takeaway for technical leadership: invest in smart tooling early to maintain high software development productivity, rather than letting a lack of structure dictate your repository strategy.

Monorepo gave you atomic cross-service changes, a single dependency graph, unified CI/CD, and zero version skew between internal libraries. The cost was large clone sizes, slower CI without build caching, complex permission models, and the need for specialized tooling like Bazel, Pants, Nx, or Buck2 to keep builds fast.

But workspaces alone doesn't handle task orchestration — what to build first, what to cache, what to skip. For that, build tools like Lerna, Nx, or Turborepo are generally used. They sit on top of workspaces, not in place of them — you use both.

Especially in monorepo setups using Turborepo or Nx, pnpm workspaces have become standard.

The turning point came when we consolidated all Terraform modules into a single monorepo. Nx provided the orchestration layer that made this transformation not just possible, but elegant.

Continued development of Analog would not be possible without our partners and community. Thanks to our official deployment partner Zerop and longtime supporters Snyder Technologies, Nx, and House of Angular, and many other backers of the project.

Nx is a smart build system originally designed for JavaScript/TypeScript monorepos, but it's fundamentally language-agnostic. At its core, Nx provides exactly what we need for managing Terraform modules:

What do you know about Nx? Based on the introduction in the Nx documentation:

As a library author, it’s important to support both legacy CommonJS projects and modern ESM projects. The solution is to publish a single npm package compatible with both module formats. This guide demonstrates how to build and publish a universal NPM package using the Nx Dev Toolkit and Rollup.

The software is fully written in TypeScript and organized as an Nx workspace, utilizing the latest framework releases. The backend is based on NestJS in combination with PostgreSQL as a database together with Prisma and Redis for caching. The frontend is developed with Angular.

I'm going to be using single-spa for this demo because it is straightforward and offers plenty of examples to work from. This is not a tutorial on single-spa specifically, so I may skip over some of the initial setup.

Micro-frontend has always aroused my curiosity: I wanted to understand how they work, how to build them, what their pros and cons are. In 2018, inspired by this topic, I tried to build something similar to single-spa in one of the pet projects. At that time, there was no Webpack Module Federation (WMF), and Webpack itself seemed inconvenient. The choice fell on ESBuild and importmap. Browser support for importmap at the time was mostly on paper or with special flags in browsers. For this reason, I used a polyfill. But, surprisingly, everything worked and even in several projects.

We will cover some of the popular frameworks and libraries available, and guide you through setting up a microfrontend architecture using Single-Spa.

In the next article, we will explore the tools and technologies for building microfrontends, including a step-by-step guide to setting up a microfrontend architecture using Single-Spa.

Official Website

At JupiterOne, we've made a significant transition from a monolithic frontend to a distributed frontend architecture using microfrontends, powered by (single-spa-react)[https://single-spa.js.org/]. This architectural shift has brought many benefits, such as lazy loading sections of the app and accelerating our development cycle. However, like any significant change, it has also come with its set of challenges.

Single-SPA Framework - One of the most popular choices. It has a large community behind it and offers robust routing and lifecycle management for microapps. Ref - https://single-spa.js.org/

Joel Denning is the visionary behind single-spa, boasting profound insights into the true mechanics of the web and is, in my view, a pioneer in micro frontend architecture. I highly recommend checking the single-spa website and his YouTube channel. While the videos might appear dated at first glance, rest assured, Joel is ahead of his time, and the content remains incredibly relevant today.