How to Create a React Typescript Monorepo with Git Submodules
ฝัง
- เผยแพร่เมื่อ 16 ต.ค. 2024
- Do you work with large or semi-large codebases that are starting to get out of control? Do you have to deal with multiple different projects that interact with each other and have difficulty keeping versions aligned?
If you said yes to either of those things (or even if you're just anticipating encountering them in the future) then this tutorial is for you.
This tutorial is based on my blog post here:
dev.to/alexeag...
All code from the tutorial is freely available in a repo here:
github.com/ale...
Thanks for this video. I particularly like the extra depth of explanation you give compared to other monorepo videos I have watched.
Sir, You are seriously awesome, please dont stop making videos...
We need people who can explain things such easily.
You really saved me a week worth of time. Thank you so much!
Your explainations are way too good. Thanks for the video!
Great tutorial! Really interesting, thank you!
Great content and insightful! Thank you! 🤓
Tip for anyone watching - I was having trouble importing the workspaces I had exported from, and the cause was that my TypeScript types (e.g. server.d.ts) weren't being generated in the dist/ folder of my server package.
The solution was to go into tsconfig.json and add:
"declaration": true,
"declarationMap": true,
Once I rebuilt the server, my react app picked up the import correctly.
Super helpful tutorial. Thank you.
Have you used nx or turborepo? Lerna project looks to be dead and not maintained anymore.
I think npm has workspaces now too (in version 7). I'm not sure if that was the case when you recorded this
Great video!. What would be the difference between using yarn workspaces or NPM workspaces?
greattt job bro, keep going
Isn't it true that libraries like React or Frameworks like Angular need to have/run/use their own specific version of Typescript? Or can we just upgrade their versions as we see fit?
It was awesome. I hope I can add eslint and prettier here
Now how do we deploy this? Say instead of React we had a Next.js front-end. How would we configure this so that we can host the Next app on Vercel and the backend Express app on, say, Railway or Heroku?
is it possible or does it make any difference when i rename the 'package' folder into 'apps' folder?
Good stuff, can you also tell me about the ci/cd setup of this. I am planning to use turborepo too.
Awesome video 💪🏻
Hi, great video! Is there a way I can have a folder just for my types that I can share between projects?
For sure! Just create another project in the `/packages` directory called "shared-types" or something along those lines. It's a common pattern when developing both the front and back end in tandem.
Occasionally it's even useful to have utility functions available to both (so more than just types).
For example if you have a function that determines data that only a user of a certain role has access to, on the back end you can use it to validate that data is only served to the correct users, and on the front end you could use that same function to conditionally render some component that only certain roles can see.
@@AlexEagleson i'm experimenting with a shared types folder at the moment. But i got stuck with "is not under 'rootDir'". It's probably some ts config :/
Apparently Lerna is dead now, maybe Turborepo with pnpm good for monorepo. Keep posting!
lerna has been revived, check it out
Love the idea of shared types for Typescript but i kind of wish monorepos had merged history with a prefix in the commit describing the package being changed ex: simple-react-app: Josh: made this commit, simple-node-app: Josh: made this commit all in one timeline. Last thing i want is 20 repos that are connected but all have different history trails been there it sucks. It's hard when you change one app and other apps that are connected randomly break you have to try to stitch together the history of multiple repos to see where it broke.
Or just use Nx
Or just use Turborepo!