Levelling up Monorepos with npm Workspaces

Rate this content
Bookmark

Learn more about how to leverage the default features of npm workspaces to help you manage your monorepo project while also checking out some of the new npm cli features.

Ruy Adorno
Ruy Adorno
25 min
20 Jun, 2022

Comments

Sign in or register to post your comment.

Video Summary and Transcription

This Talk provides an introduction to NPM Workspaces and covers various aspects of using them, including starting a workspace with npm init, adding dependencies, forcing correct library versions, running scripts and orchestrating in a monorepo, and using npm pkg and npm exec. The examples provided demonstrate real-life use cases and highlight the flexibility and control that NPM Workspaces offer. The speaker also mentions improvements and future developments in the NPM CLI, emphasizing the importance of correct declarations in the package.json file and the ability to manage data across all workspaces.

1. Introduction to NPM Workspaces

Short description:

Hello, and welcome to Leveling Up Monorepos with NPM Workspaces. Let me start by introducing myself. My name is Rui Adorno. I'm a software developer in the NPM CLI team of GitHub. I have been working on the NPM CLI for almost three years now. I work on the NPM v7 rewrite and a lot of those features that we're going to be talking about here today, and especially workspaces.

Hello, and welcome to Leveling Up Monorepos with NPM Workspaces. Let me start by introducing myself. My name is Rui Adorno. I'm a software developer in the NPM CLI team of GitHub. I have been working on the NPM CLI for almost three years now. I work on the NPM v7 rewrite and a lot of those features that we're going to be talking about here today, and especially workspaces. So, I'm super excited to be sharing some of that work with you here today.

And let's start with an overview what we're going to be covering here today. Let's start with an intro to what is NPM Workspaces and then cover some very practical examples with trying to get as close to real-life usage as possible and also note some of the stuff that you should be looking forward to. So, let's get started.

NPM Workspaces. What is it? So, let's start with Workspaces, which is basically this concept introduced by Yarn a while ago, and basically it is a way to help you manage many packages within a single repo. And for NPM, NPM Workspaces is kind of the broad name we gave the set of features that help you achieve that. Basically help you manage multiple nested packages within a single top level package. So, it's going to help you centralize the installation of all the dependencies into a single Node Modules folder, so you're going to end up also having only a single package log file. And there are some advantages to that. It is definitely the ideal way for managing Monorepos, and thanks to that, you can have a single place to manage all your issues and basically manage your project and your community. So, but also into the technical side, you can also centralize, have a single place to run all your tests, peer, linting, anything that you can kind of imagine. You kind of need everything together to get your project running with all the packages. You can have it all in a single place. So it might help a lot depending on the style of the project you're trying to achieve. So another thing I would like to note here is timeline just to give a little bit of this notion of how we've been iteratively improving on NPM workspaces. And you can see it all started in August, 2020 with the release of the release 7.0 of the NPM CLI that first introduced support to installing NPM the workspaces. And then in version 7.7, another big one which kinda first introduced the configuration properties of a workspace or targeting all the workspaces and the first command that support them with NPM run and NPM exec. So there weren't many more, but I just kinda wanted to illustrate how we've been improving and you can definitely keep waiting, you can definitely wait to see more improvements coming on NPM workspaces.

So let's get started with some examples here. I have this project that I have on the left-hand side here that is a sample app that I've put together trying to get as close as possible for real-life project. This is kind of like a web app that consists in two different services. So you can see, I have my user sync service, my web app service, and I even configure a third workspace here, which is the slides that you're seeing right now. So they're all part of this monorepo app that I'm managing here.

2. Using npm init to Start a Workspace

Short description:

And with that, I hope to put some examples that are real close to how you would use this in your real life. So you can see they all have a bunch of dependencies here using Next.js, the services using Fastify. Moving forward, I'd like to highlight npm init. It's probably the best way of just starting your workspace because it's going to make sure every step that is needed is going to end up being there.

