What are Monorepos

Configure NPM Workspaces in your Package.json

Install a Next.js and a Vite.js Applications Into a Monorepo

Add a TypeScript library to your Monorepo using TSUP

Run App Specific Commands in a Monorepo

Install Dependencies for Specific Packages in a Monorepo

Run Dev Scripts for All Packages Simultaniously

Share Code Between a Library and Applications Inside a Monorepo

Running Quality Checks in your Monorepo

Intro to Monorepos with NPM Workspaces Outro

Introduction to Monorepos with NPM Workspaces

In order to create applications inside our monorepo, we can use different CLI tools like create-next-app or the Vite CLI. We'll install them inside the apps folder. We will create a blog and a dashboard app, one using create-next-app and the other using the Vite CLI.

It is also important to note that the only package-lock.json file that should exist, exists at the root of the project.

https://app.egghead.io/api/v1/lessons/npm-install-a-next-js-and-a-vite-js-applications-into-a-monorepo/subtitles

Instructor: [0:00] Let's begin by creating an apps folder. All right. Now, we're going to create a Next.js application and for that, we're going to use create-next-app. This new application is going to be called blog and it will live inside apps. Then we have to specify that we want this to be a TypeScript application, that we also want to use npm.

[0:27] Now, we are creating a React application using Vite.js. Let's cd into apps. We're going to run npm create vite@latest. We are going to call this project dashboard. We want this project to be a React project. We also want this project to use TypeScript.

[0:51] We can go back to the root of the project. Let's open the blog/package.json file and let's update its name property. This is going to be called monorepo/blog. Let's do the same for the dashboard. Let's update its name to add monorepo/dashboard. Let's run npm install from the root of the project.

[1:19] All right. One thing that is worth noting is that blog doesn't have any package-lock.json file, and neither dashboard. We just have a package.json file inside here, and inside here. The only package-lock.json file that exists, it exists in the root of the project.

[1:42] If we take a look inside its package object, we'll see that we have a monorepo package, and we also have two more packages here. One is apps/blog and its name is monorepo/blog. We also have an apps/dashboard with its name set as monorepo/dashboard.

[2:04] To recap, in order to create applications inside our monorepo, we can use different CLI tools like create-next-app or the Vite CLI. We need to install them inside the apps folder. Here we have the blog. We also have the dashboard. It is also important to note that the only package-lock.json file that should exist, exists in the root of the project.

Install a Next.js and a Vite.js Applications Into a Monorepo

Share this video with your friends

Course

Introduction to Monorepos with NPM Workspaces