Possible Nx Integration

[jkhaui]

Hey, thanks for this repo it's awesome.

I'm wondering what your take is on nx as an alternative monorepo solution, and whether its approach is diametrically opposed to the direction taken with this monorepo example? Or can they/should they be used together?

The extent of my research thus far is running the command yarn add-nx-to-monorepo and installing some code gen plugins for nx, which seems to work fine, but it appears that anything more in-depth than that could be impossible due to the different dependency graph created by nx.

Anyway, interested in hearing thoughts on this monorepo vs. nx in general

[belgattitude]

Nx or turbo are compatible with this approach. They don't replace the package manager (yarn, pnpm, npm)

NX propose opt-in plugins/presets (storybook, jest, nextjs...) to ease starting with a project.

I use Nx, but never used their presets/plugins... I guess with time I've got used to setup pretty all tools by myself and wanted to keep the freedom to use / experiment on the edge (ie: vitest, tsup...).

For example with NX, I guess you could start quickly with

yarn add -D @nrwl/nx-cloud @nrwl/workspace nx

Then create a nx.json file with a staring point

{
  "extends": "nx/presets/npm.json",
  "implicitDependencies": {
    "package.json": {
      "dependencies": "*",
      "devDependencies": "*"
    },
  },
  "tasksRunnerOptions": {
    "default": {
      "runner": "@nrwl/nx-cloud",
      "options": {
        "accessToken": "<PUT YOUR ACCESS TOKEN>",
        "canTrackAnalytics": false,
        "showUsageWarnings": true,
        "cacheableOperations": [
          "build",
          "typecheck",
          "test",
          "test-unit",
          "lint",
          "lint-styles",
          "build-storybook"
        ]
      }
    }
  },
  "targetDependencies": {
    "build": [
      {
        "target": "build",
        "projects": "dependencies"
      }
    ]
  },
  "affected": {
    "defaultBase": "main"
  },
  "pluginsConfig": {
    "@nrwl/js": {
      "analyzeSourceFiles": false
    }
  }
}

Then run a build for example

yarn nx run-many --target=build --all

Run it twice to see the cache in effect 😄 (PS: Compare to yarn workspaces foreach -tv --since=origin/main run build)

When adding a solution like NX or Turbo, you'll directly benefit from some speedups. Some tips:

• To have the full potential subscribe to their cloud offering (nx cloud, turbo uses vercel). This will speed up your CI. Imagine a P/R that have 3 pushes with multiple commits. Each job will be able to persist a cache.... next push might be able to reuse a cached item (ie: test, lint, typecheck)...
• I could not initialize the build cache on vercel / couldn't use ng-affected. Might have been fixed. This allows to skip a development preview...

There's more to say, I'll see if I can clarify the readme. But thanks for the question

[jkhaui]

Awesome. Thanks for such a comprehensive answer, much appreciated!