Nx monorepo support?

[orest22]

Hey folks, I am planning to try this great CMS. Currently, I have a monorepo setup with https://github.com/nrwl/nx and hit the first obstacle, looks like keystone has a requirement to have a keystone.ts in the root repo and also CLI commands are not supper friendly to other folder structures. Any plans to make it more flexible? Thanks 🙌

[dcousens]

Hi @orest22, did you have a reproduction that we could work with to try and improve this? Keystone 6 should work in a mono-repo when within a package, it should not require to be the root.

[patdx]

Not the original poster but I tried to make a basic reproduction here: https://github.com/patdx/keystone-nx-attempt

(Also committed the /dist and .keystone folders to make it easier to explore.)

I am trying to use Keystone with Nx for a project but also finding it a little hard to fit into the Nx structure.

In the repo above, I tried to add and customize a basic Keystone project at /apps/keystone-app. I also added a plain Next.js app at /apps/next-app. Next.js is really well supported by Nx.

One key point about Nx is that unlike lerna or yarn workspaces, it does not have any symlink features built in, some general patterns are:

1. There is only one package.json at the root of the repository.
2. Build outputs from all projects go inside a shared /dist folder in the root (/dist/apps/keystone-app, /dist/apps/next-app, etc).
3. Instead of symlink, libraries in the monorepo are shared via tsconfig.json paths feature and integrations w/ webpack, etc

So, some issues I noticed with keystone are:

(1) Unable to get the alias/paths working

We would like to be able to use imports like this inside the Keystone CMS app:

import { TestLib } from '@keystone-nx/test-lib';
// alias for `/libs/test-lib`

Actually I'm not exactly sure how this one works.

In plain Next.js it is automatically managed by your tsconfig.json

If this is working I think we need to add "extends": "../../tsconfig.base.json", to the apps/keystone-app/.keystone/admin/tsconfig.json by Next.js (inside of keystone).

But I also see that Nrwl Nx injects a TsconfigPathsPlugin so maybe it does not matter (beyond UI/code editing experience)

(2) Move build output

Instead of build output to apps/keystone-app/.keystone/admin/.next, it should go to dist/apps/next-app/.next (or similar),

For Next.js apps in Nx, they have something like distDir: '../../dist/apps/keystone-app/.next', inside the next.config.js. Actually, this isn't inside the next.config.js on disk; the app's next.config.js is parsed and the distDir is set inside the @nrwl/next:build build wrapper here)

Nx Monorepo tool also supports some build caching features. The features appears to only work if the source and output are in different folders (not nested folders)

---

Edit: Updated and tried to add more details to reply (2022-02-24)

[raveling]

@patdx

(1) Unable to get the alias/paths working

This isn't something we intend to support. Keystone uses standard node module resolution.

(2) Move build output

We can understand the value in this, but opening this up isn't a big priority for us.

Hope this helps 🙂

[vlnevyhosteny]

Here https://github.com/vlnevyhosteny/keystonejs-nextjs-monorepo you can find Keystone 6 in monorepo. Take a look on nmHoistingLimits: workspaces in .yarnrc.yml that install keystone dependencies in Keystone server package. Especially node_modules/.bin/keystone.

[raveling]

#7220 (reply in thread)

[remainstheday]

Monorepos are gaining in popularity and make the most sense for a project with Keysone that has a frontend codebase. I am running into this issue with Keystone + https://turborepo.org even after attempting a fresh install.

#7518