Step-by-Step Monorepo Tutorial: Turbo Repo, Vite, Next, Tailwind, and Storybook

Introduction

In this tutorial, we'll create two React applications using Turbo Repo and a monorepo architecture. We'll utilize Vite and Next.js as our front-end frameworks, and incorporate Tailwind CSS for styling, along with Storybook for documentation. Additionally, we will bundle a UI library with tsup for sharing components across our applications. This setup will streamline development and improve productivity, whether you're a beginner or an experienced developer.

Step 1: Set Up Turbo Repo

1. Open your terminal.
2. Run the following command to create a new Turbo Repo:

   npx create-turbo@latest
   

3. Name your Turbo Repo (e.g., turbo-demo) and choose yarn as the package manager.
4. Once the project is created, navigate into the project directory:

   cd turbo-demo
   

Step 2: Explore the Folder Structure

• The project contains three main directories:
  • apps: Contains all the applications (initially includes Next.js apps).
  • packages: For shared configurations and components.
  • node_modules: Contains all the dependencies for the entire project.
• Open the package.json to check the workspaces configuration.

Step 3: Create UI Library

1. Inside the packages folder, create a new folder for the UI library (e.g., ui).
2. Inside the ui folder, create a package.json with the following structure:

   {
     "name": "@your-scope/ui",
     "version": "0.1.0",
     "main": "index.js"
   }
   

3. Create a button component (e.g., Button.tsx) in the ui folder.

Step 4: Set Up Next.js App

1. In the apps directory, delete the docs folder since we will create our own apps.
2. Create a new Next.js app:

   yarn workspace web create next-app
   

3. Navigate to the web app and install Tailwind CSS:

   cd web
   yarn add -D tailwindcss postcss autoprefixer
   

4. Generate the Tailwind configuration files:

   npx tailwindcss init -p
   

Step 5: Configure Tailwind CSS

1. Update tailwind.config.js with:

   module.exports = {
     content: ['./pages/**/*.{js,ts,jsx,tsx}', './components/**/*.{js,ts,jsx,tsx}'],
     theme: {
       extend: {},
     },
     plugins: [],
   };
   

2. Add Tailwind directives in a global CSS file (e.g., styles/global.css):

   @tailwind base;
   @tailwind components;
   @tailwind utilities;
   

Step 6: Set Up Vite App

1. In the apps directory, create a new Vite app:

   yarn create vite@latest vite-app --template react-ts
   

2. Navigate to the vite-app folder and install Tailwind CSS as before.

Step 7: Configure Storybook

1. In the apps directory, create a new Storybook app:

   npx sb init --type react
   

2. Install the UI library as a dependency in the Storybook app's package.json.

Step 8: Bundle UI Library with tsup

1. Inside the ui folder, install tsup:

   yarn add -D tsup
   

2. Create a tsup.config.ts file in the ui folder with:

   import { defineConfig } from 'tsup';
   
   export default defineConfig({
     entry: ['src/index.ts'],
     format: ['cjs', 'esm'],
     dts: true,
     sourcemap: true,
   });
   

3. Update the ui app's package.json with build scripts:

   "scripts": {
     "build": "tsup",
     "dev": "tsup --watch"
   }
   

Conclusion

In this tutorial, we set up a monorepo using Turbo Repo with two applications built on Next.js and Vite, integrated Tailwind CSS for styling, and created a shared UI library. We also configured Storybook for UI component documentation and bundled our library with tsup. This architecture not only enhances modularity but also improves the efficiency of managing multiple applications. Next steps could involve expanding the UI library or adding more applications to the monorepo.