And with that, I hope to put some examples that are real close to how you would use this in your real life. So you can see they all have a bunch of dependencies here using Next.js, the services using Fastify. So I can just quickly start by running NPM ls here and we can see how, and ls is a command that is aware of workspaces and it's going to highlight each of the workspaces in my project and even list the dependencies of each workspace when I run an NPM ls. So it's the first command to know that has first class support to workspaces.

So moving forward here, I'd like to highlight npm init. It's probably the best way of just starting your workspace because it's going to make sure every step that is needed is going to end up being there. So basically everything you need to track a nested package as a workspace is make sure you have the folder with a package JSON inside it, inside your project, and then just add the folder name to your workspaces field of your package JSON in the top level. So using npm init is going to make sure that those requirements are there. So I'm gonna run a quick example here in my sample app, I'm gonna create a new workspace. Let's say I'm gonna call it the website. So I can run npm init, I'm using dash Y here to just accept all the defaults and I'm targeting a website. So that's going to create a website folder with a package.json file inside it, and it's going to print the contents of the package.json file over here. And as I mentioned before, the other really important point that npm init takes care of is placing the reference to the website inside my package.json file in my top level folder. So with that, it is all set up. If I npm install here, now the install tree is going to be tracking the website. And if I run npm ls again, I'm going to see website listed as one of the workspaces here highlighted in green. So that is definitely the recommended way to get started with a new workspace inside your project.

Check out more articles and videos

We constantly think of articles and videos that might spark Git people interest / skill us up or help building a stellar career

Levelling up Monorepos with npm Workspaces
DevOps.js Conf 2022DevOps.js Conf 2022
33 min
Levelling up Monorepos with npm Workspaces
Top Content
Learn more about how to leverage the default features of npm workspaces to help you manage your monorepo project while also checking out some of the new npm cli features.
End the Pain: Rethinking CI for Large Monorepos
DevOps.js Conf 2024DevOps.js Conf 2024
25 min
End the Pain: Rethinking CI for Large Monorepos
Scaling large codebases, especially monorepos, can be a nightmare on Continuous Integration (CI) systems. The current landscape of CI tools leans towards being machine-oriented, low-level, and demanding in terms of maintenance. What's worse, they're often disassociated from the developer's actual needs and workflow.Why is CI a stumbling block? Because current CI systems are jacks-of-all-trades, with no specific understanding of your codebase. They can't take advantage of the context they operate in to offer optimizations.In this talk, we'll explore the future of CI, designed specifically for large codebases and monorepos. Imagine a CI system that understands the structure of your workspace, dynamically parallelizes tasks across machines using historical data, and does all of this with a minimal, high-level configuration. Let's rethink CI, making it smarter, more efficient, and aligned with developer needs.
Federated Microfrontends at Scale
React Summit 2023React Summit 2023
31 min
Federated Microfrontends at Scale
Top Content
The talk will be a story of how Personio went from rendering through a Monolithical PHP architecture, to a microfrontend oriented Next JS app, powered by Module Federation and the NX monorepo toolchain.
Scale Your React App without Micro-frontends
React Summit 2022React Summit 2022
21 min
Scale Your React App without Micro-frontends
As your team grows and becomes multiple teams, the size of your codebase follows. You get to 100k lines of code and your build time dangerously approaches the 10min mark 😱 But that’s not all, your static CI checks (linting, type coverage, dead code) and tests are also taking longer and longer...How do you keep your teams moving fast and shipping features to users regularly if your PRs take forever to be tested and deployed?After exploring a few options we decided to go down the Nx route. Let’s look at how to migrate a large codebase to Nx and take advantage of its incremental builds!
The Age of Monorepos
JSNation 2022JSNation 2022
25 min
The Age of Monorepos
The history of the web can be divided into evolutionary development leaps. The age of inline scripts, the age of jQuery, the age of SPAs, the age of JAMStack...We are now entering the next stage that has been carefully prepared in the past few years. Let me invite you to the world of modern monorepo solutions and share with you the benefits you will reap by using them in every project size and setup. It's time you automate those boilerplate tasks and reduce the bottlenecks so you can focus on what truly matters.Get ready for the next leap! Welcome to the age of monorepos!
Remixing Your Stack in a Monorepo Workspace
Remix Conf Europe 2022Remix Conf Europe 2022
22 min
Remixing Your Stack in a Monorepo Workspace
Remix entered the stage with a unique and refreshing take on how to develop on the web. But how do you integrate it into your existing ecosystem of applications? Do you want to test-drive Remix on a small project, or do you want to go full-in, but it is tricky to do a big-bang migration from your existing React app? In this talk, we're going to explore how a monorepo-based code organization can help integrate Remix with your existing React and TypeScript infrastructure, facilitating high code reuse and a migration path to Remix.

