Use pnpm Filter Commands to Run App Scripts From the Workspace Root

Share this video with your friends

Send Tweet
Published 5 months ago
Updated 19 hours ago

You can use pnpm's --filter flag to run scripts in any app in your monorepo from the root of the project.

All you have to do is ensure that each of your app's have name set in their package.json file. Then you can run, for example, pnpm --filter my-remix-app dev.

Instructor: [0:00] So far, this PNPM workspace hosts a single remix application, which is located here in the apps folder and in the my remix app folder. What is application already has, it comes with some scripts that remix sets up for you by default. [0:15] Now to launch the remix application, what we can obviously do is we can just see the Internet apps folder. Go to my remix app and then do something like PNPM run build, for instance, to build the application or desk to serve it.

[0:32] That's usually not what you want to do. You don't want to have the CD into every single vacation just to run it and serve it. You can also do that at the global level from the root level perspective of this mono repo set up by using PNPM filter commands. The syntax here is basically the following. You run pnpm then --filter, you give it the package name and then you give it a command. Let's have a look.

[0:57] In our case, the package name of the Remix app is determined by the name that is present in a package.json. Now, as of this recording, Remix doesn't generate any type of package name. Let's add one.

[1:09] Just to make things simple, let's call this My Remix app just the same way as our folder. And so now with this, we should be able to run the Remix build from the root level of the workspace by issuing one of those filter commands.

[1:24] We can run pnpm --filter. Now I give it a name My Remix app, just what we specified in the package.json. Then let's say, we want to say built and this should run the build of the Remix app which does. We could also do dev, which would then run the remix app at localhost:3000.

[1:43] If we go there and refresh the page, we see the app serving there. You can see how you can leverage those filter commands to target specific commands living inside the packages script section of the package.json.

~ a month ago

Lesson needs closed captions