Setup monorepo for nestjs(api) & nextjs(fe)

Hi, welcome to my blog, this is Alan!

Today I’m gonna share with you how to set up monorepo for your project using nestjs, nextjs, pnpm, and turborepo. Monorepo is much easier for code sharing between api and frontend, also centralize the codebase management.

Let’s get started!

Use pnpm to init your project

1pnpm init

Add pnpm workspace config

Press enter or click to view image in full size

Use nestjs command to create api

1npx create-next-app@latest web
2nest new api

Press enter or click to view image in full size

Remove all node_module in web (because it didn’t use pnpm) and run pnpm install again to reinstall and let pnpm optimize packages for us.

Check if api can start

1npm run start:dev

Press enter or click to view image in full size

Check if web can start

Press enter or click to view image in full size

Great!

Now, we will use turporepo to make our life easier. Instead of going into each package one by one to start command, or more advanced, your package A will depend on package B starting successfully first, turpo repo will help us solve that problem.

Install and init turporepo:

1// At root dir
2pnpm install turbo -w -D

Create turbo.json and add the content as below:

1{
2  "$schema": "https://turbo.build/schema.json",
3  "tasks": {
4    "dev": {
5      "persistent": true,
6      "cache": false
7    }
8  }
9}

Press enter or click to view image in full size

Finally, add dev command and packageManager to the root package.json, and change dev command of api:

Press enter or click to view image in full size

root package.json

You should update pnpm version you are using, mine is 9.15.0

Press enter or click to view image in full size

api package.json

Try “npm run dev” at root dir and see how it works!

Press enter or click to view image in full size

You may get an error as above, because api and web are using the same port, turbo starts them in parallel, so it causes the issue.

Change port of your api to solve this issue.

Press enter or click to view image in full size

Let’s try again!

Press enter or click to view image in full size

We have only simple dev configuration for turbo so far. I will leave the build configuration for you work on, then you will better understand the turpo tool.

Example source code: https://github.com/alanng2050/blog-demo-monorepo

Good luck with your next project!

Thanks for reading!