nrwl · jaysoo · Apr 29, 2025 · Apr 28, 2025 · Apr 28, 2025 · Apr 29, 2025
@@ -13,7 +13,7 @@
   "devDependencies": {
     "tslib": "^2.8.0",
     "typescript": "~5.5.2",
-    "nx": "20.6.4"
+    "nx": "20.8.1"
   },
   "dependencies": {}
-}
+}
@@ -11,11 +11,11 @@
   "author": "",
   "license": "ISC",
   "devDependencies": {
-    "@nx/js": "^20.6.4",
+    "@nx/js": "^20.8.1",
     "@swc-node/register": "~1.9.1",
     "@swc/core": "~1.5.7",
     "@swc/helpers": "~0.5.11",
-    "nx": "20.6.4",
+    "nx": "20.8.1",
     "tslib": "^2.8.0",
     "typescript": "~5.5.2"
   },

@@ -5,7 +5,7 @@ focus: /nx.json
 previews:
   - {
       port: 4211,
-      title: 'Nx Graph',
+      title: 'Project Details',
       pathname: 'project-details/%40tuskdesign%2Fzoo',
     }
 ---

@@ -11,12 +11,12 @@
   "author": "",
   "license": "ISC",
   "devDependencies": {
-    "@nx/js": "^20.6.4",
+    "@nx/js": "^20.8.1",
     "@swc-node/register": "~1.9.1",
     "@swc/core": "~1.5.7",
     "@swc/helpers": "~0.5.11",
     "@types/node": "18.16.9",
-    "nx": "20.6.4",
+    "nx": "20.8.1",
     "tslib": "^2.8.0",
     "typescript": "~5.5.2"
   },

@@ -5,7 +5,7 @@ focus: /nx.json
 previews:
   - {
       port: 4211,
-      title: 'Nx Graph',
+      title: 'Project Details',
       pathname: 'project-details/%40tuskdesign%2Fzoo',
     }
 ---

@@ -4,7 +4,7 @@ title: Checkpoint
 previews:
   - {
       port: 4211,
-      title: 'Nx Graph',
+      title: 'Task Graph',
       pathname: 'tasks/serve?projects=%40tuskdesign%2Fzoo',
     }
 ---

@@ -40,6 +40,10 @@ export default [
               sourceTag: "scope:shared",
               onlyDependOnLibsWithTags: ["scope:shared"]
             },
+            {
+              sourceTag: "*",
+              onlyDependOnLibsWithTags: ["*"]
+            },
           ],
         },
       ],

@@ -0,0 +1,20 @@
+{
+  "name": "@react-monorepo/orders",
+  "version": "0.0.1",
+  "main": "./src/index.ts",
+  "types": "./src/index.ts",
+  "exports": {
+    ".": {
+      "types": "./src/index.ts",
+      "import": "./src/index.ts",
+      "default": "./src/index.ts"
+    },
+    "./package.json": "./package.json"
+  },
+  "nx": {
+    "tags": [
+      "type:feature",
+      "scope:orders"
+    ]
+  }
+}
@@ -0,0 +1,20 @@
+{
+  "name": "@react-monorepo/products",
+  "version": "0.0.1",
+  "main": "./src/index.ts",
+  "types": "./src/index.ts",
+  "exports": {
+    ".": {
+      "types": "./src/index.ts",
+      "import": "./src/index.ts",
+      "default": "./src/index.ts"
+    },
+    "./package.json": "./package.json"
+  },
+  "nx": {
+    "tags": [
+      "type:feature",
+      "scope:products"
+    ]
+  }
+}
@@ -0,0 +1,15 @@
+import styles from './products.module.css';
+
+// This import is not allowed 👇
+import { Orders } from '@react-monorepo/orders';
+
+export function Products() {
+  return (
+    <div className={styles['container']}>
+      <h1>Welcome to Products!</h1>
+      <p>This is a change. 👋</p>
+    </div>
+  );
+}
+
+export default Products;
@@ -0,0 +1,20 @@
+{
+  "name": "@react-monorepo/ui",
+  "version": "0.0.1",
+  "main": "./src/index.ts",
+  "types": "./src/index.ts",
+  "exports": {
+    ".": {
+      "types": "./src/index.ts",
+      "import": "./src/index.ts",
+      "default": "./src/index.ts"
+    },
+    "./package.json": "./package.json"
+  },
+  "nx": {
+    "tags": [
+      "type:ui",
+      "scope:shared"
+    ]
+  }
+}
@@ -22,7 +22,7 @@ When building these kinds of constraints you usually have two dimensions:
 
 Nx comes with a generic mechanism that allows you to assign "tags" to projects. "tags" are arbitrary strings you can assign to a project that can be used later when defining boundaries between projects. For example, go to the `package.json` of your `orders` library and assign the tags `type:feature` and `scope:orders` to it.
 
