July 2022 Summaries

The article provides a comprehensive guide to setting up a monorepo using PNPM workspaces to host a Remix application and a React-based library, with a focus on incorporating Nx for advanced task scheduling, caching, and dependency management. It begins by outlining the process of initializing a PNPM workspace, setting up the monorepo structure with separate folders for applications and packages, and creating a Remix application. The guide also covers the creation of a shared UI library using React and TypeScript, and demonstrates how to consume this library in the Remix application. It discusses running commands with PNPM and introduces Nx to optimize task execution through features like parallel processing, computation caching, and task dependencies. The document further explains how to configure caching, define task dependencies, and leverage Nx's project graph visualization for better workspace management. Additional benefits of using Nx, such as dynamic terminal output and the potential for automation through generators, are also explored.

The recent updates to Nx include several enhancements aimed at reducing configuration duplication and improving performance. A key change is the renaming of "targetDependencies" to "targetDefaults," which now allows users to define sensible defaults for project configurations centrally, streamlining processes like building and testing. The update introduces a more concise syntax for dependency management, enabling efficient task scheduling by building project dependencies automatically. Enhancements also include the addition of input patterns to improve cache hits by avoiding invalidation when irrelevant files change, and the introduction of named inputs for reusability across multiple targets. This release further optimizes workspace configuration calculations by offloading them to the Nx Daemon, improving command execution time in large workspaces. Additionally, a new environment variable, NX_PROJECT_GRAPH_CACHE_DIRECTORY, is introduced to manage project graph cache storage, and updates to Angular support include generating Storybook stories for standalone components and upgrading to @angular-eslint version 14. Users are encouraged to update their Nx workspaces to the latest version using specific commands and to stay informed about upcoming features through social media and newsletters.