Improve the DX of an NPM Workspaces Monorepo with Task Pipelines and Caching

In this video we're going to setup so-called "task pipelines" and "task caching" to enhance the DX of your existing monorepo. I'm using an NPM workspaces monorepo specifically, but it'd also apply to Yarn or PNPM workspaces in the very same way.

One of the issues you might encounter in an NPM workspace monorepo is that you have dependencies among projects. Like in this example I'm showing, there's a Vite based React app which depends on a shared-ui package. As such when you serve or build your React app, you need to make sure to have shared-ui built first. A task pipeline can automate that process.

Finally, we're going to also configure caching for our build tasks to speed up our monorepo. Task caching avoids re-running the same task if the underlying input (the src and other files) haven't changed.