New NX Feature: Angular Standalone Projects

In the field of frontend development, we are always on the lookout for innovative tools that optimize our workflows. Nx, known as a versatile build tool, is nothing new for those of us working on complex Javascript applications. It flexes its strengths in both the monolith and microservices architecture.

With the latest update to Version 15.3, Nx undergoes a remarkable transformation: it now supports the development of standalone projects. This expansion allows us to maintain modularity in code, much like an Nx monorepo, but within a single, independent project, without having to forego the proven features of Nx.

The structure of a standalone project significantly differs from the conventional apps and libs directories we are familiar with from working with Nx monorepos. In such a case, the application sits directly in the root directory of the workspace. Libraries can be added to modularize the application. This innovation allows libraries to be placed immediately in direct proximity to the application.

Here is an example of the directory structure:

1e2e/
2  src/
3  cypress.config.ts
4  project.json
5  ...
6src/
7  app/
8  main.tsx
9  ...
10public/
11index.html
12project.json
13tsconfig.spec.json
14tsconfig.app.json
15tsconfig.json
16vite.config.ts
17nx.json                       
18package.json

Nx enriches our development practice with a range of generators, useful features such as module boundary rules, and the ability to manage tests, linting, and builds for individual libraries. We must not overlook the sophisticated Nx caching system, which further facilitates our work.

In summary, Nx is a powerful tool that offers significant benefits to frontend developers.

References:

• Nx 15.3 — Standalone Projects, Vite, Task Graph and more!

• Angular Standalone Tutorial