Getting started with Turborepo

[@engageintellect]

Spent a few hours looking for docs to add tailwind to turbo (and share between projects). Your walkthrough was very well explained, made a ton of sense, and saved me time. Cheers 🍻

[@hamedbahram]

Great to hear that! welcome to the channel 😀

[@koigxiritb7ttgyuv]

Great video, answered 90% of my questions. Thanks for using Tailwind as an example.

[@hamedbahram]

Glad it was helpful!

[@anbarasu1997]

Wow! So elegantly explained. Thanks for the video. I started working on a project which is managing multiple projects using turborepo. This video will definitely help me in exploring further.

[@hamedbahram]

Glad it was helpful!

[@rishabh7g]

Great content. Please continue to make such excellent content. 34 minutes Worth it.

[@hamedbahram]

Thanks! I'm glad you think so.

[@emee__]

Hello, how can someone add env file, because for some reasons turborepo isn't importing my .env files

[@hamedbahram]

Each project can have its own environment variables.

[@codewithguillaume]

Thank you for this presentation Hamed ! Subscribed :)

[@hamedbahram]

Welcome to the channel Guillaume.

[@mumk]

Thanks you so much, just what I needed, Turborepo with Tailwind configs as packages! Awesome tutorial and hope you have a great day, cheers

[@hamedbahram]

Glad it helped! And welcome to the channel

[@mumk]

@@hamedbahram glad to be here too :)

[@igmtink]

this is the only one tutorial on youtube that I clearly understand 😊 love it! ❤ btw I see the NextUI is created too turborepo, can you do a tutorial how to create own component library using also the turborepo then publish to npm package?

[@hamedbahram]

Glad to hear that! Interesting idea, that'd be quite a project 🤓

[@igmtink]

@@hamedbahram thank you 😊

[@stevenlocke5917]

Congrats on hitting 1000 subs!!!

[@hamedbahram]

Thank you Steven, and welcome to the channel.

[@JaredFL]

I'm curious why you wouldn't install tailwind as a dev dep on the root since it'll be used in the docs and web workspace

[@sams64sf]

Imagine you add another package that’s not UI-related - an API or cli tool etc. it might not need tailwind.

[@hamedbahram]

Good question Jared, you can if you want, but you might have other workspaces like configs and utility packages that don't depend on tailwind.

[@hamedbahram]

Thanks Sam for contributing to the question.

[@joylodralive]

Hi Hamed, great video. How do we deploy this monorepo to the Internet? Do we still have to deploy them one by one?

[@hamedbahram]

It depends on your project, if they are meant to work separately which is often the case, you'll deploy them separately.

[@GigsofRam]

I really appreciate this tutorial. Thanks for being so thorough.

[@hamedbahram]

You are so welcome! I'm glad it was helpful. I appreciate your comment.

[@danilocunha5220]

We are attempting to use Turbopack, but we consistently encounter issues when attempting to locate a required module for a package. For example, if you need to add "plugin:prettier/recommended" on the ESLint extends, the eslint fails to load the prettier package.

[@hamedbahram]

Hmm 🤔 never encountered that problem before! Don't have much insights around that to share...

[@ThanHtutZaw3]

Can I use mono repo for MEVN stack that are separately deployed on vercel. The problem is cannot access zod schema in both frontend and backend in production

[@hamedbahram]

Good question 🤔 I'm not sure!

[@mohdsahil226]

Thank you! Your way of teaching is really amazing. Would you please create a video on how to add react-testing library to turborepo?

[@hamedbahram]

Thank you Mohd. I'll definitely have a video on testing in NextJs.

[@SanderCokart]

Wouldn't adding ../../packages to tailwind content key result in your tailwind in docs to generate redundant css? Like unused classes for that particular apps/app. I'd recommend spreading the config and extending it with your own content key value pair per project.

[@hamedbahram]

Hmmm 🤔 interesting! will have a look at it.

[@SanderCokart]

@@hamedbahram adding packages is fine if you do have a only tailwind consuming repos within the mono. Gotta find a way to only generate the tailwind required for that particular repo

[@macktheknife2037]

Hi, it does not seem to be working with pnpm anymore? I get dependency issues.

[@hamedbahram]

Hmm 🤔 I haven't tested it recently!

[@shahidullahmuffakir668]

It was very helpful, thank you. Keep it up!

[@hamedbahram]

Glad it helped!

[@_sumitdey.exe1]

Do you think adding packages is a good option in the purge content array inside the shared config and not on individual workspace level ? If yes then How are you going to extend the tailwind config in ui? for example let's say I need a different theme in ui library. How can you do that? 2nd if you don't use tailwind config, you will not get tailwind intelligence in vs code.

[@hamedbahram]

That's a good question, I'd extend the tailwind config, but I'd have to think about the purging and theming... I'll keep you posted.

