MahdiTa97 / turborepo-boilerplate

A boilerplate base on TURBOREPO
https://mahdita97.github.io/turborepo-boilerplate/
94 stars 12 forks source link
boilerplate eslint headlessui lerna monorepo monorepo-boilerplate monorepo-example monorepository nextjs react reactjs tailwind tailwindcss turborepo typescript

Monorepo Turborepo starter/boilerplate

This is a monorepo boilerplate powered by Turborepo.

You can also implement Monorepo with NX. It's boilerplate is HERE!

Using this example

Run the following command:

npx create-turbo@latest -e with-tailwind

What's inside?

This Turborepo includes the following packages and apps:

Apps and Packages

Each package/app is 100% TypeScript.

Building packages/ui

This example is set up to produce compiled styles for ui components into the dist directory. The component .tsx files are consumed by the Next.js apps directly using transpilePackages in next.config.js. This was chosen for several reasons:

Another option is to consume packages/ui directly from source without building. If using this option, you will need to update the tailwind.config.js in your apps to be aware of your package locations, so it can find all usages of the tailwindcss class names for CSS compilation.

For example, in tailwind.config.js:

  content: [
    // app content
    `src/**/*.{js,ts,jsx,tsx}`,
    // include packages if not transpiling
    "../../packages/ui/*.{js,ts,jsx,tsx}",
  ],

If you choose this strategy, you can remove the tailwindcss and autoprefixer dependencies from the ui package.

Utilities

This Turborepo has some additional tools already setup for you:

Using this boilerplate

If you want to use this in the interim, you run the following command:

git clone https://github.com/MahdiTa97/turborepo-boilerplate
cd turborepo-boilerplate
yarn install

Changing the NPM organization scope

The NPM organization scope for this design system starter is @repo. To change this, it's a bit manual at the moment, but you'll need to do the following: