Migrate NPM Scripts to Turborepo Pipelines
With our npm scripts, if utils can't build, then the dashboard and blog can't build or run their tests. Turborepo Pipelines changes that. Using the pipeline, we can set up caching, what our scripts depend on, and where we want our logs to be output.
Also since we now have Turborepo installed and configured our pipelines, we can remove concurrently from our scripts and dependencies.
Instructor: [0:00] The monorepo currently has three packages, the blog package, the dashboard package, and the utils package. The blog package is a Next.js application. The dashboard package is a Vue.js application. The utils package is a TypeScript library that is built with TS app. Blog and dashboard consume the compiled version of utils. [0:28] The workflow is this. Utils builds TypeScript to JavaScript. Then, dashboard and blog consume the JavaScript version of utils. If utils for some reason fails to build, then dashboard and blog should fail to build as well. The same is true for the tests. If utils fails to build, then dashboard and blog should fail as well.
[0:58] Let's begin by adding the def pipeline. Let's add def, and we're going to tell turborepo to not cache it. Now we're going to add the build pipeline. Here, we want turborepo to cache it, so we don't have to specify that explicitly, and we add this dependsOn array.
[1:26] As we just said, the build command depends on other build commands. To specify that, we need to add the caret before the build command. This means that I want to run the build command in the dependencies first and then in the package itself.
[1:48] For instance, if we are running build in the dashboard package, we want to run build in its dependencies, that means in the utils package. Once that is done, we want to run build in the dashboard package. We also want to specify what are the outputs.
[2:12] Because we have our nextjs application, and we have our vite application, and also we have the tsup, we know that the output for the nextjs application is the .next folder, the output for the vitejs application and the tsup is the dist folder.
[2:34] The test pipeline is similar to the build one. Here, we want to make sure that the build command execute successfully in the dependencies. Once that is OK, then we can run test.
[2:50] The last pipeline that we want to build is the typecheck pipeline. This pipeline doesn't have any dependencies or anything in the other packages of the monorepo. It can run basically by itself. We don't specify anything else inside the configuration object.
[3:09] The way that Turborepo pipelines work is this. If we have a dev pipeline, then Turborepo is going to look for the dev script in each one of the projects, in this case, dashboard and blog. We also have the utils package, but I didn't put it here because of space constraints. When Turborepo finds the build pipeline, it looks for build in dashboard and blog.
[3:37] Next, let's say that we have typecheck here. Turborepo is going to look for typecheck in the dashboard scripts or in the blog scripts. Because it doesn't find it, it will just ignore it.
[3:51] The idea behind pipelines is that we have to map the pipeline name one-to-one to the scripts that we have in each one of our packages. That is why it's important for us to be consistent. We should call the dev script dev in dashboard, in blog, and in every single package of the monorepo. Same goes for build, typecheck, etc.
[4:18] Now, let's replace this with turbo run dev. This check command is composed by test and typecheck. Let's change this to turbo run test and typecheck. Last, but not the least, let's remove concurrently because we don't need that anymore.
[4:46] Now, to prove that everything is working, let's run npm run dev. If we scroll a bit up, we'll see that we are running dev in the blog project, dev in the utils project, and dev in the dashboard project all at the same time without using any external tool but Turborepo.
[5:07] Now, let's run check. If we scroll all the way to the top, we see that we are running dashboard typecheck, blog typecheck. We started to run utils test, then utils build, utils typecheck. We keep executing utils test.
[5:27] Let's scroll down. We're running the blog typecheck, the dashboard typecheck, utils typecheck. Then, we start running utils build. Only once utils build finish Turborepo start running dashboard test and blog test. This is because how dependencies work and how Turborepo handles them.
[5:51] To recap, we explained how the dependencies work in our project. Blog and dashboard depend on the utils package. We know that utils has to be built from TypeScript to JavaScript so then dashboard and blog can use It.
[6:11] We also saw how the pipelines work. Turborepo matches one-to-one, from the pipeline name to the npm script inside each one of the packages. For instance, it maps dev to dev, dev to dev, and build to build, build to build.
[6:30] In this case, we have typecheck just for this example. Because dashboard and blog doesn't know anything about typecheck, Turborepo just ignores it. Here, we replaced concurrently with turbo. We uninstalled concurrently from the project.