chore: fix tasks

Author: Coly010

.github/workflows/ci.yml

@@ -22,22 +22,25 @@ jobs:
       # This enables task distribution via Nx Cloud
       # Run this command as early as possible, before dependencies are installed
       # Learn more at https://nx.dev/ci/reference/nx-cloud-cli#npx-nxcloud-startcirun
-      # Uncomment this line to enable task distribution
-      # - run: npx nx start-ci-run --distribute-on="3 linux-medium-js" --stop-agents-after="e2e-ci"
+      - run: npx nx start-ci-run --distribute-on="3 linux-medium-js" --stop-agents-after="e2e-ci"
 
       # Cache node_modules
-      - uses: actions/setup-node@v4
+      - uses: pnpm/action-setup@v4
+        name: Install pnpm
         with:
-          node-version: 20
-          cache: 'npm'
+          run_install: false
 
-      - run: npm ci --legacy-peer-deps
+      - name: Install Node.js
+        uses: actions/setup-node@v5
+        with:
+          cache: 'pnpm'
+
+      - run: pnpm install
       - run: npx playwright install --with-deps
 
       # Prepend any command with "nx-cloud record --" to record its logs to Nx Cloud
       # - run: npx nx-cloud record -- echo Hello World
-      # When you enable task distribution, run the e2e-ci task instead of e2e
-      - run: npx nx run-many -t lint test build typecheck e2e
+      - run: npx nx run-many -t lint test build typecheck e2e-ci
       # Nx Cloud recommends fixes for failures to help you get CI green faster. Learn more: https://nx.dev/ci/features/self-healing-ci
       - run: npx nx fix-ci
-        if: always()
+        if: always()

.github/workflows/nx-migrate.yml

@@ -51,8 +51,6 @@ jobs:
         if: ${{ steps.nx-workspace-package-check.outputs.was-changed == 'true' }}
         uses: actions/setup-node@v5
         with:
-          # Use the volta.node property as the source of truth
-          node-version-file: 'package.json'
           cache: 'pnpm'
 
       - name: Run nx migrate if @nx/workspace changed and commit the results
@@ -80,7 +78,6 @@ jobs:
           # Sometimes Nx can require config formatting changes after a migrate command
           # We need to expect lock file changes to be applicable
           pnpm install --ignore-scripts --frozen-lockfile=false
-          pnpm nx format
 
           # migrations.json may or may not exist after running nx migrate
           if [ -f migrations.json ]; then
@@ -90,9 +87,6 @@ jobs:
             rm migrations.json
           fi
 
-          # Ensure all the changed files are formatted appropriately
-          pnpm format
-
           # Commit all the changes to the PR (see note on not being able to use secrets.GITHUB_TOKEN for this)
           git config --global user.email "[email protected]"
           git config --global user.name "Coly010"

.github/workflows/pr.yml

@@ -23,7 +23,7 @@ jobs:
         with:
           run_install: false
 
-      - name: Install Node.js per package.json
+      - name: Install Node.js
         uses: actions/setup-node@v5
         with:
           cache: 'pnpm'

README.md

@@ -1,12 +1,12 @@
-# Nx React Template Repository
+# Nx React Repository
 
 <a alt="Nx logo" href="https://nx.dev" target="_blank" rel="noreferrer"><img src="https://raw.githubusercontent.com/nrwl/nx/master/images/nx-logo.png" width="45"></a>
 