-```json title="libs/orders/package.json"
+```solution:/libs/orders/package.json title="/libs/orders/package.json" collapse={2-13}
 {
   ...
   "nx": {
@@ -33,7 +33,7 @@ Nx comes with a generic mechanism that allows you to assign "tags" to projects.
 
 Then go to the `package.json` of your `products` library and assign the tags `type:feature` and `scope:products` to it.
 
-```json title="libs/products/package.json"
+```solution:/libs/products/package.json title="/libs/products/package.json" collapse={2-13}
 {
   ...
   "nx": {
@@ -44,7 +44,7 @@ Then go to the `package.json` of your `products` library and assign the tags `ty
 
 Finally, go to the `package.json` of the `shared-ui` library and assign the tags `type:ui` and `scope:shared` to it.
 
-```json title="libs/shared/ui/package.json"
+```solution:/libs/shared/ui/package.json title="/libs/shared/ui/package.json" collapse={2-13}
 {
   ...
   "nx": {
@@ -64,75 +64,14 @@ Next, let's come up with a set of rules based on these tags:
 
 To enforce the rules, Nx ships with a custom ESLint rule. Open the `eslint.config.mjs` at the root of the workspace and add the following `depConstraints` in the `@nx/enforce-module-boundaries` rule configuration:
 
-```js title="eslint.config.mjs"
-import nx from '@nx/eslint-plugin';
-
-export default [
-  // ...
-  {
-    files: ['**/*.ts', '**/*.tsx', '**/*.js', '**/*.jsx'],
-    rules: {
-      '@nx/enforce-module-boundaries': [
-        'error',
-        {
-          enforceBuildableLibDependency: true,
-          allow: ['^.*/eslint(\\.base)?\\.config\\.[cm]?js$'],
-          depConstraints: [
-            {
-              sourceTag: 'type:feature',
-              onlyDependOnLibsWithTags: ['type:feature', 'type:ui'],
-            },
-            {
-              sourceTag: 'type:ui',
-              onlyDependOnLibsWithTags: ['type:ui'],
-            },
-            {
-              sourceTag: 'scope:orders',
-              onlyDependOnLibsWithTags: [
-                'scope:orders',
-                'scope:products',
-                'scope:shared',
-              ],
-            },
-            {
-              sourceTag: 'scope:products',
-              onlyDependOnLibsWithTags: ['scope:products', 'scope:shared'],
-            },
-            {
-              sourceTag: 'scope:shared',
-              onlyDependOnLibsWithTags: ['scope:shared'],
-            },
-            {
-              sourceTag: '*',
-              onlyDependOnLibsWithTags: ['*'],
-            },
-          ],
-        },
-      ],
-    },
-  },
-  // ...
-];
+```solution:/eslint.config.mjs title="/eslint.config.mjs" collapse={1-2,4-9,52-65}
+
 ```
 
 To test it, go to your `libs/products/src/lib/products.tsx` file and import the `Orders` component from the `orders` project:
 
-```tsx title="libs/products/src/lib/products.tsx"
-import styles from './products.module.css';
-
-// This import is not allowed 👇
-import { Orders } from '@react-monorepo/orders';
-
-export function Products() {
-  return (
-    <div className={styles['container']}>
-      <h1>Welcome to Products!</h1>
-      <p>This is a change. 👋</p>
-    </div>
-  );
-}
+```solution:/libs/products/src/lib/products.tsx title="/libs/products/src/lib/products.tsx"
 
-export default Products;
 ```
 
 If you lint your workspace you'll get an error now:

@@ -7,10 +7,10 @@ export default defineConfig({
       cypressDir: 'src',
       bundler: 'vite',
       webServerCommands: {
-        default: 'npx nx run @react-monorepo/react-store:dev',
-        production: 'npx nx run @react-monorepo/react-store:preview',
+        default: 'npx nx run react-store:dev',
+        production: 'npx nx run react-store:preview',
       },
-      ciWebServerCommand: 'npx nx run @react-monorepo/react-store:preview',
+      ciWebServerCommand: 'npx nx run react-store:preview',
       ciBaseUrl: 'http://localhost:4300',
     }),
     baseUrl: 'http://localhost:4200',

@@ -3,10 +3,8 @@
   "version": "0.0.1",
   "private": true,
   "nx": {
-    "projectType": "application",
-    "sourceRoot": "apps/react-store-e2e/src",
     "implicitDependencies": [
-      "@react-monorepo/react-store"
+      "react-store"
     ]
   }
 }
@@ -1,5 +1,8 @@
 {
   "name": "@react-monorepo/react-store",
   "version": "0.0.1",
-  "private": true
+  "private": true,
+  "nx": {
+    "name": "react-store"
+  }
 }
@@ -1,8 +1,8 @@
 {
   "extends": "../../tsconfig.base.json",
   "compilerOptions": {
-    "outDir": "out-tsc/react-store",
-    "tsBuildInfoFile": "out-tsc/react-store/tsconfig.app.tsbuildinfo",
+    "outDir": "dist",
+    "tsBuildInfoFile": "dist/tsconfig.app.tsbuildinfo",
     "jsx": "react-jsx",
     "lib": ["dom"],
     "types": [

@@ -5,7 +5,11 @@ export default [
   ...nx.configs['flat/typescript'],
   ...nx.configs['flat/javascript'],
   {
-    ignores: ['**/dist'],
+    ignores: [
+      '**/dist',
+      '**/vite.config.*.timestamp*',
+      '**/vitest.config.*.timestamp*',
+    ],
   },
   {
     files: ['**/*.ts', '**/*.tsx', '**/*.js', '**/*.jsx'],