Intro to Monorepos with NPM Workspaces Outro
Thank you for completing my course!
You’ve learned what monorepos are, how to create them from scratch, how to install different projects inside of it, and how to run different scripts inside of a monorepo.
So where do you go from here? I suggest creating your own Monorepo project template and publish it on Github. Take a look at Yarn Workspaces, pnpm, Learna, Nx and Turborepo for different monorepo tools.
I also highly suggest Migrating some of your existing projects to a monorepo. Have a main frontend application that consumes a shared UI library package and a backend service. Another way would be to have a backend service, a mobile application and a frontend application.
Best of luck and happy coding!
Instructor: [0:00] Hey, thanks for completing the course. We have learned what monorepos are, how to create a monorepo from scratch using npm workspaces. We also learn how to install different projects inside a monorepo.
[0:14] In this case, we used Next.js, we used Bit, and we used tsup, but you can use whatever you want. You can use Vue, you can use [inaudible], you can even create a mobile project using React Native. We also learned how to run different scripts in a monorepo. We took a look at how to create a script that takes care of the quality of a project, that runs the tests and the type checks for the project.
[0:41] Where you can go from here? A good way to learn about monorepos is create your own. I would suggest you to create a GitHub project and start doing things.
[0:53] For instance, you can take a look at the Next.js project if you need any inspiration. Once you have the project ready, you can create a GitHub template so you can use it in every project you want. I would recommend you to take a look at Yarn workspaces, pnpm, Lerna, Nx, and Turborepo, as those are all the ways to create monorepos in JavaScript.
[1:18] If you want to solidify your knowledge about monorepos, I would suggest you to migrate existing projects into a monorepo. One good example is to grab a front-end application that consumes a shared UI library package, move those projects into the monorepo, and go from there.
[1:36] Another good project to tackle is to move a back-end service, maybe a mobile application, and a front-end application into one single repository. I hope you have fun.
Hi, Thanks you for the intro course.
I have few questions and would like to know your view on the same:
Q1: It is a similar question to Xiao Li; So CI/CD runs for all the apps if we push to the mono repo? Is there a process or way to do it the correct way, I really do not want to deploy all apps if I updated the utils library.
Q2: How does the lint-ing work? Can it be implemented differently across different libraries/app or can it be defined for all apps in the root? What if some libraries have similar linting and some has different standards?
Q3: I am trying to dig deep into release management. Any ideas of how it can be maintained?
Q4: How about publishing the monorepo to npm?
Apologies if the questions are naive.
Sincerely, Tirth
@Xiao 👋
re: version control: the idea of having a monorepo, is that you only have one repository for all your projects. The root .git directory should “control” all the multiple projects you have in your monorepo. Is there anything particular you’re having issues with?
re: pipelines Sadly with just NPM Workspaces there’s no way to avoid rebuilding the whole project if something changes. For that you’ll have to combine NPM Workspaces + Nx/Turborepo
Thanks for watching the course, 🙏
@Tirth 👋
Q1: CI/CD That’s not possible to achieve with just NPM Workspaces, for that you should use Lerna/Nx/Turborepo
Q2: Linting
You can have different ESLINT configurations per project, you’ll need to add an ESLINT configuration file to the root of each one of the projects. If you want a shared configuration, you can create a lib/lint folder (you can name it whatever you want) and then export different configs, for example, that project could have the following: next.eslint.js, tslib.eslint.js, base.eslint.js. Then you can import those configs in your projects.
Q3: release management I’d recommend checking out the resources listed here https://turborepo.org/docs/guides/monorepo-tools
Q4: Publishing ti NPM See the previous answer. Let me know if you have questions afterwards!
And those were great questions, thanks for asking! 🙏
@Alejandro, Thank you very much for the reply! It cleared things up for me.
When I created the the blog project, create-next-app automatically initialized blog as a git repo, so when I tried to git init from the monorepo, git was not happy. I went ahead and just removed the .git folder from blog to appease git. That made me wonder whether I should have a different version control strategy. Based on your reply, I believe it is quite clear that create-next-app was being too helpful and initialized blog as a repo. All we need to do is git init the monorepo.
Regarding pipelines, thank you for the pointers. I will be looking into Nx/Turborepo. If you ever make a course on these topics. I will definitely take them. I love how concise and informative your videos are.
🔥🔥🔥 lit!
This was amazing, Alejandro! ❤️
Short, crisp and to the point. 10/10 will recommend! 🙌
@Xiao I’m glad things are clear now! Stay tuned 😉
@Mrinmay thanks a lot 🙏🙏🙏
Thanks saved some time on exactly what I needed, have a project with vue2 and vue3 applications running simultaneosly, Just having some issues with the vite config finding the public folder when running npm run dev ... it doesn't get that the public is in the root and not within the app, any ideas on how to solve this? I've tried base, outDir, publicDir, but none seems to do the trick in dev, it works when I build
Love the short course, but it left me wanting more.
What about version control strategies? blog is already a git repo and adding to the root repo creates issues.
Also, what about bitbucket/github/gitlab pipeline configurations for a monorepo? We hopefully do not need the pipeline to rebuild the entire monorepo after making changes in one app or lib.
Requesting a follow up course to address these issues.
Best, Xiao