-✨ A template repository showcasing key [Nx](https://nx.dev) features for React monorepos ✨
+✨ A repository showcasing key [Nx](https://nx.dev) features for React monorepos ✨
 
 ## 📦 Project Overview
 
-This template demonstrates a production-ready React monorepo with:
+This repository demonstrates a production-ready React monorepo with:
 
 - **2 Applications**
   - `shop` - React e-commerce application with product listings and detail views
@@ -35,34 +35,34 @@ cd react-template
 npm install
 
 # Serve the React shop application
-nx serve shop
+npx nx serve shop
 
 # Serve the API backend
-nx serve api
+npx nx serve api
 
 # Build all projects
-nx run-many -t build
+npx nx run-many -t build
 
 # Run tests
-nx run-many -t test
+npx nx run-many -t test
 
 # Lint all projects
-nx run-many -t lint
+npx nx run-many -t lint
 
 # Run e2e tests
-nx e2e shop-e2e
+npx nx e2e shop-e2e
 
 # Run tasks in parallel
 
-nx run-many -t lint test build e2e --parallel=3
+npx nx run-many -t lint test build e2e --parallel=3
 
 # Visualize the project graph
-nx graph
+npx nx graph
 ```
 
 ## ⭐ Featured Nx Capabilities
 
-This template showcases several powerful Nx features:
+This repository showcases several powerful Nx features:
 
 ### 1. 🔒 Module Boundaries
 
@@ -78,10 +78,10 @@ Enforces architectural constraints using tags. Each project has specific depende
 **Try it out:**
 ```bash
 # See the current project graph and boundaries
-nx graph
+npx nx graph
 
 # View a specific project's details
-nx show project shop --web
+npx nx show project shop --web
 ```
 
 [Learn more about module boundaries →](https://nx.dev/features/enforce-module-boundaries)
@@ -92,13 +92,13 @@ The API project includes Docker support with automated targets and release manag
 
 ```bash
 # Build Docker image
-nx docker:build api
+npx nx docker:build api
 
 # Run Docker container
-nx docker:run api
+npx nx docker:run api
 
 # Release with automatic Docker image versioning
-nx release
+npx nx release
 ```
 
 **Nx Release for Docker:** The repository is configured to use Nx Release for managing Docker image versioning and publishing. When running `nx release`, Docker images for the API project are automatically versioned and published based on the release configuration in `nx.json`. This integrates seamlessly with semantic versioning and changelog generation.
@@ -111,10 +111,10 @@ End-to-end testing with Playwright is pre-configured:
 
 ```bash
 # Run e2e tests
-nx e2e shop-e2e
+npx nx e2e shop-e2e
 
 # Run e2e tests in CI mode
-nx e2e-ci shop-e2e
+npx nx e2e-ci shop-e2e
 ```
 
 [Learn more about E2E testing →](https://nx.dev/technologies/test-tools/playwright/introduction#e2e-testing)
@@ -125,10 +125,10 @@ Fast unit testing with Vitest for React libraries:
 
 ```bash
 # Test a specific library
-nx test shop-data
+npx nx test shop-data
 
 # Test all projects
-nx run-many -t test
+npx nx run-many -t test
 ```
 
 [Learn more about Vite testing →](https://nx.dev/recipes/vite)
@@ -189,29 +189,29 @@ This repository uses tags to enforce module boundaries:
 
 ```bash
 # Project exploration
-nx graph                                    # Interactive dependency graph
-nx list                                     # List installed plugins
-nx show project shop --web                 # View project details
+npx nx graph                                    # Interactive dependency graph
+npx nx list                                     # List installed plugins
+npx nx show project shop --web                 # View project details
 
 # Development
-nx serve shop                              # Serve React app
-nx serve api                               # Serve backend API
-nx build shop                              # Build React app
-nx test shop-data                          # Test a specific library
-nx lint shop-feature-products              # Lint a specific library
+npx nx serve shop                              # Serve React app
+npx nx serve api                               # Serve backend API
+npx nx build shop                              # Build React app
+npx nx test shop-data                          # Test a specific library
+npx nx lint shop-feature-products              # Lint a specific library
 
 # Running multiple tasks
-nx run-many -t build                       # Build all projects
-nx run-many -t test --parallel=3          # Test in parallel
-nx run-many -t lint test build            # Run multiple targets
+npx nx run-many -t build                       # Build all projects
+npx nx run-many -t test --parallel=3          # Test in parallel
+npx nx run-many -t lint test build            # Run multiple targets
 
 # Affected commands (great for CI)
-nx affected -t build                       # Build only affected projects
-nx affected -t test                        # Test only affected projects
+npx nx affected -t build                       # Build only affected projects
+npx nx affected -t test                        # Test only affected projects
 
 # Docker operations
-nx docker:build api                        # Build Docker image
-nx docker:run api                          # Run Docker container
+npx nx docker:build api                        # Build Docker image
+npx nx docker:run api                          # Run Docker container
 ```
 
 ## 🎯 Adding New Features
@@ -238,6 +238,28 @@ npx nx g @nx/node:lib my-api-lib
 
 You can use `npx nx list` to see all available plugins and `npx nx list <plugin-name>` to see all generators for a specific plugin.
 
+## Nx Cloud
+
+
+Nx Cloud ensures a [fast and scalable CI](https://nx.dev/ci/intro/why-nx-cloud?utm_source=nx_project&utm_medium=readme&utm_campaign=nx_projects) pipeline. It includes features such as:
+
+- [Remote caching](https://nx.dev/ci/features/remote-cache?utm_source=nx_project&utm_medium=readme&utm_campaign=nx_projects)
+- [Task distribution across multiple machines](https://nx.dev/ci/features/distribute-task-execution?utm_source=nx_project&utm_medium=readme&utm_campaign=nx_projects)
+- [Automated e2e test splitting](https://nx.dev/ci/features/split-e2e-tasks?utm_source=nx_project&utm_medium=readme&utm_campaign=nx_projects)
+- [Task flakiness detection and rerunning](https://nx.dev/ci/features/flaky-tasks?utm_source=nx_project&utm_medium=readme&utm_campaign=nx_projects)
+
+### Set up CI (non-Github Actions CI)
+
+**Note:** This is only required if your CI provider is not GitHub Actions.
+
+Use the following command to configure a CI workflow for your workspace:
+
+```sh
+npx nx g ci-workflow
+```
+
+[Learn more about Nx on CI](https://nx.dev/ci/intro/ci-with-nx#ready-get-started-with-your-provider?utm_source=nx_project&utm_medium=readme&utm_campaign=nx_projects)
+
 ## Install Nx Console
 
 Nx Console is an editor extension that enriches your developer experience. It lets you run tasks, generate code, and improves code autocompletion in your IDE. It is available for VSCode and IntelliJ.
@@ -262,4 +284,4 @@ Join the Nx community:
 - [X (Twitter)](https://twitter.com/nxdevtools)
 - [LinkedIn](https://www.linkedin.com/company/nrwl)
 - [YouTube](https://www.youtube.com/@nxdevtools)
-- [Blog](https://nx.dev/blog)
+- [Blog](https://nx.dev/blog)

apps/shop-e2e/eslint.config.mjs

@@ -5,7 +5,7 @@ export default [
   playwright.configs['flat/recommended'],
   ...baseConfig,
   {
-    files: ['**/*.ts', '**/*.js'],
+    files: ['src/**/*.ts', 'src/**/*.js'],
     // Override or add rules here
     rules: {},
   },

apps/shop/tsconfig.spec.json

@@ -11,13 +11,15 @@
       "@nx/react/typings/cssmodule.d.ts",
       "@nx/react/typings/image.d.ts"
     ],
+    "lib": ["es2022", "dom"],
     "jsx": "react-jsx"
   },
   "include": [
     "vite.config.ts",
     "vite.config.mts",
     "vitest.config.ts",
     "vitest.config.mts",
+    "src/test-setup.ts",
     "src/**/*.test.ts",
     "src/**/*.spec.ts",
     "src/**/*.test.tsx",

eslint.config.mjs

@@ -10,6 +10,7 @@ export default [
       '**/vite.config.*.timestamp*',
       '**/vitest.config.*.timestamp*',
       '**/test-output',
+      '**/out-tsc'
     ],
   },
   {

libs/api/products/src/lib/products.service.spec.ts

@@ -1,4 +1,3 @@
-import { describe, it, expect, beforeEach } from '@jest/globals';
 import { ProductsService } from './products.service';
 // eslint-disable-next-line
 import { ProductFilter } from '@org/models';

libs/shared/test-utils/package.json

@@ -12,6 +12,9 @@
     },
     "./package.json": "./package.json"
   },
+  "devDependencies": {
+    "@org/models": "workspace:*"
+  },
   "nx": {
     "sourceRoot": "libs/shared/test-utils/src",
     "projectType": "library",

libs/shared/test-utils/src/lib/test-render.tsx

@@ -1,5 +1,5 @@
 import { ReactElement } from 'react';
-import { render, RenderOptions } from '@testing-library/react';
+import {render, RenderOptions, RenderResult} from '@testing-library/react';
 import { BrowserRouter } from 'react-router-dom';
 
 interface AllTheProvidersProps {
@@ -13,9 +13,9 @@ function AllTheProviders({ children }: AllTheProvidersProps) {
 export function renderWithRouter(
   ui: ReactElement,
   options?: Omit<RenderOptions, 'wrapper'>
-) {
+): RenderResult {
   return render(ui, { wrapper: AllTheProviders, ...options });
 }
 
 export * from '@testing-library/react';
-export { renderWithRouter as render };
+export { renderWithRouter as render };