Turborepo Tutorial | Part 1 - Typescript, Eslint, Tailwind, Husky shared config setup in a Monorepo

[@vcbiotech]

It took me almost two weeks to finally understand my tailwind components were not working. THANK YOU SO MUCH FOR THIS.

[@interceptorghost1149]

This video makes me level up my software engineering knowledge, nice video

[@Merchance]

Would be the best series if you also integrate Storybook to the workspace

[@DioArsya]

yup

[@gno3939]

yup

[@justinoneill2837]

yuppp! and *SVELTE* !

[@ryskin82]

thats I wanted to write too

[@sweetwarmblanket]

Hey Leo, I recently found you ( last month ) while looking for videos on GraphQL and your videos on GraphQL microservices and fedeartion are really amazing, I've learned a lot from it and has subscribed since the first day. I had seen your others videos and the monorepo one as well but this is something I was wanting to explore with a backend and frontend, sharing different module/plugins/husky commands using monorepo. I have learned everything from the internet and watching countless youtube videos from people like you and I really appreciate the work that you guys put in but I haven't seen a single video where someone has shown the entire procress from scratch to deploying a app ( FullStack app ) with all the industry standards. Things like, a scaleble backend and frontend fueled with typescript and graphql with proper authentication ( using cloud functions if needed ). Setting up CI/CD, docker, cloud for deployment ( AWS/Serverless ). It's a request if you could put out a video covering and explaing everything from start to finish of a FullStack ( doesn't have to be a complex a simple one like router protection with backend validation or something like that ) that'd be really helpful. Thanks again, I really appreciate your work and hope you grow to be a successful KZbinr. P.S. Happy Holidays

[@CodeDunks]

Hey R, I appreciate this message a lot! Really nice to know that my content has been able to help out. I am currently working on a full-stack course that will cover from the beginning of a project to deployment right now. I hope to have it out here soon but it is just taking a little bit of time between work, holidays, and other projects! Good luck with everything.

[@sweetwarmblanket]

​@@CodeDunks I appreciate the quick reply :) and yeah, I can completely understand, time management between work and your other hustles especially during this time of the year can be really difficult at times but I'm really looking forward to it. Take care and stay up!

[@rudrava]

bruh u saved so much of my reading time ... best intro out there Love

[@workflowinmind]

If you've seen your watch time increase recently it might be me... I watched the whole channel! Keep it up

[@musbell]

Thanks Leo. Looking forward for the next video.

[@gregederer6945]

This is exactly what I was looking for. Thanks!

[@Feetsha]

Your content is one of the best out there ngl ! Keep up the amazing work

[@milad8436]

The course I was looking for. Exactly the one I wanted

[@meysam0213]

tnx leo this is best practice for develop frontend monorepo,

[@vedantbothikar]

Thanks for this video man!

[@NOBOKSify]

literally saved my life - thank you so much!

[@quyetnguyen9161]

This is awesome, thank you. Can't wait for the next video.

[@footballrecap1631]

nice one man, this was really helpful

[@NotAllHeroesWearCapes-101]

this is super awesome .. waiting for the next part ..:)

[@taghavi_script]

thanks man, i enjoyed

[@andrewkorin]

Good stuff. Keep going! Liked. Subscribed. Waiting for the next part.

[@alex9471]

You mean the next next part

[@_kadirmetin]

Thanks for the video 🙏

[@marcellciszekdruzynski]

Really nice, thanks for this one !!

[@b1chler]

Cool man! Thanks for the intro!

[@williamliu796]

Thanks so much for this video. I went absolutely nuts trying to figure out why my tailwind styles werent working through the UI library. They were being purged!!!

[@codernerd7076]

Never heard of this sounds good!

[@curiousprogrammer90]

Very nice and good explanations! Thanks! :)

[@muratasarslan2359]

Very clear & helpful. Thank you Leo 🙂

[@mateh3273]

You’re the best man

[@binov5012]

Excellent! Thanks 🙏

[@sirawichvoungchuy3128]

Storybook integration would be great thank you!!

[@doobtom271]

Your Christmas hat still applies at the time I watch this video, lol

[@juanzapatagomez8064]

By any chance could you make a tutorial on adding Prisma as a package?

[@sokhuonguon9251]

really really good

[@7iomka]

Storybook integration (at least for UI components) please! Subscribed!

[@cesarpintos8418]

Thank you a lot christopher mintz plasse

[@CodeDunks]

😂😂😂

[@bridlershoc6569]

Hey great video, shared it with people! When will you release part 2?

[@CodeDunks]

Hey there and thanks! I plan to release it sometime next week. Was just gone for the hoildays visiting family.

[@PartneredAdmin]

