react18-tools/turborepo-template

Template for creating React 18 / Next.js 14 libraries

Turborepo template

Featured packages built with this template.

We are happy to announce that we have launched a new course to help you understand this template better Craft Next Gen UI Libraries for React 18 and Next.js 14

Features

This template offers following pre-configured features. Additionally, your repo will automatically be rebranded with help of workflow and post install scripts.

✅ Monorepo powered by turbo repo to build, test and deploy your library

✅ Next.js, Vite and Remix examples to demonstrate how your library can be used (Feel free to remove Remix as it is still unstable when it comes to monorepo setup and importing from folders)

✅ Examples pre-configured to use Light/Dark theme according to user preference

✅ The examples provided are ready to be deployed to Vercel

✅ Typedoc setup to automatically create documentation for your library based on tsdoc comments

✅ Code of Conduct and contributing files that you can always update

✅ Prettier and linter configured as per the modern best practices (Feel free to add your flavour)

✅ Recommended VSCode extensions - Prettier and Kanban board to auto-format your code and manage your project priorities right within your IDE

✅ Powerful code generators - try yarn turbo gen

✅ Test setup with Vitest - A modern and fast testing framework supporting Jest like APIs

✅ Workflows to automate running tests on every pull-request or code push events

✅ Workflow to automatically publish and create a GitHub release when you update your librari's package.json file.

✅ Workflow to automatically rebrand entire template based on the name of the repo you create from this template. (As soon as you create a repo from this template, setup workflow is triggered which renames @mayank1513/fork-me to your repo name and does lots of other fixes to set you up and running.)

✅ With all these features, this readme file contains a quick checklist for you to configure Codecov and other badges, setup your docs website on GitHub pages, etc. See Checklist.

Create a library that is

✅ Fully Treeshakable (import from @mayank1513/fork-me/client/component)

✅ Full TypeScript Support

✅ Unleash the full power of React18 Server components

✅ Works with all build systems/tools/frameworks for React18

✅ Doccumented with Typedoc (Docs)

Introduction

This template is based on the official starter Turborepo but with additional features tailored for creating and publishing JavaScript/TypeScript and specifically React18 libraries.

Getting started:

Click on the "Use this template" button to customize it for your next JavaScript/TypeScript/React/Vue/Next.js library or project.

What's Different?

Compared to the default scaffold from create-turbo, this template offers:

• Unit tests with vitest
• Build setup with tsup and esbuild-react18-useclient Supports React Server components out of the box
• Automatic file generation
  • just run yarn turbo gen and follow the prompts to auto generate your new component with test file and dependency linking
  • follow best practices automatically
• GitHub actions/workflows to auto publish your package when version changes
• GitHub action/workflow + preinstall scripts to automatically rebrand your repo on creation

Step by Step Instructions and Checklist

• Star this repo so that you and others can find it more easily for your next projects. It also helps me understand that people are using this repo so that I can maintain the repo and the documentation well.
• Craete new GitHub repository using this template.
  • Click Use this template button on top right -> Create a new repository
  • Set your library name as repository name (This template has automation workflows to customize your repo assuming repo name as library name.)
  • Click Create repository and wait for the setup workflow to finish rebranding your repo.
• Install and setup Node.js and IDE (I prefer VSCode)
• Install the recommended VSCode extensions - Prettier, Trello Kanban
• Install dependencies using pnpm
  • If you don't have pnpm installed, run npm i -g pnpm to install pnpm -> run pnpm setup to set up pnpm for global installations
  • Run pnpm i to install dependencies and preinstall script will automatically touch up workflows and create a commit
  • Run pnpm i -g turbo to install turbo globally (Sometime due to TypeScript and Plop version conflicts code generation requires global turbo).
  • Run turbo gen react-component, and follow prompts to generate server or client components for your library
    • Use snake-case for your component name - it will be automatically converted to PascalCase
    • Your component and test files will be created in **/src/client/ or **/src/server/ directory depending on whether you choose client or server component
• run node scope.js from the root directory if you want to publish scoped pacckage.
  • We assumed that your npm user name is same as your GitHub account or organization username.
  • Please make sure owner is set to your <npmjs.com> username before running the above command.
• Set up CodeCov
  • Visit codecov and setup your repo
  • Create repository secret for CODECOV_TOKEN
• Set up CodeClimate
  • Visit CodeClimate and setup your repo
  • Create repository secret for CC_TEST_REPORTER_ID
  • add *.test.* to ignore patterns on the website
  • update code climate badge
• Add NPM_AUTH_TOKEN to repository secrets to automate publishing package
  • login to your npm account and create automation token
  • Create a new repository secrets NPM_AUTH_TOKEN
• Update description in lib/@mayank1513/fork-me/package.json
• Update Repo Stats by visiting and setting up repobeats
• Create your library and update examples
• Update README
• Setup GitHub pages to deploy docs
  • Go to repo settings -> pages (On left panel); Select deploy from a branch; Then Select main and /docs
• (Optional) Set up Deepsource for static code analysis
• Push your changes/Create PR and see your library being automatically tested and published
• Optionally deploy your example(s) to Vercel.
• Update sponsorship urls.
• You are most welcome to star this template, contribute, and/or sponsor the terbo-repo-template project or my other open-source work
• You can also fork the terbo-repo-template and add your package to packages/shared-ui/src/examples/featured.json
  • If approved your package will be automatically added to FEATURED.md and also published on the home page of this repo.

What's inside?

Utilities

This Turborepo template includes pre-configured tools:

• TypeScript for static type checking
• ESLint for code linting
• Prettier for code formatting
• Plop based code generator for scaffolding new components
• Automatically rebrand this template to match your repo name

Apps and Packages

This Turborepo includes the following packages/examples/lib:

• nextjs: a Next.js app
• vite: a Vite.js app
• fork-me: a React component library shared by both Next.js and Vite examples
• eslint-config-custom: ESLint configurations (includes eslint-config-next and eslint-config-prettier)
• tsconfig: tsconfig.jsons used throughout the monorepo

Each package/example is 100% TypeScript.

Build

To build all apps and packages, run the following command:

cd my-turborepo
pnpm build

Develop

To develop all apps and packages, run the following command:

cd my-turborepo
pnpm dev

Useful Links

Learn more about the power of Turborepo:

• Tasks
• Caching
• Remote Caching
• Filtering
• Configuration Options
• CLI Usage

🤩 Don't forger to star this repo!

Want hands-on course for getting started with Turborepo? Check out React and Next.js with TypeScript and The Game of Chess with Next.js, React and TypeScrypt

License

Licensed as MIT open source.

---

with 💖 by Mayank Kumar Chaudhari

turborepo-template's Issues

Add support for CSS / SCSS modules.

1. sass should be added only as a dev dependency.

2. The final build should produce CSS files following BEM conventions.

   2.1. No hash should be added - to allow library users to use classNames with confidence.
   2.2. In many cases strict BEM convention may not be possible as it will depend on library builders.
   2.3. Treat component folder names as blocks

3. Multiple CSS files should be created corresponding to each component, as well as the overall CSS file containing styles for all components.

Upvote & Fund

• We're using Polar.sh so you can upvote and help fund this issue.
• We receive the funding once the issue is completed & confirmed by you.
• Thank you in advance for helping prioritize & fund our backlog.