Creating a Standalone Project Using NX With Module Federation

NX is a wonderful framework of which not many Angular/React developers are aware. Today I want to write an introduction about NX and its capabilities.

What is NX?

Nx is a tool that allows us to create an enterprise workspace. The official definition is:

Nx is a powerful open-source build system that provides tools and techniques for enhancing developer productivity, optimizing CI performance, and maintaining code quality.

How or what does NX do?

Well, assume in your company you have a bunch of Angular/ReactJS/Vue js/Node JS projects which you want to develop parallelly and yet maintain the same code respsitory.

Or your company is developing a product, but different teams want to develop different modules in different JS frameworks, like Angular/ReactJS and Vue js. In that case, NX comes in handy.

Secondly, it supports Micro front-end projects, in which you have one hosting project, and others are library projects. Now these library projects may be developed using different frameworks like Angular/React Js and Vue Js etc.

Now that allows a lot of freedom to development teams. They can choose the technology of their choice and do their development based on their strength.

To start, you need to type in the command prompt.

c:\Temp> npx create-nx-workspace <workspace-name>

or

c:\Temp>npx create-nx-workspace

Where would you like to create your workspace?

» org

you can overwrite the org to give your own name for the workspace, like my-workspace.

Next, it will ask you about the technology stack.

Which stack do you want to use?

• None: Configures a TypeScript/JavaScript project with minimal structure.
• React: Configures a React application with your framework of choice.
• Vue: Configures a Vue application with modern tooling.
• Angular: Configures an Angular application with modern tooling.
• Node: Configures a Node API application with your framework of choice.

here, you choose your favorite tech stack. and press the enter key.

Next

Integrated monorepo or standalone project?

• Integrated Monorepo: Nx creates a monorepo that contains multiple projects.
• Standalone: Nx creates a single project and makes it fast.

Here, Monorepo means a repository of multiple standalone projects in Angular (for example), and standalone means a single project.

In NX, we can have standalone project support libraries like several MFE projects.

Features of NX

1. Framework support.
2. MFE support (micro front-end architecture is supported via module federation)
3. Routing support
4. Linting support
5. Multiple Build support (esbuild vs Webpack build)
6. Testing framework support.
7. Build Caching
8. Multiple style sheet (css vs scss) support.

As experienced Javascript developers, you may have already understood nos 1 to 6. But 7 is a completely new functionality provided by NX.

If your project has 3 dependent libraries, then every time you build your project, it's not necessary for NX to rebuild all the reference libraries. It will check if the code has undergone any change, and only if the code has undergone change will it build the main project/dependent library. That saves a lot of development time because the build is cached by NX, and it will rebuild only if any code has changed in the meantime.

To run, first, enter the project folder by typing "cd my-workspace"

Next,

npm install

And at last

npx nx serve

Here is a screenshot of the initial workspace. I have chosen angular as a stack. Please note there is no angular.json. there is project.json.

NX also provides VS-code NX console, a plugin with which you can execute common NX commands and create Components/Libraries/Remotes.

Further details in my next article on NX. I have uploaded the outline of an empty standalone Angular project created using NX with this article.