Workshops on related topic

React at Scale with Nx
React Summit 2023React Summit 2023
145 min
React at Scale with Nx
Top Content
Featured WorkshopFree
Isaac Mann
Isaac Mann
We're going to be using Nx and some its plugins to accelerate the development of this app.
Some of the things you'll learn:- Generating a pristine Nx workspace- Generating frontend React apps and backend APIs inside your workspace, with pre-configured proxies- Creating shared libs for re-using code- Generating new routed components with all the routes pre-configured by Nx and ready to go- How to organize code in a monorepo- Easily move libs around your folder structure- Creating Storybook stories and e2e Cypress tests for your components
Table of contents: - Lab 1 - Generate an empty workspace- Lab 2 - Generate a React app- Lab 3 - Executors- Lab 3.1 - Migrations- Lab 4 - Generate a component lib- Lab 5 - Generate a utility lib- Lab 6 - Generate a route lib- Lab 7 - Add an Express API- Lab 8 - Displaying a full game in the routed game-detail component- Lab 9 - Generate a type lib that the API and frontend can share- Lab 10 - Generate Storybook stories for the shared ui component- Lab 11 - E2E test the shared component
Node Monorepos with Nx
Node Congress 2023Node Congress 2023
160 min
Node Monorepos with Nx
Top Content
WorkshopFree
Isaac Mann
Isaac Mann
Multiple apis and multiple teams all in the same repository can cause a lot of headaches, but Nx has you covered. Learn to share code, maintain configuration files and coordinate changes in a monorepo that can scale as large as your organisation does. Nx allows you to bring structure to a repository with hundreds of contributors and eliminates the CI slowdowns that typically occur as the codebase grows.
Table of contents:- Lab 1 - Generate an empty workspace- Lab 2 - Generate a node api- Lab 3 - Executors- Lab 4 - Migrations- Lab 5 - Generate an auth library- Lab 6 - Generate a database library- Lab 7 - Add a node cli- Lab 8 - Module boundaries- Lab 9 - Plugins and Generators - Intro- Lab 10 - Plugins and Generators - Modifying files- Lab 11 - Setting up CI- Lab 12 - Distributed caching
Finding, Hacking and fixing your NodeJS Vulnerabilities with Snyk
JSNation 2022JSNation 2022
99 min
Finding, Hacking and fixing your NodeJS Vulnerabilities with Snyk
WorkshopFree
Matthew Salmon
Matthew Salmon
npm and security, how much do you know about your dependencies?Hack-along, live hacking of a vulnerable Node app https://github.com/snyk-labs/nodejs-goof, Vulnerabilities from both Open source and written code. Encouraged to download the application and hack along with us.Fixing the issues and an introduction to Snyk with a demo.Open questions.
Build Web3 apps with React
React Summit 2022React Summit 2022
51 min
Build Web3 apps with React
WorkshopFree
Shain Dholakiya
Shain Dholakiya
The workshop is designed to help Web2 developers start building for Web3 using the Hyperverse. The Hyperverse is an open marketplace of community-built, audited, easy to discover smart modules. Our goal - to make it easy for React developers to build Web3 apps without writing a single line of smart contract code. Think “npm for smart contracts.”
Learn more about the Hyperverse here.
We will go over all the blockchain/crypto basics you need to know to start building on the Hyperverse, so you do not need to have any previous knowledge about the Web3 space. You just need to have React experience.