How to setup a monorepo with NX and Next.JS and Adonis.JS using PNPM workspaces

Initialize a new PNPM workspace

First, we need to install PNPM & NX globally:

npm install -g pnpm nx

Then, we can initialize a new PNPM workspace:

mkdir my-workspace && cd my-workspace
pnpm init

Then, we initialize a Git repository and a .gitignore file:

git init
echo -e "node_modules\nbuild\ndist" >> .gitignore

Architecture

We are using bare pnpm environment, we can use NX to generate the apps and the shared libraries as it contains multiple generators for different frameworks and libraries, but unfortunately there is no official generator for Adonis.JS in NX Docs (we can build one in another tutorial). Here, we will have 2 apps and 2 shared libraries:

Apps:

• Next.JS App: This application is built using the Next.js framework, which is widely recognized for developing server-rendered React applications.
• Adonis.JS App: Our second application is developed using the Adonis.js framework, a powerful Node.js web application framework.

Shared Libraries:

• Frontend Shared Library: This library contains reusable components, utilities, and functionalities that are specific to the frontend applications within our monorepo.
• Backend Shared Library: The backend shared library consists of shared code, modules, and utilities utilized by the backend applications in our monorepo.

Setting up the Monorepo structure

When it comes to monorepos, the structure can vary based on the intended use of the repository. Broadly speaking, there are two common types:

• Package-Centric Repositories: These repositories focus on developing and publishing a cohesive set of reusable packages. They are commonly found in the open-source world, exemplified by repositories like Angular, React, Vue, and many others. In this setup, you will typically find a packages folder that contains the individual packages/modules. These packages can then be published to a public registry like NPM, allowing other developers to utilize them in their projects.

• Application-Centric Repositories: These repositories focus on developing and maintaining a set of applications that share common code. They are commonly found in the enterprise world, where a company may have multiple applications that share common code. In this setup, you will typically find an apps folder that contains the individual applications. These applications can then be deployed to production.

And so, we will be using the application-centric repository structure and create 'apps' and 'packages' folders:

mkdir apps packages

The only configuration we need is to tell PNPM to use the 'apps' and 'packages' folders as the root of our monorepo. We can do this by adding the following to our pnpm-workspace.yaml file:

packages:
  - "apps/**"
  - "packages/**"

Adding a Next.JS App

Resources

• Setup a Monorepo with PNPM workspaces and speed it up with Nx!
• NX Generators