Whenever we have to develop multiple interdependent npm packages in parallel, we have two options: What is a monorepo and why is it useful? #
#Monorepo npm workspaces code
Tip: What to do when Visual Studio Code doesn’t see changes in another package.A better solution: npm workspaces and TypeScript project references.My first failed attempt: local path installations.My use case for a monorepo: static site generation.What is a monorepo and why is it useful?.All we need is already built into npm and TypeScript.
#Monorepo npm workspaces how to
In this blog post, we’ll explore how to set up a simple monorepo for two npm packages. Here’s some confetti to celebrate.A monorepo is a single repository that is used to manage multiple projects. In the next article, we’ll create build pipelines and enable caching by adding Turborepo. You’ve successfully created a monorepo with 2 apps and a package. When making changes to the component, both applications will refresh. Use the same component in our admin application. Run ‘ yarn init‘ in ‘apps/client’, walk through the steps, and create a homepage that renders a header.Īpps/client/pages/index.js const Home = () => from 'ui' If not, you can follow their excellent getting started tutorial. From this point onwards, I’m assuming you have some (very basic) knowledge of Next.js. Set up two applications in the same monorepo
#Monorepo npm workspaces install
Now, run ‘ yarn‘ (in the root of the repository), Yarn will go over all workspaces and install the dependencies, based on the lockfile.Ģ. Navigate back to the root of the project and remove all installed dependencies by running ‘ rm -rf node_modules‘. Let’s verify that everything works as expected. Install prettier as a root dependency by adding the ‘-W’ flag: ‘ yarn add prettier -W -D‘ (we’ve also added the -D flag because it’s also a devDependency). We might want to install a dependency that is not tied to a specific workspace. You can install dependencies in the root of a workspace, too. When installing dependencies in a specific workspace, Yarn moves them to the root of your repository and manages the lockfile there. You’ll notice that the ‘node_modules’ folder remains empty (there might be a ‘.bin’ folder, but it shouldn’t contain any dependencies). Install the packages we need by running ‘ yarn react react-dom next‘. ‘ cd‘ into the ‘client’ directory and run ‘ yarn init‘. It’s required for Yarn workspaces to work and acts as a safeguard. The ‘private’ field indicates that you can’t publish this package to a registry. By enabling Yarn workspaces, Yarn moves all dependencies to the root ‘node_modules’ folder, manages a single lockfile, and deduplicates dependencies if possible. Usually, this would resolve in multiple lock files and ‘node_modules’ folders. We will create Next.js applications in ‘admin’ and ‘client’ each application will have its own ‘package.json’, listing the dependencies. This step is important if we want to add Turborepo later. Initialize a git repository by running ‘ git init‘ and make sure you have a ‘.gitignore’ file containing (at least) the following lines. Initializing a new monorepo with yarnĬreate a folder called ‘monorepo-101’, ‘ cd‘ into it, run ‘ yarn init‘, then walk through the initialization steps. Let’s start with managing dependencies and sharing code in part 1. Over the course of multiple articles, I’ll guide you through the process of setting up a monorepo using mentioned tools. There has never been a better time to jump in than now. Features like Yarn workspaces and tools like Lerna, NX, and Turborepo (which was acquired by Vercel) are in a pretty stable phase and can help you address those issues. Luckily, tooling has improved leaps and bounds over the last couple of years. I’ve really learned to love a good monorepo setup, a repository that contains multiple packages and/or applications.īeing able to make changes across applications or packages in 1 pull request (PR), having the option to centralize and reuse code over applications, and unifying documentation and processes greatly simplifies the daily task of finding your way across multiple projects.Ī monorepo comes with its own level of complexity and prompts questions such as:
0 kommentar(er)
