Learn how to manage all your apps and packages from a single source code using Turborepo. ➡️ The Ultimate NextJs Course 🔗 www.hamedbahra... ➡️ Source code (Github) 🔗 github.com/Ham...
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 🍻
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.
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?
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
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.
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.
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?
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
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.
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
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 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
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.
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
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?
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.
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?
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 (ua-cam.com/video/mxLLIwZ93nY/v-deo.html) you show that the app “web” has a tsconfig containing “exclude”: [“node_modules”]. How is the “ui” library being transpiled?
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.
@@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 :)
@@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
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 Thank you, I found the solution to be adding tailwind-config to next config transpilePackages. Nextjs has changed since you released this tutorial.
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 🍻
Great to hear that! welcome to the channel 😀
Great video, answered 90% of my questions. Thanks for using Tailwind as an example.
Glad it was helpful!
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.
Glad it was helpful!
Thanks you so much, just what I needed, Turborepo with Tailwind configs as packages! Awesome tutorial and hope you have a great day, cheers
Glad it helped! And welcome to the channel
@@hamedbahram glad to be here too :)
Hello, how can someone add env file, because for some reasons turborepo isn't importing my .env files
Each project can have its own environment variables.
Thank you! Your way of teaching is really amazing. Would you please create a video on how to add react-testing library to turborepo?
Thank you Mohd. I'll definitely have a video on testing in NextJs.
Great content. Please continue to make such excellent content. 34 minutes Worth it.
Thanks! I'm glad you think so.
Thank you for making this video. It would be nice to create a similar video one for managing environment variable in this set up. :-)
Interesting use case 🤔 I'll look into that. Thanks for the suggestion.
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?
Glad to hear that! Interesting idea, that'd be quite a project 🤓
@@hamedbahram thank you 😊
Congrats on hitting 1000 subs!!!
Thank you Steven, and welcome to the channel.
Thank you for this presentation Hamed ! Subscribed :)
Welcome to the channel Guillaume.
great video Hamed 👍👍
Thanks 👍
I really appreciate this tutorial. Thanks for being so thorough.
You are so welcome! I'm glad it was helpful. I appreciate your comment.
how do we deploy our app on any hosting platform with this turborepo ?
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.
Absolutely great tutorial, thanks!
Glad it was helpful!
Hi Hamed, great video. How do we deploy this monorepo to the Internet? Do we still have to deploy them one by one?
It depends on your project, if they are meant to work separately which is often the case, you'll deploy them separately.
It was very helpful, thank you.
Keep it up!
Glad it helped!
Hi, it does not seem to be working with pnpm anymore? I get dependency issues.
Hmm 🤔 I haven't tested it recently!
This walkthrough is very underrated AWESOME!
Maybe a better title such as Getting started with Turborepo | Example add tailwindcss to monorepo
Glad to hear that! Thanks.
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
Good question 🤔 I'm not sure!
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
Imagine you add another package that’s not UI-related - an API or cli tool etc. it might not need tailwind.
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.
Thanks Sam for contributing to the question.
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.
Hmm 🤔 never encountered that problem before! Don't have much insights around that to share...
Great tutorial
Can i add other kinds of applications to the monorepo like maybe a nestjs backend application?
Yup!
I like your tutorial a lot ! Thanks man ! I think Turborepo/Turbopack would be a game changer with Rust !
Yeah they are amazing!
how i can add new apps in the apps folder like a new next application
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.
This tutorial is perfect
Thanks! Glad you think so.
One of the best video on Turbo
Thanks Saket! Glad you think so.
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?
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
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.
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
how do u deploy a turborepo project to cloudflare pages?
Good question! haven't done that unfortunately.
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.
Hmmm 🤔 interesting! will have a look at it.
@@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
can you do something for app directory as well?!
Maybe! I'll have that in mind.
thanks
My pleasure!
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.
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.
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
You can fork the open source project in your repo, and clone it locally, make changes, and open a PR to contribute to it.
@@hamedbahram Thanks a lot for replying, but it has so many environment variables and it is monorepo, a little difficult for me.
@@shahidullahmuffakir668 Which project are you talking about?
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?
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.
add translate to arabic watching you from syria thank you so much
I'll look into that Anas! Welcome to the channel.
I really appreciate this tutorial, thank you for knowledge sharing❤
Glad it was helpful!
Great overview! Thanks!
Thanks Eric!
Thank you very much 🎉
No problem!
Great stuff!
Appreciate that!
hmm... interesting... can I use app/docs as the backend, and app/web as a frontend?
Absolutely
@@hamedbahram How to install the library into packages\layout, then other projects I can share the same Navbar UI and so on...?
@@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.
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?
Exactly 💯
Amazing content, thank you!
My pleasure!
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 ?
Hey Yon, good question, you can definitely expose an API as a standard workspace and share it as a dependency.
This was perfect
Thanks, and welcome to the channel Anandhu!
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 (ua-cam.com/video/mxLLIwZ93nY/v-deo.html) you show that the app “web” has a tsconfig containing “exclude”: [“node_modules”].
How is the “ui” library being transpiled?
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.
@@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 :)
@@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
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.
Thanks for your feedback!
You should speak more about turbo repo features and not about yarn or pnpm command
Why don't you make a video and talk about whatever you think you should talk about.
interesting.
turborepo is cool.
nice content ! but stop saying "VEB" please its "WEB"
You're welcome Lotfi! Thanks for your feedback.
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?
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
@@hamedbahram Thank you, I found the solution to be adding tailwind-config to next config transpilePackages. Nextjs has changed since you released this tutorial.
@@brianwachira Sweet! glad you found the solution, and thanks for sharing it. Can you create a PR on my repo?
@@hamedbahram Yes I will. Thank you for the opportunity to contribute to your Repo.
@@brianwachira Awesome!