React TypeScript Yarn Lerna Monorepo Boilerplate

The React TypeScript Yarn Lerna Monorepo Boilerplate is a free, GitHub-hosted starter that combines Create React App, TypeScript, Yarn Workspaces, and Lerna into a three-package monorepo with ESLint, Prettier, and react-testing-library preconfigured.

What is the React TypeScript Yarn Lerna Monorepo Boilerplate?

This boilerplate scaffolds a monorepo consisting of three TypeScript packages: www (a Create React App application), shared (reusable React components), and utils (shared TypeScript functions). It is initialized with react-scripts v3.4.0 and React v16.8.0+, tested up to 16.13.1, and requires Node.js v10.15+. The project is maintained by michielbouw on GitHub and uses Yarn as its package manager with Lerna for managing multi-package releases.

Key Features

• Multi-package monorepo — Yarn Workspaces and Lerna manage three packages (www, shared, utils), enabling code sharing between a React app and utility libraries in a single repository.
• Create React App with TypeScript — Uses react-scripts v3.4.0 with TypeScript, providing hot reloading, lint-on-edit feedback, and production builds with hashed filenames.
• ESLint and Prettier — Comes with a full ESLint configuration that replaces the deprecated TSLint, plus Prettier for consistent formatting; yarn lint and yarn lint:fix scripts are included.
• react-testing-library — Testing is preconfigured with react-testing-library instead of Enzyme, and yarn test runs the test runner in watch mode.
• SASS/SCSS styling — The Create React App setup includes SASS/SCSS support out of the box for component-level styling.
• Development scripts — yarn start runs the app at localhost:3000 with reload on edits, while yarn typecheck checks TypeScript compilation errors.
• Production build script — yarn build outputs a minified, optimized production bundle with cacheable hashes, ready for deployment.
• Easy package expansion — Adding a package requires copying .eslint.json, package.json, and tsconfig.json from an existing package, then running yarn clean:update to reinitialize workspaces.

Who is it for?

• TypeScript-focused front-end teams — they get a monorepo with a shared component library and utility functions already wired up, so they can start building features immediately.
• React component library authors — they can develop components in the shared package and simultaneously test them inside the www app without extra tooling.
• Developers migrating off TSLint — the setup uses ESLint and Prettier from the start, avoiding the deprecated TSLint migration path.
• Teams adopting Lerna and Yarn Workspaces — they can use this repository as a worked example of clean multi-package configuration, including scripts and workspace commands.

What can you do with it?

• Front-end teams: scaffold a new product with a React web app (www), a shared component package (shared), and a utilities package (utils) in one repository, with linting and testing already configured.
• Open-source maintainers: publish versioned packages using Lerna while keeping a runnable demo application in the same repo.
• Engineering leads: standardize coding conventions across packages by relying on the included ESLint and Prettier rules, and enforce them in CI via yarn lint and yarn typecheck.

How does it work?

After cloning the repository, run yarn install to set up the workspaces. To add a new package, create a folder under the packages directory and copy the ESLint, package.json, and tsconfig files from an existing package, then run yarn clean:update. The www package is started with yarn start, which serves the app at http://localhost:3000 with live reload.

FAQ

Is this boilerplate free?

Yes, the repository is publicly available on GitHub under no stated license or pricing; you can clone or download it and use it as a starting point for your own projects.

What Node.js version do I need?

Node.js v10.15+ is required, based on the setup instructions. You can install it from nodejs.org or use Node Version Manager (nvm).

Which testing library does it use?

It uses react-testing-library rather than Enzyme. The test runner is invoked with yarn test and runs in interactive watch mode.

How do I add a new package to the monorepo?

Create a new folder under the packages directory, copy .eslint.json, package.json, and tsconfig.json from an existing package, then run yarn clean:update to clean and reinitialize the workspaces.

What is the difference between the packages?

www is the Create React App TypeScript application, shared holds reusable React components, and utils contains shared TypeScript functions that can be imported across packages.