A minimal, fast monorepo template for TypeScript (and React) projects with hot module reloading

Last update: Aug 2, 2022

typescript-monorepo

This is a simple monorepo template with some specific design goals:

  • Latest TypeScript version
  • Fast, incremental dependency updates and builds
  • No package bundler
  • Watch mode works
  • ESM and CJS work (with distinct build outputs)
  • Vanilla TS and React packages work
  • Create React App works (with hot module reloading of the entire workspace)

Prerequisites

  • Node 16+
  • PNPM

If you have Node 16+, you can activate PNPM with Corepack:

corepack enable
corepack prepare [email protected]`npm info pnpm --json | jq -r .version` --activate

Corepack requires a version to enable, so if you don't have jq installed, you can install it, or just manually get the current version of pnpm with npm info pnpm and use it like this:

corepack prepare [email protected] --activate

Setup

git clone https://github.com/jordansexton/typescript-monorepo.git
cd typescript-monorepo
pnpm install

Build

Run this to build all your workspace packages.

pnpm build

This will build workspace packages that use tsc for compilation first, then everything else.

Watch

Run this to build and watch workspace packages that use tsc for compilation.

pnpm watch

Other packages can build and run with their own tools (like CRA's react-scripts commands).

Run (with HMR)

Run this in a separate terminal from the watch command.

cd packages/app/create-react-app
pnpm start

A basic CRA app will now be running. Go change the file packages/core/base/src/utils.ts. This file is used by the file packages/ui/react/src/HelloWorld.tsx, which is used by the CRA app.

Change the string 'Hello, world!' to some other string, and save the file. The CRA app should update automatically, reflecting this deeply nested change.

GitHub

https://github.com/jordansexton/typescript-monorepo
You might also like...

A Minimal Setup & Fast Boilerplate for React.js with Vite.

A Minimal Setup & Fast Boilerplate for React.js with Vite.

A Minimal Setup & Fast Boilerplate for React.js with Vite Features 🚀 Dynamic Pages Routing with react-router-dom from React.js

May 22, 2022

🚀 React & TypeScript Starter for developing web extensions with hot reload

A web extension (Manifest V3) starter kit with hot reload support, built with React, Typescript, Redux, Vite, ESLint, Prettier, TailwindCSS, Jest and more!

Aug 3, 2022

Template for vite, React + tailwindcss + TypeScript projects with some tools preconfigured.

Template for vite, React + tailwindcss + TypeScript projects with some tools preconfigured.

Template for React + Tailwind CSS + TypeScript projects

Aug 5, 2022

Vite-react-template: A starter for React with Typescript with the fast Vite

Vite-react-template: A starter for React with Typescript with the fast Vite

vite-react-template vite + react + router + ts A starter for React with Typescript with the fast Vite directory src assets components layout pages ins

Mar 22, 2022

Yet another minimal React template

min-react Because create-react-app has way too much extra boilerplate Contents src

May 26, 2022

React + Redux + Firebase + Webpack + React Hot Loader 3 + React Router in one boilerplate

Firebase 3.0 Starter using React Redux This is a Firebase 3.0 start using React and Redux. It uses the latest version of libraries, including the bran

Jun 19, 2022

Babel React Koa Hot Universal Boilerplate

Babel React Koa - Hot Universal Boilerplate Breko Hub Breko hub is a github repository that helps anyone create new JavaScript applications. Giving yo

Apr 3, 2022

A monorepo boilerplate for react web and react native. Uses react-native-web to reduce time invested in making the same components for mobile and web

Monorepo template Get Started Run the following command to install all the dependencies in the right location yarn lerna bootstrap yarn workspace @mar

Jan 9, 2022

🚀 A monorepo boilerplate built with Nx, NestJS, React, GraphQL and MongoDB.

🚀 A monorepo boilerplate built with Nx, NestJS, React, GraphQL and MongoDB.

Overview This monorepo is built using Nx, NestJS, GraphQL, MongoDB, ReactJS with other libraries like Formik, MaterialUI. Requirements Node.js npm Nx

Jul 28, 2022
Comments
  • 1. fix mkdir in package.json

    Issue The package does not build as expected using Ubuntu 22.04 - the command shx mkdir -p lib/{cjs,esm} in package.json creates one folder lib/{cjs,esm} rather than two folders as expected (see image). This issue is consistent across npm, pnpm, and yarn.

    mkdir-issue

    Fix Extended the script to specify two unique paths.

    Reviewed by abacus-x at 2022-08-04 14:21
React + Redux starter kit / boilerplate with Babel, hot reloading, testing, linting and a working example app built in
React + Redux starter kit / boilerplate with Babel, hot reloading, testing, linting and a working example app built in

A comprehensive starter kit for rapid application development using React. Why Slingshot? One command to get started - Type npm start to start develop

Aug 1, 2022
A magical boilerplate with hot reloading and awesome error handling™
A magical boilerplate with hot reloading and awesome error handling™

redux-undo-boilerplate a magical boilerplate with hot reloading and awesome error handling™ that uses webpack, redux, react and redux-undo Installatio

May 30, 2022
React + React Router 1.0 + Redux + Webpack & Hot Module Replacement

React scaffolding An opinionated scaffolding with the following technical stack and configuration: React (15.x.x) React Router (2.x) Flux by using Red

Feb 26, 2021
Minimal-one-page-template - Clean and Minimalistic One Page Template Built With React.js
Minimal-one-page-template - Clean and Minimalistic One Page Template Built With React.js

Minimal One Page Clean and Minimalistic One Page Template. Be sure to send your

Mar 7, 2022
A modern minimal Vite + React + TypeScript template with pre-configured ESLint (with Airbnb JS/React rules), Prettier, Testing with Jest and Git hooks with Husky out of the box 📦
A modern minimal Vite + React + TypeScript template with pre-configured ESLint (with Airbnb JS/React rules), Prettier, Testing with Jest and Git hooks with Husky out of the box 📦

A modern minimal Vite + React + TypeScript template with pre-configured ESLint (with Airbnb JS/React rules), Prettier, Testing with Jest and Git hooks with Husky out of the box ??

Aug 9, 2022
StackBlitz template for an Nx monorepo with React
StackBlitz template for an Nx monorepo with React

Stackblitz Nx React This project was generated using Nx. ?? Smart, Extensible Build Framework Adding capabilities to your workspace Nx supports many p

Oct 25, 2021
A fullstack monorepo template to develop ethereum dapps
A fullstack monorepo template to develop ethereum dapps

full-stack dApp starter for solidity smart contract development A monorepo boilerplate code for typesafe full-stack Solidity development based on temp

Jul 28, 2022
Jul 29, 2022
This starter template comes as a monorepo for your next fullstack dApp Development
This starter template comes as a monorepo for your next fullstack dApp Development

This starter template comes as a monorepo for your next fullstack dApp Development. This will be your tools: ?? React + Vite + Typescript ?? Solidity + Hardhat + Typescript

Jul 5, 2022
A Minimal Setup & Fast Boilerplate for React.js with Vite.
A Minimal Setup & Fast Boilerplate for React.js with Vite.

A Minimal Setup & Fast Boilerplate for React.js with Vite Features ?? Dynamic Pages Routing with react-router-dom from React.js ?? Fast development wi

May 22, 2022