You started creating a frontend application for your company, then another, and another and eventually you end up with a dozen frontend applications with a ton of replicated code. Tooling code, linting, tests, helper libraries and domain specific code.

You probably seen this happen before. Is not effective and is prone to errors. The solution, co-locate all code and dependencies on a single repository, in other words create a monorepo.

I will not try to explain what a monorepo is or why do you need one. As usual on all my post I just to help you build one for your NextJS applications. You probably already decided a monorepo is the solution for you.

What do I need from a monorepo?

There are certain minimal requirements any frontend monorepo should support. The ones I care the most are:

• Contain Applications and Libraries: Usually inside a monorepo you use the term package to identify specific units of code, it could be an App or a shared module. On our monorepo they will live under /packages/app/* and /packages/shared/* each.
• Bootstrap a new Application or Shared Module with a CLI command.
• Run ALL Tests in the monorepo with a single command. Alternatively we would want to run only the tests on an App or Shared Module.
• Storybook is almost a requirement to build frontend applications (or similar tool). We also need to open a Storybook with ALL the stories on the monorepo. Alternatively, again, we would want to open it with only the stories from a single Application or Shared Module.
• Shared tooling config. ESLint, Prettier, TypeScript, no need to be repeating ourselves in every package.
• Each Application should have its own build scripts. Along with scripts to run the Application in isolation and also as composition. Composition means, we can have apps targeting different paths in a single domain and run them all at the same time (Ex: /customer-dashboard/... represents an Customer dashboard app and /back-office/... is the administrative Application internal employees use)

You can have other requirements in addition to this. After this post you can dedicate more time to them.

#monorepo #typescript #react #next #web-development