[@parth_patel2933]

how do we deploy our app on any hosting platform with this turborepo ?

[@hamedbahram]

Each package will be it's own deployment, if you use vercel it detects the monorepo and prompts you in choosing which app you want to deploy.

[@jakubsalanyk8830]

Nice intro, however, you have react in devDependencies in ui package, and also in dependencies in your web and doc apps (all using the same version). Isn't it duplication? Say, since I'm the owner of the monorepo, I want to use the same version of react in all workspaces (so if i update react, it should be reflected across all my apps and packages). Would such setup be a good approach?

[@hamedbahram]

I see... to me each package in your monorepo has its own dependencies, here React seems to be common between them, you can structure it in a different way, and that'll be fine.

[@KNITHINKUMARREDDY]

There is an environment variable in my .env file .Precisely, NEXTAUTH_SECRET = "ARJUN" , error: NEXTAUTH_SECRET is not listed as a dependency in turbo.json. Can someone help me fix this.

[@hamedbahram]

Well, first of all you need a longer random secret that "ARJUN" but that aside, you need to load your environment variables in your monorepo explained in the following guide → turbo.build/repo/docs/handbook/environment-variables

[@Mehdi-z4g]

I have a question regarding Tailwind CSS. All the examples on the Turbo site focus on Tailwind, but we need examples with other design systems. How can I integrate a different design system with Turbo? Additionally, after building with pnpm, npm, or Yarn with Next.js, I can start the project, but I’m unsure how to do this with Turbo. What matters most to the customer is ensuring that the chosen methods effectively meet their needs. The problem with many techniques is that they are often left to unfold without clear guidance. I want to avoid wasting time on extensive building and configuration; I'd prefer to stick with familiar methods and concentrate on the application's logic. Thank you!

[@hamedbahram]

What design system are you using?

[@devsuthar6795]

great video Hamed 👍👍

[@hamedbahram]

Thanks 👍

[@brianwachira]

I have followed your tutorial and I keep getting the error "Error: Cannot find module 'tailwind-config/tailwind-config.js' Require stack: - /Documents/otm/demov3.0/apps/web/tailwind.config.js" I keep getting that error even when I follow other tutorials. What could be the issue?

[@hamedbahram]

Try cloning my code and see if you get the same error. Here is a link to the source code on Github: github.com/HamedBahram/turbo-demo

[@brianwachira]

@@hamedbahram Thank you, I found the solution to be adding tailwind-config to next config transpilePackages. Nextjs has changed since you released this tutorial.

[@hamedbahram]

@@brianwachira Sweet! glad you found the solution, and thanks for sharing it. Can you create a PR on my repo?

[@brianwachira]

@@hamedbahram Yes I will. Thank you for the opportunity to contribute to your Repo.

[@hamedbahram]

@@brianwachira Awesome!

[@jedi_v]

Thank you for making this video. It would be nice to create a similar video one for managing environment variable in this set up. :-)

[@hamedbahram]

Interesting use case 🤔 I'll look into that. Thanks for the suggestion.

[@SumitDey-q3z]

Great Video Man. One question : You have not installed tailwind in ui. But still able to use tailwind inside that. How's it possible? Can you share the github repo of this?

[@hamedbahram]

There are different ways to add tailwind, I have it on the `ui` workspace and then pull it in my other workspaces. I don't think I have a repo for this, but you see the sample project on the docs here turbo.build/repo/docs/getting-started/create-new

[@amineayachi335]

how i can add new apps in the apps folder like a new next application

[@hamedbahram]

Same way you would in any other project by running the create-next-app script. You can then go in the `package.json` and update the dependencies to use your other workspaces.

[@saketabhishek5147]

One of the best video on Turbo

[@hamedbahram]

Thanks Saket! Glad you think so.

[@rarutu]

how do u deploy a turborepo project to cloudflare pages?

[@hamedbahram]

Good question! haven't done that unfortunately.

[@iamAmeeeeeer]

can this be deployed on a VPS or is this vercel locked meaning can be only deployed on vercel

[@hamedbahram]

Yes you can. Turborepo is a JS/TS build tool. You don't really deploy a turborepo but the individual projects it contains.

[@iamAmeeeeeer]

@@hamedbahram alright got it! Thanks

[@kevinhg9515]

Absolutely great tutorial, thanks!

[@hamedbahram]

Glad it was helpful!

[@SanderCokart]

This walkthrough is very underrated AWESOME! Maybe a better title such as Getting started with Turborepo | Example add tailwindcss to monorepo

[@hamedbahram]

Glad to hear that! Thanks.

[@lenvaz8957]

Lovely... Thank you! Very helpful

[@hamedbahram]

Glad it was helpful!

[@maverick456-33]

I like your tutorial a lot ! Thanks man ! I think Turborepo/Turbopack would be a game changer with Rust !

