Things I learned while building projects with NX
Tags: productivity, javascript, webdev, typescript
Published: 2024-03-18 03:28:25

Lately, I have fallen in love with these monorepo tools, especially the Nx library ❤️. Initially, I just used `vite` or `next` for building applications, but for the past 2 years, I have been using these for my projects, and it's amazing. Now I can't even imagine my projects without them. For building a website or a dashboard, you are good without these tools. But as soon as your scope of work expands beyond that, you should start using these tools.

Many of you might not have heard about the concept of Monorepos, or many of you might know about it but don't understand its benefits and issues of using something like this.

Some of the monorepo tools out there are -

- [Nx](https://nx.dev/)
- [Lerna](https://lerna.js.org/) currently maintained by Nx team
- [Turbo Repo](https://turbo.build/) by Vercel
- [Bazel](https://bazel.build/) by Google
- [Buck 2](https://buck2.build/) by Facebook

You can also use workspaces but these are specialized tools to help you with your day-to-day tasks. Right now Nx and Turbo repo are the most popular monorepo tools (according to me).

So first of all, let's talk about why you even need this tooling.

So the majority of you might not need this, you should be more than fine with your `create-next-app` or `vite` commands to get a starter template and build on top of it. But when we are talking about applications like ERPs, CRMs, or any application that may have more than one portal and multiple small helper packages, that's when you need a monorepo.

Building large-scale applications is easy but maintaining them and adding new features from time to time, can be quite hectic if you haven't used the correct tools from the start. You need tools for -

- Building
- Testing
- Deploying

And all of this can easily be done with a monorepo tool. And they provide even more functionality out of the box. The list of features includes -

- Running Concurrent Builds - Multiple packages or apps can be built concurrently.
- Task Dependencies - It creates a dependency graph through which it can identify package interdependencies. Helping it to place the tasks in order so that nothing breaks while still being concurrent.
- Caching - Once a package is built, you don't need to build it again if there are no changes. These tools can also store this on the cloud, calling it _Remote Caching_, resulting in faster CI.

Resulting in a great DX ❤️

When building an app, you tend to build it again and again. Being stuck for like 5 minutes every time you are building it, ah the worst feeling 😵‍💫. Even if you are using rust-based compilers, these builds tend to increase in size as you add more and more features. Nextjs alone can take up to 2 minutes to build a single app. And imagine these things happening in sync.

I guess now you are also starting to understand why these tools are important. And the best part is these features that I just told you about are just the beginning, they provide a ton of more features.

Nx provides out-of-the-box tooling for setting up your Apps and Libraries in React, Nextjs, Vue, Angular, Express, and many more. You can check out the list here - [Nx Api](https://nx.dev/nx-api)

They also have internal tooling to move, rename, lint, build, and test all your packages. You can add custom commands too if you want, but for the majority part, Nx does have all the tooling.

And If you are a good developer you must have already seen it coming that, if the library is doing most of the work it will be harder to extend the behavior when needed. Honestly, I also thought that, and sometimes it does look like that, but every time it was because of a config issue by one of the build tools.

Because Nx is not in the driver's seat, you are. It is just providing you with the utilities to do your day-to-day operations. Cause at the end of the day, it is just a folder manager 😂

There were times when Nx had some problems in their internal tooling but their team is quite fast and efficient in helping you out and resolve these errors.

By now you must be thinking, I am being biased for Nx and not giving attention to Turbo Repo. And yes, it is true. Compared to Nx, Turbo is quite new in the market and they are still working on their tooling. Nx has a more mature base and a thriving community. Then too, I initially started with Turbo Repo only, but because of the lack of tooling and helper functions it was quite hard to navigate. Because of the building helpers in Nx, it is much easier to get started. Because there will be a huge learning curve ahead of you when you are starting to work with either of them. Having things to get you started, can make it much easier.

Even with these tools, there will be quite a lot to learn, about the configs and packages to build a library. I have explained this in more detail in this article, [Things I learned while building my JS library](https://dev.to/mathuraditya7/things-i-learned-while-building-my-js-library-2k06)

Hope this provides you with some good insight into, why these tools are needed and what benefits you will get from using tools like this. Do give it a shot and let me know what do you think about it. Which one did you like, Nx or Turbo?

## Conclusion

I learned a lot. Tools like `create-next-app` and `vite` take away all the heavy lifting stuff and give us an abstract layer to work upon, but these are great till you have a single project to build or not many dependencies are there. As things start to grow the need for tools like this increases.

If you want to check out my lib from which I got all my learnings, here are the links -

### @rafty/ui
GitHub - [github.com/rhinobase/raftyui](https://github.com/rhinobase/raftyui)
Docs - [rafty.rhinobase.io](https://rafty.rhinobase.io)

### @fibr/react (Under Development)
GitHub - [github.com/rhinobase/fibr](https://github.com/rhinobase/fibr)
Docs - [fibr.rhinobase.io](https://fibr.rhinobase.io)

Do let me know what you think about it and how we can boost the community in the future. Do show us your support by giving us a star and for more content like this in the future.