Why do big companies use Nx ? Monorepo Tool 5 Minute Quick Build

Introduction to Monorepo

Front-end technologies have been evolving rapidly in recent years, including ES6, SCSS pre-processing, npm, front-end frameworks, CI/CD, Docker, and so on. If you want to complete a small application, in addition to the technologies listed above, you may also need to maintain a relatively large and complex platform.

Monorepository is a framework concept, from the literal meaning of Mono (one) repo (repository), you can learn that this (Monorepo) framework is to put a large amount of code in the same code base to do management, unlike the old concept of separation, Google is one of the companies that prioritize the use of Google is one of the first companies to adopt Monorepo.

To learn more, please refer to the following articles:

Do you really know Monorepo? 5 minutes to understand the front-end of large-scale architecture

Nx Intro

Nx is a fast, efficient and very extensible Monorepo tool with the following features.

1. Support for the three main front-end frameworks:Vue、React、Angular

2. Support for back-end frameworks:Express、Nest、Next

3. For the Monorepo framework

4. Support various types of tests:Cypress、Jest

Nx Front End Framework Concept

Nx is a front-end framework with a design philosophy very similar to the well-known program editor Visual Studio Code. In Visual Studio Code, even without installing any extensions, you can get an excellent development experience. Nx follows similar principles, its core features are concise and clear, without ambiguity, so that development becomes more clear.

The core features of Nx include project management, task execution, code generation and dependency analysis. These features enable development teams to collaborate more effectively, manage large front-end projects, and ensure code quality and consistency. With Nx, you can easily create, maintain, and scale front-end projects without worrying about configuration and tool confusion.

Similar to Visual Studio Code extensions, Nx also supports plugins, which allows you to choose the right plugin for your project. This flexibility makes Nx suitable for a wide range of front-end projects, from small applications to large enterprise applications.

Next, let's try to create a simple Nx project. First, you need to install Nx and create a new project. Then, you can use Nx's command-line tools to generate components, services, and other code files, and Nx provides a number of predefined project templates to speed up the project startup process. You can easily customize the project structure and configuration to meet your specific needs.

Nx also provides powerful task execution capabilities that help you automate the build, test, and deployment process. This helps ensure the reliability and stability of your projects and improves development efficiency.

In short, Nx is a powerful and flexible front-end framework designed with a focus on simplicity and customizability to make it easier for development teams to manage front-end projects and provide a great development experience. Whether you are an individual developer or a large team, Nx can help you build high-quality front-end applications.

Nx build

Creating a new Nx environment

Readers can create a new Nx working environment with the following commands

npx create-nx-workspace@latest

When the creation is complete, you will need to select the preconfiguration. Here are some Nx preconfigurations for the reader's reference.

Workspace(Typescript)

npx create-nx-workspace –preset=core

React

npx create-nx-workspace –preset=react

Next.js

npx create-nx-workspace –preset=next

Angular

npx create-nx-workspace –preset=angular

FullStack — Angular & Nest.js

npx create-nx-workspace –preset=angular-nest

Backend — Express

npx create-nx-workspace –preset=express

Build Nx environment on existing projects

If an existing project has a Lerna or Yarn monorepo, you can create an npx add-nx-to-monorepo by using the following commands

If you already have a React App project, you can also build Nx with the following commands

npx cra-to-nx

Installing the Nx CLI

If you want to improve the developer experience, it is also recommended to install the full domain Nx CLI.

npm install -g nx

Nx Folder Structure

Here's a quick example using a sample from the official Nx documentation.

An Nx project will have roughly the following folders

 

1. myorg/ for your own large Nx project name

2. /apps/ will hold various projects and is the main entry point for all projects. It is recommended that all projects in this folder should be as lightweight as possible, while larger programs with reusable code should be placed in Libraries and loaded in each project.

3. /libs/ will contain all the library projects. In my own work, for example, we modularize some common functions and store them here, such as: PWA

4. /tools/ will contain scripts for commonly used code, and you can also place parameters in this folder. Example: Database settings and scripts

5. /workspace.json lists all the smaller projects within your larger Nx project.

6. /nx.json will be configured according to the Nx CLI, and it will also tell Nx what needs to be cached and how to run it.

7. /tsconfig.base.json sets up a global TypeScript and creates aliases in each library to assist in the loading of either TypeScript or JavaScript.

Conclusion

This is a quick introduction to Nx, explaining what it supports in addition to being a tool for the Monorepo framework, and using commands to build Nx environments based on the current user's context.

I am currently working in a foreign company and I use Nx tools to manage several projects. Personally, I find it very convenient to use, not only to improve the reusability of the code, but also to have more opportunities to collaborate and discuss with other team engineers.

Quote

 

https://github.com/nrwl/nx