NX Project structure

Hello friends 🚀! In the last article we saw how to create a monorepo with NX project : Getting started with NX & Angular

.github: This folder contains the configuration for GitHub Actions. We will cover how to use it in another article.

.nx: This hidden folder stores various configuration and cache files used by the NX tool.

1. Cache Files: These files store the results of previous builds, linting, and testing tasks. NX uses these cache files to speed up future runs of the same tasks, making the build process more efficient.

2. Temporary Files: NX may use this directory to store temporary files needed during the execution of various tasks.

3. Configuration Files: Some settings specific to NX are stored here. These settings can include task runner configurations, workspace configurations, and other metadata.

The .nx folder is crucial for NX's ability to optimize and manage builds and other tasks in a monorepo setup. It ensures that tasks are executed efficiently by using caching and incremental builds. I will explain more about this in details soon.

apps: This folder is important as it contains all your applications. In my project, you can see two apps: one for the Angular app and one for the E2E tests. However, you can have many others here, including Angular, React, Nest, Node apps...

But here's the trick: we won't code much in the apps folder because, with NX, you will think like a library creator.

.eslintrc.json: NX enhances ESLint by adding smart features that make linting faster and more efficient in a monorepo setup

1. Unified Configuration: NX helps you manage a single set of linting rules that can be shared across all projects in your monorepo, ensuring consistency.

2. Faster Linting with Caching: NX uses caching to remember which files have been linted before, so it only checks the files that have changed, speeding up the process.

3. Linting Only What Matters: Instead of running ESLint on the entire codebase, NX allows you to lint only the projects that were affected by recent changes, saving time and money.

In essence, NX makes ESLint smarter and faster, helping maintain code quality efficiently in large monorepos.

jest.config.ts & jest.preset.js: NX comes with Jest automatically integrated, making it easy to set up and run tests in your projects. Jest is a popular testing framework, and NX ensures that it’s seamlessly incorporated into your development workflow.

NX’s integration with Jest simplifies the testing process, providing a ready-to-use setup and powerful customization options. By automating the configuration and offering easy commands to run tests, NX helps you maintain high code quality with minimal effort. Whether you’re working on a single project or managing a complex monorepo, NX and Jest together make testing straightforward and efficient.

nx.json: This file is structured to provide detailed configuration for various aspects of your workspace/monorepo, such as:

• Named Inputs: Defines sets of files that influence the caching mechanism. You can specify which files should be considered when determining whether to re-execute tasks like builds or tests, allowing for both default and environment-specific configurations.

• Target Defaults: Configures default behaviors for specific tasks (referred to as targets). This includes settings like caching, dependency rules (dependsOn), and specific inputs required for the task execution. It allows for optimizing performance and ensuring consistency across environments.

• Plugins: Defines configurations for plugins used within the NX workspace, such as Cypress or ESLint. This section details how these tools should interact with your projects, including target names and specific execution options.

• Generators: Specifies default configurations for generating assets, such as applications or libraries, using tools like Angular CLI or NX's own schematics. Settings can include which test runner or linter to use, what style format to apply, and other project-specific defaults.

• Access Tokens: In cases where NX Cloud is used, this field might contain access tokens to authenticate and connect your local development environment with NX Cloud.

package.json: I understand, you already know what is a package.json file, but here is a twist, in a monorepo you should find only one package.json that define dependencies

Using a single package.json in an NX monorepo offers several advantages:

1. Consistency: Ensures all projects use the same versions of dependencies, avoiding conflicts.

2. Simplified Management: One place to manage updates and audits, making maintenance easier.

3. Efficient Installation: Single installation step for all projects speeds up setups and CI pipelines.

4. Resource Savings: Reduces disk space by avoiding duplicate package installations.

5. Tooling Efficiency: Centralizes tools and scripts, improving build and automation processes.

6. Easier Collaboration: Simplifies onboarding and collaboration by standardizing the development environment across projects.

These benefits make a single package.json essential for scalable and efficient development in NX monorepos.

tsconfig.base.json: If you are familiar with Typescript you already know, this is a centralized configuration of TypeScript on your monorepo, all the others projects can inherit of this base.

Understanding the structure of an NX project is essential for efficiently managing a monorepo. By leveraging the various folders and configuration files, you can optimize your workflow, ensure consistency, and maintain high code quality. NX's powerful features, including caching, incremental builds, and integrated tools like ESLint and Jest, make it a robust solution for modern development needs.

In the next article, we will create our first library, and more importantly, I will introduce module boundaries.

Ressources

https://nx.dev/