https://github.com/mahdita97/turborepo-boilerplate

A boilerplate base on TURBOREPO
https://github.com/mahdita97/turborepo-boilerplate

boilerplate eslint headlessui lerna monorepo monorepo-boilerplate monorepo-example monorepository nextjs react reactjs tailwind tailwindcss turborepo typescript

Last synced: 5 days ago
JSON representation

A boilerplate base on TURBOREPO

• Host: GitHub
• URL: https://github.com/mahdita97/turborepo-boilerplate
• Owner: MahdiTa97
• Created: 2021-12-19T13:53:15.000Z (about 3 years ago)
• Default Branch: main
• Last Pushed: 2024-11-20T21:41:06.000Z (about 1 month ago)
• Last Synced: 2024-12-08T18:10:56.066Z (14 days ago)
• Topics: boilerplate, eslint, headlessui, lerna, monorepo, monorepo-boilerplate, monorepo-example, monorepository, nextjs, react, reactjs, tailwind, tailwindcss, turborepo, typescript
• Language: TypeScript
• Homepage: https://mahdita97.github.io/turborepo-boilerplate/
• Size: 1.61 MB
• Stars: 95
• Watchers: 4
• Forks: 12
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# Monorepo Turborepo starter/boilerplate

This is a monorepo boilerplate powered by [Turborepo](https://turborepo.org/).

You can also implement Monorepo with [NX](https://nx.dev/). It's boilerplate is [HERE](https://github.com/MahdiTa97/nx-next-react-boilerplate)!

## Using this example

Run the following command:

```sh

npx create-turbo@latest -e with-tailwind

```

## What's inside?

This Turborepo includes the following packages and apps:

### Apps and Packages

- `web`: another [Next.js](https://nextjs.org/) app with [Tailwind CSS](https://tailwindcss.com/)

- `ui`: a stub React component library with [Tailwind CSS](https://tailwindcss.com/), [daiysiui](https://daisyui.com/) and [daiysiui-react](https://github.com/daisyui/react-daisyui) shared by both `web` applications

- `@repo/eslint-config`: `eslint` configurations (includes `eslint-config-next` and `eslint-config-prettier`)

- `@repo/typescript-config`: `tsconfig.json`s used throughout the monorepo

Each package/app is 100% [TypeScript](https://www.typescriptlang.org/).

### 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:

- Make sharing one `tailwind.config.js` to apps and packages as easy as possible.

- Make package compilation simple by only depending on the Next.js Compiler and `tailwindcss`.

- Ensure Tailwind classes do not overwrite each other. The `ui` package uses a `ui-` prefix for it's classes.

- Maintain clear package export boundaries.

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](packages/tailwind-config/tailwind.config.js):

```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:

- [Tailwind CSS](https://tailwindcss.com/) for styles

- [daiysiui](https://daisyui.com/) for styles

- [daiysiui-react](https://github.com/daisyui/react-daisyui) for styles

- [TypeScript](https://www.typescriptlang.org/) for static type checking

- [ESLint](https://eslint.org/) for code linting

- [Prettier](https://prettier.io) for code formatting

## Using this boilerplate

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

```sh

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:

- Rename folders in `packages/*` to replace `repo` with your desired scope

- Search and replace `repo` with your desired scope

- Re-run `yarn install`