Setting up a Full-Stack Monorepo from Scratch

Why a Monorepo?

A monorepo allows you to manage multiple applications and shared packages within a single repository. This drastically simplifies dependency management, code sharing (like UI components or database schemas), and cross-project refactoring. In this tutorial, we will set up a modern monorepo using Turborepo.

Step 1: Initializing Turborepo

First, open your terminal and run the Turborepo generator:

npx create-turbo@latest my-monorepo

When prompted, select the default package manager (we recommend pnpm for its speed and efficient node_modules management).

Step 2: Understanding the Structure

Once initialized, your project will look like this:

• apps/web: A Next.js application.
• apps/docs: Another Next.js application (useful for documentation).
• packages/ui: A shared React component library.
• packages/eslint-config: Shared linting rules.
• packages/typescript-config: Shared TS configurations.

Step 3: Creating a Shared Database Package

Let's add a database package so all our apps can share the same schema.

1. Create a new folder: mkdir -p packages/database/src
2. Initialize a package.json in packages/database:

   {
     "name": "@my-repo/database",
     "version": "1.0.0",
     "main": "./src/index.ts",
     "types": "./src/index.ts",
     "dependencies": {
       "drizzle-orm": "^0.30.0"
     }
   }
   

3. Create your schema in packages/database/src/index.ts.

Step 4: Connecting the Packages

To use your new database package in the web app, open apps/web/package.json and add the dependency:

"dependencies": {
  "@my-repo/database": "workspace:*"
}

Run pnpm install at the root of your project to link the workspace. You can now import your database schema directly into your Next.js application!

Conclusion

You now have a scalable monorepo architecture. You can run pnpm dev at the root, and Turborepo will intelligently build and run your applications and packages in parallel.