[@hamedbahram]

Yeah they are amazing!

[@wizz1e80]

Great tutorial Can i add other kinds of applications to the monorepo like maybe a nestjs backend application?

[@hamedbahram]

Yup!

[@Lindhult]

Thanks for a really nice video 🙏⭐ I am curious about one thing. You are not transpiling the ui library, but instead exporting the “raw” tsx files. I guess this brings the responsibility of transpiling the shared library to the apps? And it makes it possible for the apps to auto-refresh directly when the files in the “ui” package changes. However, at 17:23 (kzbin.info/www/bejne/o6mvfXytj55mpLs) you show that the app “web” has a tsconfig containing “exclude”: [“node_modules”]. How is the “ui” library being transpiled?

[@hamedbahram]

Welcome to the channel Magnus. That's a good questions, in the tsconfig we're excluding the npm packages (i.e. "node_modules") and not our local workspace packages (i.e. the "ui" workspace) if that makes sense.

[@Lindhult]

@@hamedbahram Thanks for the answer. Do you mean that the "ui" folder inside of the node_modules is still being targeted? Or are you reaching outside of the apps folder to target transpilation of the "ui" folder? Do you have the example as a repo in github or similar? It would be nice to have a look at the details of the project :)

[@hamedbahram]

@@Lindhult If you look at the repo linked below for a basic example of a turborepo project, you'll see a base tsconfig package that's being extended by other packages. github.com/vercel/turbo/tree/main/examples/basic

[@k2nnethtan949]

hmm... interesting... can I use app/docs as the backend, and app/web as a frontend?

[@hamedbahram]

Absolutely

[@k2nnethtan949]

@@hamedbahram How to install the library into packages\layout, then other projects I can share the same Navbar UI and so on...?

[@hamedbahram]

@@k2nnethtan949 you can create a 'UI' workspace and reference it as a dependency in your other workspaces, similar to the what I show in the video.

[@DudesVerses]

I really appreciate this tutorial, thank you for knowledge sharing❤

[@hamedbahram]

Glad it was helpful!

[@shahidullahmuffakir668]

I have one suggestion, rallly is an open source app. It is monorepo, with turbo. can you locally setup the repo. I want to contribute to it, but don't don't its project structure. Thank you

[@hamedbahram]

You can fork the open source project in your repo, and clone it locally, make changes, and open a PR to contribute to it.

[@shahidullahmuffakir668]

@@hamedbahram Thanks a lot for replying, but it has so many environment variables and it is monorepo, a little difficult for me.

[@hamedbahram]

@@shahidullahmuffakir668 Which project are you talking about?

[@yonsama6469]

Hey great video! I have one question do you know if it’s possible to share an pages/api/folder between different app as dependencies ?

[@hamedbahram]

Hey Yon, good question, you can definitely expose an API as a standard workspace and share it as a dependency.

[@rishabhsharma_4769]

can you please create the dockerfile

[@fakhrulislamfuad8072]

can you do something for app directory as well?!

[@hamedbahram]

Maybe! I'll have that in mind.

[@MehrdadPanahandeh]

Great stuff!

[@hamedbahram]

Appreciate that!

[@ericdonaldpitcher]

Great overview! Thanks!

[@hamedbahram]

Thanks Eric!

[@ghassanclassic7689]

Thank you very much 🎉

[@hamedbahram]

No problem!

[@roniaxelrad9493]

Such a great video. I never heard about turbo repo before. It's very interesting. Is it correct to say that my main motivation to use it, is if I have a several applications which i want to share a ui app or configuration between them?

[@hamedbahram]

Exactly 💯

[@miladmohammadi3233]

This tutorial is perfect

[@hamedbahram]

Thanks! Glad you think so.

[@giovannitonussi3746]

Amazing content, thank you!

[@hamedbahram]

My pleasure!

[@Китаймоимиглазами]

thanks

[@hamedbahram]

My pleasure!

[@anandhukraju9382]

This was perfect

[@hamedbahram]

Thanks, and welcome to the channel Anandhu!

[@Cat_loveers101]

add translate to arabic watching you from syria thank you so much

[@hamedbahram]

I'll look into that Anas! Welcome to the channel.

[@dzungko]

appreciate this vid. But just kinda hate it when that there's a warning, and u just pass it. No one like there's always a warning in the code.

[@hamedbahram]

Thanks for your feedback!

[@Kamleshsharma35]

You should speak more about turbo repo features and not about yarn or pnpm command

[@hamedbahram]

Why don't you make a video and talk about whatever you think you should talk about.

[@ibraheemassiri]

interesting.

[@hamedbahram]

turborepo is cool.

[@lotfikamel5947]

nice content ! but stop saying "VEB" please its "WEB"

[@hamedbahram]

You're welcome Lotfi! Thanks for your feedback.