Turborepo Starter
Opinionated Turborepo template repository, based on the official Yarn (Berry) starter turborepo, created with testing, design systems, DDD and reactive programming in mind.
Main tools, frameworks and libraries: Turbo, Yarn, TypeScript, ReactJS, NextJS, ESLint, Prettier, Husky, Jest, Storybook, Styled Components, tsup.
Software Patterns and Principles
The project is a monorepo that comes with a series of examples that follow these software design patterns:
- Reactive programming / Reactive UI using the observer pattern, which allows us to decouple the business logic and the state from the framework and UI components. Easier to test and more scalable.
- Atomic Design
- Domain-Driven Design (DDD) rather than framework-oriented separation of concerns.
- Clean/Onion architecture. The main applications have a series of layers separating Business Logic (Domain and Use Cases), Entry Points (aka. presentation layer), Infrastructure (providers, interface implementations, vendor extensions, etc.) and Configuration (which wraps everything together).
This project does not feature Micro Frontends / Module Federation, but it can be easily implemented.
What's inside?
This turborepo uses Yarn as a package manager. It includes the following packages/apps:
Apps and Packages
apps/web
: a Next.js v13 appapps/cli
: a NodeJS CLI app, written in TypeScript, with Chalk and Commanderapps/storybook
: a StoryBook design system app (v7 alpha), powered by Vite 3packages/ui
: a stub React v18 component library shared by bothweb
andstorybook
applications, powered bystyled-components
andtsup
(aesbundle
based compiler).packages/counter
: Similar to theui
package, but showcases a stateful "counter" component and a minimalistic approach to reactive UIs combined with DDD.packages/config
: Shared configurations, including:eslint
configurations (includeseslint-config-next
,eslint-config-turbo
andeslint-config-prettier
)tsconfig
TS config JSONs used throughout the monorepo
Except for some config files, each package or app is 100% TypeScript.
Utilities
This turborepo has some additional tools already setup for you:
- TypeScript for static type checking
- ESLint for code linting
- Prettier for code formatting
- Jest for testing
Build
To build all apps and packages, run the following command:
cd my-turborepo
yarn run build
Develop
To develop all apps and packages, run the following command:
cd my-turborepo
yarn run dev
.devcontainer
The .devcontainer
folder offers a local Docker development environment for VS Code with
the Dev Containers extension. The script .devcontainer/run
is a helper to run commands
inside the container.
You can also use make
for simple tasks like: dev
, stop
, install
, open
, and bash
inside the container.
Remote Caching
Turborepo can use a technique known as Remote Caching to share cache artifacts across machines, enabling you to share build caches with your team and CI/CD pipelines.
By default, Turborepo will cache locally. To enable Remote Caching you will need an account with Vercel. If you don't have an account you can create one, then enter the following commands:
cd my-turborepo
yarn dlx turbo login
This will authenticate the Turborepo CLI with your Vercel account.
Next, you can link your Turborepo to your Remote Cache by running the following command from the root of your turborepo:
yarn dlx turbo link
Useful Links
Learn more about the power of Turborepo: