Creating Modular Web Applications with Vite, TypeScript, and Turborepo: A Step-by-Step Guide

In modern web development, monorepos have become increasingly popular, allowing teams to maintain multiple interconnected projects within a single repository. When working with Turborepo, a high-performance build system for JavaScript and TypeScript monorepos, developers often seek efficient ways to build and share libraries across different applications. This article provides a comprehensive guide to setting up a TypeScript-based Vite library within a Turborepo environment, suitable for consumption by internal applications.

Overview

This tutorial covers:

• Setting up a new turborepo with multiple packages.
• Creating a reusable Vite library configured for browser output in TypeScript.
• Configuring build tools to generate type declarations and bundle the library.
• Consuming the library in a separate application within the same monorepo.
• Troubleshooting common integration issues.

Prerequisites

• Node.js (version 14 or higher)
• npm or yarn package manager
• Basic familiarity with Vite, TypeScript, and monorepo structures

Step 1: Initialize Your Turborepo Monorepo

Start by creating a new Turborepo template:

bash
npx create-turbo@latest

Choose the default or custom template based on your preference. This sets up a monorepo with a packages directory.

Step 2: Set Up the Library Package

Navigate to the packages directory and create a new package for your library:

bash
cd packages
mkdir the-lib
cd the-lib
npm init -y

Configure your package.json with relevant details:

json
{
"name": "@me/the-lib",
"version": "0.1.0",
"private": true,
"type": "module",
"main": "dist/the-lib.umd.cjs",
"module": "dist/the-lib.js",
"types": "dist/index.d.ts",
"files": ["dist"],
"scripts": {
"build": "tsc && vite build"
},
"devDependencies": {
"typescript": "^5.8.3",
"vite": "^7.0.4",
"unplugin-dts": "^1.0.0-beta.0",
// Additional dependencies as needed
}
}

Step 3: Configure Type