Using Nx: Why I chose Nx for all my projects

This will be the first post in a series explaining Nx from my point of view

Photo by Javier Allegue Barros on Unsplash

There comes a time in the life of a developer where they want to turn that hobby project into a portfolio project.

At this point most realize that they do not know how to build or even deploy the app. Or maybe they want to add testing or something cool like storybook. Or they want to quickly, consistently and predictably create a project.

Or they want to reuse all the code that they have written on a previous project and they would like to not copy and paste all of it. Or what about to have both front end and backend in the same project. Or what about multiple projects in the same repo. Or…

Nx is a monorepo tool (which is an oversimplification, they also release the standalone version). But what Nx really is to me, it's a predicable way to structure, run and build (package) projects in different frameworks or even languages. It means learning one way of doing each action and being able to run those actions in all sorts of apps.

During these weeks of writing articles, I have created some react apps, nextjs, angular, web components, nestjs, c#, flutter, ionic… I use pretty much the same types of command to create the apps, run the apps and build (kind of for some non-js projects). That is why I feel so strongly about Nx and decided to write about it.

When creating a JavaScript project, especially the ones supported by the Nx team, we automatically get typescript support, jest integration, cypress integration and ready to run project, eslint config, prettier config, if the project is front end we get css or css preprocessors support. We also get commands for serve, build, test, lint, code generation and scaffolding.

Nx becomes the one tool to learn how to use for all projects. This is the basic process

• Create nx workspace using the the npx command

npx create-nx-workspace@latest

• Choose framework or create an empty workspace following the prompts
• If you need a new project/framework add the plugin for the framework. Find the registry here
• If you are using VSC install the nx console extension.
• Run the generate new app command for the framework.

npx nx generate @plugin-aplication-generator

• If you have the nx console, click on the extension and click on generate. Choose generate your desired framework application. At this point you will have to select from several options from testing to css. Complete and generate.

nx console

• Use the serve, build, test or lint command.

npx nx run <app-name>:<command>

• You have a new project!
• If you so desired, you can repeat this process (minus creating the monorepo workspace) with another framework and put it in the same repo!

If you learn this steps, you will be able to spin up any project (supported by the plugins) really quick!

My bottom-line (I just realized this word needed the hyphen):

• Learn one tool to use multiple frameworks.
• Predictable workspace structure and code architecture.
• Build and testing config optimization done by people much smarter and experienced than me.
• It will become a hotter topic in the coming years so get in early.
• Automatic migration of core packages in main plugins.
• Relevant job ready skill.
• If you are an Angular developer, it will make your life even better.