This is an official starter Turborepo.
This Turborepo includes the following packages/apps:
cms
: a Strapi CMSweb
: another Next.js app with Tailwind CSSui
: a stub React component library with Tailwind CSS shared by bothweb
andcms
applicationseslint-config-custom
:eslint
configurations (includeseslint-config-next
andeslint-config-prettier
)tsconfig
:tsconfig.json
s used throughout the monorepo
Each package/app is 100% TypeScript.
This example is setup to build packages/ui
and output the transpiled source and compiled styles to dist/
. This was chosen to make sharing one tailwind.config.js
as easy as possible, and to ensure only the CSS that is used by the current application and its dependencies is generated.
Another option is to consume packages/ui
directly from source without building. If using this option, you will need to update your tailwind.config.js
to be aware of your package locations, so it can find all usages of the tailwindcss
class names.
For example, in tailwind.config.js:
content: [
// app content
`src/**/*.{js,ts,jsx,tsx}`,
// include packages if not transpiling
"../../packages/**/*.{js,ts,jsx,tsx}",
],
This Turborepo has some additional tools already setup for you:
- Turborepos monorepos
- Strapi CMS for management contents
- React Query for state management sever data
- Tailwind CSS for styles
- TypeScript for static type checking
- ESLint for code linting
- Prettier for code formatting
- [Husky] Git hooks with Husky and lint-staged
- Conventional Commits Commit messages must meet conventional commits format.
- GrowthBook for management feature
- Storybook system UI
Monorepo features and conventions:
- Monorepo is being quite highly opinionated in order to achieve best developer experience. It's meant to be used as frontend only monorepo, 100% TypeScript, Tailwindcss UI support (UI component library, shared theme across all apps and packages etc.), consistent codebase across whole monorepo with automated tooling in place as ESLint, Prettier, TypeScript, conventional commits etc.
- Workspaces:
- It comes with two workspaces
apps
andpackages
. - All configurations (eslint, jest, Tailwind ui etc.) in
packages
are always prefixed with "config-" and imported into other workspaces directly from source without building (never transpiled). - All other
packages
beside configurations are always being built/transpiled and output todist/
folder.
- It comes with two workspaces
- All applications in monorepo are built with ReactJS.
- Monorepo doesn't include any implementation of micro-frontend architecture, but is prepared with that in mind, so it can be easily extended (adding shared state, page composition etc.)