Turborepo TMTecnologia Starter

Yarn v3 starter monorepo, featuring:

🏎 Turborepo — High-performance build system for Monorepos
🚀 React — JavaScript library for user interfaces
🛠 Tsup — TypeScript bundler powered by esbuild
📖 Storybook — UI component environment powered by Vite
🔼 Next.js - Flexible React framework focused on web applications
🔒️ NextAuth.js - Authentication for Next.js
💄 Tailwind CSS + 🩻 - CSS framework and Primitive library
📋 React Hook Form - Performant, flexible and extensible forms with easy-to-use validation
💎 Zod - TypeScript-first schema validation with static type inference
🧑‍💻 tRPC - End-to-end typesafe APIs powered by React Query
🗃️ Prisma ORM - typesafe client with painless migrations
🥒 Cucumber + 🎭 Playwrite = BDD e2e testing
💬 i18next - internationalization-framework

As well as a few others tools preconfigured:

TypeScript for static type checking
ESLint for code linting
Prettier for code formatting
Commitlint for linting gitmoji commits messages
Commitzen for guiding contributors in writing gitmoji commits
Changesets for managing versioning and changelogs
Syncpack for ensuring monorepo dependency versions consistency
DangerJS for common review chores automation
Husky for git hooks, e.g linting staged files with lint-staged
GitHub Actions for automated deploy, lint, test and publishing

Getting Started

Clone the design system example locally or from GitHub:

>>> git clone https://github.com/TMTecnologia/turborepo-tmtecnologia.git
>>> cd turborepo-tmtecnologia
>>> yarn install
>>> cp .env.example .env
# Configure your env
>>> cp .env packages/acme-db/.env
>>> cp .env apps/client/.env
>>> docker-compose up -d
>>> yarn workspace @acme/db prisma db push
# build core
>>> yarn workspace @acme/core build
>>> yarn dev

Troubleshooting

In case the commit hooks do not run, try using scripts/husky-chmod: one liner that modifies the files inside .husky, adding the executable permission
In case of the gitmoji list is outdated, try using scripts/fetch-gitmojis: node script to fetch gitmoji.dev gitmoji list from github repo

Useful Commands

yarn build - Build all packages and apps
yarn dev - Run all apps locally
yarn lint - Lint all packages
yarn format - Format all packages
yarn changeset - Generate a changeset
yarn syncpack:fix - Format all package.json files
- Organise package.json files according to a conventional format
- Ensure that multiple packages requiring the same dependency define the same version
yarn syncpack:lint - Lint all packages versions
- List dependencies which are required by multiple packages, where the version is not the same across every package
- Check dependency versions follow a consistent format
yarn clean - Clean up all node_modules and dist folders (runs each package's clean script)

Apps & Packages

This Turborepo includes the following packages and applications:

apps/api: REST API powered by Express
apps/client: Create T3 App starter, customized
apps/docs: Component documentation site with Storybook
packages/@acme/core: Core React components
packages/@acme/db: DB Client
packages/@acme/routers: tRPC routers to interact with DB
packages/@acme/utils: Shared React utilities
packages/@acme/tsconfig: Shared tsconfig.jsons used throughout the Turborepo
packages/eslint-config-acme: ESLint shared config

Each package and app is 100% TypeScript. Yarn Workspaces enables us to "hoist" dependencies that are shared between packages to the root package.json. This means smaller node_modules folders and a better local dev experience.

Versioning & Publishing Packages

You'll need to create an NPM_TOKEN and GITHUB_TOKEN and add it to your GitHub repository settings to enable access to npm. It's also worth installing the Changesets bot on your repository.

Generating the Changelog

To generate your changelog, run yarn changeset locally:

Which packages would you like to include? – This shows which packages and changed and which have remained the same. By default, no packages are included. Press space to select the packages you want to include in the changeset.
Which packages should have a major bump? – Press space to select the packages you want to bump versions for.
If doing the first major version, confirm you want to release.
Write a summary for the changes.
Confirm the changeset looks as expected.
A new Markdown file will be created in the changeset folder with the summary and a list of the packages included.

Releasing

When you push your code to GitHub, the GitHub Action will run the release script defined in the root package.json:

turbo run build --filter=docs^... && changeset publish

Turborepo runs the build script for all publishable packages (excluding docs) and publishes the packages to npm. By default, this example includes acme as the npm organization. To change this, do the following:

Rename folders in packages/* to replace acme with your desired scope
Search and replace acme with your desired scope
Re-run yarn install

To publish packages to a public npm organization scope, add the following to each of the package.json's

+ "publishConfig": {
+  "access": "public"
+ },

Vercel Deploy

Create New Project
Select Root Directory as apps/client, or other package you're trying to deploy
Override Build and Output Settings > BUILD COMMAND

cd ../.. && yarn dlx turbo run build --scope=client --include-dependencies --no-deps && yarn workspace @acme/db prisma generate

Create Environment Variables, check .env and apps/client/.../env-schema.mjs for info

Turbo Remote Caching

Create Vercel Team
yarn dlx turbo login
yarn dlx turbo link

Ignoring build steps

Go to Project Dashboard > Settings > Git > Ignored Build Step
Experimental Add command

npx turbo-ignore

See more detailed explanation @ vercel.com/docs and @ youtube.com/c/VercelHQ

Dependencies vulnerabilities

This repo contains a configuration for audit-ci tool and a one liner script scripts/audit-ci; feel free to validate your dependencies security locally