Turbo Up Your Monorepos 🚀

In the last quarter, I've been working on a solo project which I intend to turn into a product eventually – but that's neither here nor there – What I've come to write about is one of the hundred billion JavaScript tools available out there and that I am also using – Turborepo.

But I'm not going to hover over the "What is Turborepo?", "Usage", and 10 advantages copied right out of ChatGPT. Let's take a look at how you can game up and use it like a pro.

1. Connect to Remote Caching 📦

I don't want to sound repetitive here because Vercel says a lot about connecting the build outputs to their remote cache (Actually they do it right after you initialise Turbo in your repo) – but this remote cache saves some precious time.

You can connect to remote caching by logging into via Turbo CLI. See the command below:

turbo login # signs into your account associated with Vercel

turbo link # connects to remote caching to this specific project

2. Don't Start From Scratch 🦊

Look – I like Vercel. They remove a lot of complexity of things I don't like to work with, i.e. cloud tools – but I just can't take starting up a new project with the default Turborepo template repository.

And that's when something better comes along –– T3 Stack. Authentication, database, Drizzle ORM setup to connect Supabase or another Postgres instance, and all that jazz – it's something good to begin with if you're working solo or on a small team.

npx create-turbo@latest -e https://github.com/t3-oss/create-t3-turbo

T3 OSS Turbo template comes with integration of next-auth. Next Auth is an authentication provider that deserves its own post so I won't hover.

The template also provides a CI for utilising cache with GitHub Actions and PNPM and tRPC (TypeScript Remote Procedure Call). See the folder tree:

.github └─ workflows └─ CI with pnpm cache setup .vscode └─ Recommended extensions and settings for VSCode users apps ├─ auth-proxy | ├─ Nitro server to proxy OAuth requests in preview deployments | └─ Uses Auth.js Core ├─ expo | ├─ Expo SDK 51 | ├─ React Native using React 18 | ├─ Navigation using Expo Router | ├─ Tailwind using NativeWind | └─ Typesafe API calls using tRPC └─ next.js ├─ Next.js 14 ├─ React 18 ├─ Tailwind CSS └─ E2E Typesafe API Server & Client packages ├─ api | └─ tRPC v11 router definition ├─ auth | └─ Authentication using next-auth. ├─ db | └─ Typesafe db calls using Drizzle & Supabase └─ ui └─ Start of a UI package for the webapp using shadcn-ui tooling ├─ eslint | └─ shared, fine-grained, eslint presets ├─ prettier | └─ shared prettier configuration ├─ tailwind | └─ shared tailwind configuration └─ typescript └─ shared tsconfig you can extend from