Hi how to add a new app using a command e.g. npx create-payload-app@latest as an app to a turborepo? I can 't find this anywhere clearly? So...is it just delete the node_modules and copy/move all the new app files to /apps and add name and version to the workspaces?

[@fooked1]

May I ask, why did you include the same dependencies in both next package.json files? Wouldn't it be better to move those deps to a common package.json -- perhaps the root package.json?

[@alexandardimcevski9136]

How do we add Font to the UI package and the Apps?

[@MrEnsiferum77]

Is it possible to remove deps and devDeps from packages and apps folder, and reuse what u can reuse from root package.json file, like typescript, react, react-dom and turrbo repo on build step to find all root depedencies?

[@CodeDunks]

I believe that you should be able to reuse devDependencies, removing dependencies however might be a little bit more complicated. I found this interesting issue on the Lerna repo that might explain github.com/lerna/lerna/issues/1079. I haven't had to do this with turborepo yet so I am not 100% sure.

[@MrEnsiferum77]

@@CodeDunks I've managed to solve with shared dependencies like react, react-dom installed in packages/shared, and shared imported in apps/remix as "shared": "workspace:*, because I'm using pnpm... Now I have issue with finding every devDeps binary except eslint, like rimraf. Packages exists inside apps/remix node_modules folder, and I can see them as symlinks, but for some reason, is not working recursively. Opened discussion for help on github.

[@CodeDunks]

@@MrEnsiferum77 sounds like quite the setup, could you link the issue so I can follow as well? Got me interested

[@MrEnsiferum77]

@@CodeDunks That eslint command, gets me tricky. Some other package from remix or directly remix isntalling eslint binary, that's why its is found. The problem is with pnpm, which is not possible to have subfolder dependencies and to be found upstream as binaries. U need to installed all of them in root package.json. I still trying to figure it our if monorepos tools or npm/yarn/pnpm can make binaries avaiabled installed in one packaged, into another one, which imports it. I'm planing to make turborepo monorepo with multiple techonologies as template, so probably when I'm done will be part of turborepo templates.

[@CodeDunks]

@@MrEnsiferum77 Hmm interesting, I haven't had a chance to use pnpm yet but hope to get to it soon. Appreciate all the information and look forward to that repo once you have it done!

[@abdullahclementabdulshekur6736]

can this set up be used to build microservices

[@sourav_-_7038]

instead of next-app and next-next-app can you use mf-proj1 and mf-proj2

[@martinlupa8692]

Hi Leo, great material. I am setting up a monorepo for a side project and this video helped me a lot to understand the shared configurations between projects. I have a question that I couldn't answer yet. When setting up the shared eslint config, why is it important to let "prettier" to the last in the extends array inside eslint-next.js? I have come across other projects that do not respect that ordering and was wondering why. Thanks a lot!

[@CodeDunks]

Hey Martin! Thanks for the kind words, from my understanding eslint applies configurations sequentially. Since prettier is pretty opinionated formatter, it can conflict with your other ESLint rules, putting it at the end ensures that prettier always "wins" and formats your code

[@martinlupa8692]

@@CodeDunks thanks again!

[@lukafireman]

Hey man, Awesome content!! Mind sharing details about your workspace setup? What you use to set up your Workspaces, VSCODE, OS, Extensions, etc. Including that lovely terminal of yours.

[@hakanaki]

Why can't Turborepo packages work with plane React 😥😥?

[@alexand215]

thank you so much

[@lamogura]

I am curious what you would do if you are using a tailwind plugin or extending the theme etc only on the UI components? Or vice-versa? Would that still all work as expected? It seems only autocomplete etc is playing nice because you copy/pasted the same config to both places. The approach is different than how you did tsconfig, so I guess there isnt a way to put all the tailwind config in 1 place and share?

[@CodeDunks]

I think you are asking about whether you could have a shared config? I found this article that might help tinypixel.dev/use-yarn-workspaces-to-share-a-tailwind-config-file-throughout-your-wordpress-application/

[@Jamie-kf2vf]

Question; I have a Nextjs app currently (not a monorepo). If I create a Turborepo monorepo, could I just drag my NextJS project into the apps/ directory? It already has all the eslint and prettier config.

[@SivakD]

Hey. Very nice video. I've been using this tool too and it seems good. Do you know if there's a way to specify a build order for apps that might depend on packages in the package folder? (e.g. if app A needs package A, it has to build that package before trying to build app A) Is it the pipelining or just the order of the build scripts? Thanks in advance.

[@CodeDunks]

Yeah I believe you should be able to use the "dependsOn" pipeline configuration specificPackageTasks. So like you could do something like in "pipeline" "appA#build": { "dependsOn": ["packageA#Build"] } Check it out here turborepo.org/docs/features/pipelines

[@SivakD]

@@CodeDunks Thanks for the reply. I was playing with it some and the pipeline is definitely the way to go as well as having dependencies defined in the app's package.json itself. I'm new to monorepos but I am liking this tool thus far.

