Meet create‑devhub: Scaffold Full‑Stack Monorepos in Seconds

From Hours to Seconds: Building the Ultimate Monorepo CLI

Have you ever spent an entire afternoon trying to set up a monorepo with Turborepo, only to get stuck on package.json configurations, Tailwind CSS sharing, or TypeScript path mappings? I did too. After the third time repeating this dance, I thought: “There has to be a better way.”

So I built one.

The Problem: Monorepo Setup Is Painful

Setting up a modern monorepo isn’t just running create-turbo. You need to address:

• Turborepo configuration that actually works
• Shared Tailwind CSS across all apps
• Multiple package manager support (npm, yarn, pnpm, bun)
• TypeScript configurations that play nice together
• API servers (Express/Fastify) with proper ports
• WebSocket servers for real‑time features
• Documentation sites that look professional
• Shared component libraries ready to use

Doing this manually? 2–4 hours minimum.

The Solution: create‑devhub

I created a CLI that does all of this in under 30 seconds:

npx create-devhub

That’s it. You get a production‑ready monorepo with everything configured.

What You Get

my-project/
├── apps/
│   ├── web/                 # Next.js or Vite + React
│   ├── docs/                # Documentation site (optional)
│   ├── http-server/         # Express/Fastify API (optional)
│   └── ws-server/           # WebSocket server (optional)
├── packages/
│   ├── ui/                  # Shared UI components
│   ├── tailwind-config/     # Shared Tailwind configuration
│   ├── eslint-config/       # Shared ESLint config
│   └── typescript-config/   # Shared TypeScript config
├── package.json             # Workspace configuration
└── turbo.json               # Optimized build caching

Everything actually works together:

✅ Shared Tailwind classes across all apps

✅ UI components import seamlessly

✅ TypeScript paths resolve correctly

✅ Build caching is optimized

✅ Ports are preconfigured to avoid conflicts

✅ Dependencies aligned with your package manager

Interactive Configuration

The CLI asks exactly what you need:

? Project name: my-awesome-project  
? Choose frontend framework: Next.js  
? Include documentation site? Yes  
? Include HTTP API server? Express  
? Include WebSocket server? Yes  
? Setup Tailwind CSS? Yes  
? Choose package manager: pnpm  
? Initialize git repository? Yes  

Based on your choices, it generates exactly what you want—no bloat, no unused files.

Generated Configuration Examples

Shared Tailwind Configuration

// packages/tailwind-config/tailwind.config.js
module.exports = {
  content: [
    '../../apps/*/src/**/*.{js,ts,jsx,tsx}',
    '../../packages/ui/src/**/*.{js,ts,jsx,tsx}',
  ],
  theme: {
    extend: {
      colors: {
        primary: "hsl(var(--primary))",
        secondary: "hsl(var(--secondary))",
      },
    },
  },
  plugins: [],
}

Ready‑to‑Use UI Component

// packages/ui/src/button.tsx
import * as React from "react";

export interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
  variant?: "default" | "destructive" | "outline" | "secondary" | "ghost" | "link";
  size?: "default" | "sm" | "lg" | "icon";
}

const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
  ({ className, variant = "default", size = "default", ...props }, ref) => {
    // Implementation with Tailwind classes
  }
);

export { Button };

Optimized Turbo Configuration

// turbo.json
{
  "tasks": {
    "build": {
      "outputs": [".next/**", "!.next/cache/**", "dist/**"],
      "dependsOn": ["^build"]
    },
    "dev": {
      "cache": false,
      "persistent": true
    }
  }
}

Development Experience

After generation, your workflow is:

# Start everything in development
npm run dev

Yes, just a single line.

This will launch:

• Web app at http://localhost:3000
• Docs at http://localhost:3002
• API at http://localhost:8000
• WebSocket server at ws://localhost:8080

---

Technical Challenges Solved

1. Package Manager Compatibility
   
   Uses correct workspace syntax for npm, pnpm, and yarn.

2. Tailwind CSS Sharing
   
   Shared configuration package with proper content paths and theming.

3. TypeScript Path Resolution
   
   Workspace‑aware path mapping and build tool compatibility.

4. Build Optimization
   
   Correct outputs and dependency graphs for optimal caching.

Lessons Learned

1. Developer experience must be obvious and fast.
2. Templates need to be living code—tested across all frameworks and package managers.
3. Clear error messages save hours of debugging.

What’s Next?

• Docker configurations for easy deployment
• One‑click Vercel/Netlify setup
• Testing setups (Jest, Playwright)
• React Native support
• Additional UI libraries (Chakra UI, Mantine)

Try It Yourself

npx create-devhub

It takes under a minute to generate a production‑ready monorepo.

---

Links:

• NPM Package: https://www.npmjs.com/package/create-devhub
• GitHub Repo: https://github.com/Saumya-Aggarwal/create-devhub
• Report Issues: https://github.com/Saumya-Aggarwal/create-devhub/issues

What’s your biggest pain point with monorepo setup? Let me know in the comments!