• Stars
    star
    265
  • Rank 149,534 (Top 4 %)
  • Language
    TypeScript
  • Created over 2 years ago
  • Updated about 1 year ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

A "fast" TypeScript-based Node.js monorepo setup powered by esbuild & turborepo

🍊 Tangerine monorepo

A "fast" TypeScript-based Node.js monorepo setup powered by esbuild & turborepo.
Feel free to use it as a template/boilerplate for your own monorepos.

See Speed up your TypeScript monorepo with esbuild for more info.

Feb 3rd 2022 update: Tangerine monorepo now uses Turborepo for an even faster developer experience πŸ”₯

Features

This monorepo is a boilerplate for TypeScript-based Node.js projects, powered by esbuild & turborepo.

  • Uses TypeScript to write code, tests, and scripts.
  • Uses esbuild to compile your TypeScript codebase, tests, and scripts.
  • Uses Turborepo as a build system to run scripts from the package root.
  • Uses tsc CLI to type-check the codebase without emitting the compiled files (since they're handled by esbuild). No need to keep TypeScript's Project References up-to-date.
  • Uses esbuild-runner to run scripts on the fly.
  • Uses Yarn workspaces to make it easy to work within the monorepo.
  • Uses a shareable ESLint config and Jest config to provide an extensible linting and testing setup.
  • Uses esbuild + nodemon to reload the server in development mode (even when workspace dependencies are changed).

Workspaces structure

Tangerine monorepo includes five workspaces:

  • packages/is-even: The simplest workspace β€” it doesn't depend on any other worskpace. It's a Node.js module that exposes an isEven function that tells if the input number is even. It includes a CLI script that invokes the function from your terminal, and a test file, both written in TypeScript. The CLI script runs using esbuild-runner, which uses esbuild to compile it on the fly.
  • package/is-odd: Depends on packages/is-even. It's a Node.js module that exposes an isOdd function that tells if the input number is odd (by invoking isEven and checking if it's false). It includes a CLI script and a test file.
  • package/server: Depends on both packages/is-odd and packages/is-even. It's a Node.js Express server that exposes two routes that invoke isEven and isOdd. It uses nodemon to reload the server in development mode.
  • packages/jest-config: Shared Jest config that uses esbuild to compile your tests and your codebase.
  • packages/eslint-config: Shared ESLint config.

All the workspaces use esbuild to compile the TypeScript codebase. Be it for building, testing, or running CLI scripts, the compilation is instantaneous compared to the native TypeScript compiler (you can quickly test the difference by temporarily swapping esbuild with tsc).