[@meysam0213]

how to integrate storybook with this ?

[@lcui4813]

nice video! do you know how to make vscode autoimport working in this video's monorepo? now i need to manually import once then it works

[@CodeDunks]

Hmm I don't think I have ever used that extension unfortunately

[@ngoclam98242]

sorry but can you explaint, why we use "./../packages/ui/**/*.{ts,tsx}" not "./packages/ui/**/*.{ts,tsx}"

[@ishanagarwal3464]

Great video, I am very new to this, could you please tell advantages of turborepo over simple monorepo? Any is sharing ts config possible without turborepo?

[@LarsRyeJeppesen]

Caching. If you want more advanced stuff, go with NX which is superior but more advanced/complex

[@siya.abc123]

Great tutorial thank you. But, so many configs are intimidating

[@hirisraharjo]

How to do it without tailwind? (ex: purgecss only) Anyway great video as usual!

[@LarsRyeJeppesen]

I really hate how TurboRepo is so associated with NextJS. It is like they try to force to use that all the time. It would have been nice if you didn't set it up with the default NextJS, because anyone not using it cannot use the same approach as you did.

[@dimitrisefstathiadis6562]

Your root commands should run yarn workspaces lint, and then run it for all packages. What you are doing there while correct is not reproducible..

[@jamielee4427]

Well this is simply brilliant! Thanks man. Btw, just to point out, prettier doesn't format on save for me unless I create a .vscode/settings.json and have the following config: { "editor.formatOnSave": true, "editor.codeActionsOnSave": { "source.fixAll.eslint": true, "source.organizeImports": true } } This is fine, but more for those who aren't aware. I had a Next project with this set up but the Turborepo one didn't. Question - when I save a file, will it apply the correct prettier configuration? (say, you have one in next-app which is different to next-next-app).

[@CodeDunks]

Thanks Jamie! You could also add those settings to your overall VSCode settings I believe so it doesn't need to be per project basis. 1. CTRL + Shift + P -> Type settings and open Settings (JSON) 2. Paste "editor.formatOnSave": true, "eslint.format.enable": true, "editor.defaultFormatter": "esbenp.prettier-vscode", "editor.codeActionsOnSave": { "source.fixAll.eslint": true }, "eslint.options": { "extensions": [".js", ".jsx", ".md", ".mdx", ".ts", ".tsx"] }, "eslint.validate": [ "javascript", "javascriptreact", "typescript", "typescriptreact", "markdown", "mdx" ], That is what I have in my settings (JSON), might work for you. Sorry if it doesn't haha

[@omkarkulkarni3644]

eslint not working unfortunately

[@CodeDunks]

What seems to be the issue?

[@shashwatgupta9993]

Same... did you find any solution?

[@shashwatgupta9993]

@@CodeDunks getting this error but don't know how to solve it. Could not find a declaration file for module 'config/eslint-next.js'. '/Users/shashwat/Desktop/Turborepo/turborepo tailwind with jit-mode/packages/config/eslint-next.js' implicitly has an 'any' type. Try `npm i --save-dev @types/config` if it exists or add a new declaration (.d.ts) file containing `declare module 'config/eslint-next.js';`

[@shashwatgupta9993]

it works on putting noimplicitany to false but i want strict type checking

[@CodeDunks]

@@shashwatgupta9993I ran into the same issue where the linting was actually not linting anything. I've updated the repository with a version that should be working. github.com/leoroese/turborepo-tutorial

[@fortunatmutunda4194]

This is what you don't find in the offical docs.

[@dimitrisefstathiadis6562]

100% sure these configs are gonna change in v2 of turbo repo and will pivot to the way Nx has them. They confused themselves a bit and made the configs too complex.

[@CodeDunks]

Yeah they've changed already lol. Turborepo now defaults to a turbo.json, if you happen to have an older version before that change, they also provide a command to update automatically to turbo.json

[@dealerpriest]

The number of times you can skip saying the words "go ahead" is overwhelming. Those words are, in most part, just fluff😊

[@markokraljevic1590]

you should talk slower, sounds like you are nervous

[@peroconino]

Its pretty hard to find content about monorepos on the internet, this video helps a lot understanding how it works. But unfortunately the solutions may deprecate with time. I was following your steps to configure eslint (tsconfig worked just fine) and the part where you configure the import resolver seems not to be working anymore. But it actually got easier to do it. I didn't had to override parserOptions in eslint.js project level. I just had to pass to next-preset.js at settings>import/resolver>typescript a property called project and there specify the path to next project like this : project: ["./apps/next-app/tsconfig.json"]. And worked just fine to recognize the absolute paths from tsconfig. Hopefully this helps someone in the future with the same problem I had.