The tsc CLI is used only to type-check the codebase (without emitting the compiled files β€” since they're handled by esbuild). I expect people usually use the IDE integration to type-check the code anyway and explicitly invoke the tsc CLI only in specific use cases (such as pre-commit hooks).

Each workspace's package.json is pointing the main and types entry to src/index.ts. Which might look strange at first, given that it's uncompiled code... see "You might not need TypeScript project references" on the Turborepo blog for an explanation. This pattern has been working fine for my use cases so far (especially while using esbuild). Still, you might want to update these entries to suit your needs (e.g., when shipping packages to npm).

.
└── <project-root>/
    └── packages/
        β”œβ”€β”€ eslint-config/ # eslint-config shared across the workspaces
        β”œβ”€β”€ is-even/ # simple Node.js module example (with no dependencies)
        β”œβ”€β”€ is-odd/ # simple Node.js module example (depends on is-even)
        β”œβ”€β”€ jest-config/ # jest-config shared across the workspaces
        └── server/ # simple Node.js server example (depends on is-even and is-odd)

FAQs

Why are you using Yarn Classic instead of Yarn 2+?

Mainly because every time I use Yarn 2+ I encounter tiny issues requiring additional fixes or setup (e.g., Editor SDKs).
If you prefer Yarn 2+, switching to it is as easy as running yarn set version berry πŸ‘.

Why esbuild? Why not swc?

I love swc, but I feel esbuild is still more "mature". I've also noticed that in some cases swc doesn't respect TypeScript's compilerOptions's paths.

Why Turborepo?

Turborepo is specifically built to support monorepos such as this one.
To me, the major benefits of Turborepo are an fast developer experience (mostly because of caching) and its configurability.

Why are you pointing the package.json's main and types entry to uncompiled code?

See "You might not need TypeScript project references" on the Turborepo blog. This pattern has been working fine for my use cases so far (especially while using esbuild). Still, you might want to update these entries to suit your needs.

More Repositories

1

react-native-modal-datetime-picker

A React-Native datetime-picker for Android and iOS
JavaScript
2,809
star
2

react-native-universal-monorepo

React Native boilerplate supporting multiple platforms: Android, iOS, macOS, Windows, web, browser extensions, Electron.
JavaScript
1,619
star
3

react-native-dialog

Pure JavaScript React-Native dialog
TypeScript
634
star
4

breathly-app

A tiny breath training app built with React-Native
TypeScript
477
star
5

ordinary-puzzles-app

Mobile and web puzzle game built with React-Native
TypeScript
469
star
6

react-native-login-animation-example

A React-Native login animation example
JavaScript
350
star
7

tap-the-number

A simple React-Native game for iOS
JavaScript
157
star
8

react-native-monorepo-tools

Tools and utils to support a React Native monorepo built with Yarn Workspaces
JavaScript
115
star
9

top-github

Android app for browsing GitHub top repositories
Java
95
star
10

firebase-recyclerview

Generic Firebase recyclerview list for Android
Java
91
star
11

react-native-beacons-android

A React-Native library for detecting beacons on Android
Java
73
star
12

the-starter-app

An in-depth tutorial about building mobile apps using React-Native
TypeScript
67
star
13

eslint-plugin-react-app

ESLint configuration used by Create React App
JavaScript
51
star
14

react-native-radio-button

Just a simple radio button
JavaScript
48
star
15

just-tap

A first test drive of hooks, redux and redux-saga in React-Native!
TypeScript
39
star
16

easy-bookmarks

Bookmarks saving and sharing app for Android (with Firebase)
Java
38
star
17

create-react-app-electron-boilerplate

JavaScript
34
star
18

alfred-jira-search

An Alfred workflow to search for Jira tickets
Shell
26
star
19

jira-express

Browser extension to quickly access your Jira tickets.
TypeScript
21
star
20

react-native-starter

React-Native/Redux/Parse
JavaScript
20
star
21

url-metadata-scraper

Tiny Vercel serverless function to scrape metadata from a URL
JavaScript
15
star
22

serverino

Tiny CLI-based static server
JavaScript
13
star
23

trees-and-tents-sample

React-Native implementation of the Trees and Tents puzzle game
JavaScript
13
star
24

build-it-bigger

Udacity Android Nanodegree: Project 4
Java
12
star
25

pinboard-api-proxy

Tiny proxy server to allow all origins to fetch the Pinboard API
JavaScript
11
star
26

reason-react-material-ui-demo

A simple form built with Reason React and Material UI
Reason
8
star
27

react-native-trello-login

Use Trello's API token-based authentication in React-Native
JavaScript
8
star
28

img-resizable

Resizable polymer <img>
HTML
6
star
29

which-one

A small React + Typescript + MobX game
TypeScript
6
star
30

some-react-native-components

components components components components components components components
4
star
31

visual-ui-testing-example

Using Playwright and GitHub action to automate visual UI testing
TypeScript
4
star
32

bookmarkpack-server

NodeJS/Express/Mongoose REST API server
JavaScript
3
star
33

multi-pacman

A multiplayer pacman for Android (Libgdx + Google Play Games Services)
Java
3
star
34

bookmarkpack-client-angular

JavaScript
2
star
35

touch-delay

Fixing the small (~100ms) touch delay on mobile
JavaScript
2
star
36

breathly-website

Breathly app landing page
HTML
2
star
37

polymer-scroll-threshold

aka core-scroll-threshold for polymer 1.0
HTML
2
star
38

miniexec

Minimalist approach to running shell commands in Deno
TypeScript
1
star
39

spotify-streamer-stage-2

Udacity Android Nanodegree: Project 2
Java
1
star
40

dotfiles

Simple dotfiles
Shell
1
star
41

react-toolbox-postcss-boilerplate

A minimal boilerplate for react-toolbox + postcss
JavaScript
1
star
42

quick-reminders-cli

Tiny Deno CLI to create new reminders in the Apple's Reminders app using a natural language parser
TypeScript
1
star