Convex in a NX monorepo
I have a NX monorepo with 1 next.js application(for now).
i came across Convex a few days ago and its looks very interesting. but i cant figure out how to use Convex in a NX monorepo.
Anyone?
37 Replies
@Captain Are you running into any issues? Do you use package.json-based Nx monorepo or a "integrated" monorepo?
integrated
ideally i would run convex as a lib but im fine with application too
the problem is that
npx convex dev must be run at the root of the workspace which creates the convex 'files' outside apps or libsAh gotcha, that makes sense
do you have any suggestions?
That's a requirement in an Nx repo, that everything not have its own package.json and everything be in apps or libs?
If you create a file called convex.json next to the package.json you can customize the location of the convex directory.
Hopefully this solves the issue, you can set this to apps/convex or apps/backend/convex
the convex folder at the root of the project still gets created
but this folder only has 2 files now. readme and tsconfig
the rest do go into the exptected location
So you have two convex folders? You can get rid of the top level one and just use the one in the apps or libs folders
what about the tsconfig?
Is there not one in the lower convex directory? Move it down there if not
no there isnt. im not sure if you are familliar with NX. but in NX each app or lib has its own tsconfig which extends a base tsconfig. i could move the file to right convex dir and merge the changes
im well versed ins TS but im not as great with config and the ts compiler options. afraid this approach might have consequences in the broader NX monorepo.
Not familiar, no. You could extend the base tsconfig but I bet you don't need to?
It sounds like we should make a demo Nx repo to show one way this could work
i think that'd be very useful. especially with attracting pro dev teams
The two things that need to work are
- convex dev should be able to typecheck (but you can turn this off), and
- other projects need to be able to import from convex/_generated/api
the 2nd point is where nx shines. apps can import any number of libs. 1 caveat, apps cant import other apps code. only lib code can be imported
If these both work already then you're all set
Another approach would be sticking the convex folder inside the Next.js app — until you're trying to use your Convex API from multiple webapps that approach sounds simplest
Either of these approaches shouldn't be a problem, but let us know if you hit anything. We've worked with folks using turborepo for this and we use Rush internally, curious about the Nx integrated approach. It sounds like paddling upstream when projects like Next.js expect to control their own package.json files but if you can get it to work it sounds simple and convenient.
would using urborepo be easier? im not married to nx
If you're flexible but you want to use Nx it could be that the package.json-style monorepo is smoother — but I think what you're doing should work, especially if you put the convex directory in the Next.js project
I'm trying it in a repo now, should have something soon
I'm curious to hear why you're interested in Nx and why integrated over separate package.json — it's absolutely something that should work with Convex, but curious to hear more for how we document it.
So far what I understand about Nx is that it is roughly like Bazel, and sounds nice for multilanguage monorepos
if i put the convex folder inside the next.js app dir, then other apps cant import the functions and generated code
Got it, and you want other apps to use the Convex API in addition to the Next.js one
i have been using nx for a while. in my opinion its a great builder. however, right now, i have more use for the
realtimeness of convex. using nx is absolutely not a must. i would however like to use a monorepo setup.Here's a model to follow for using Convex in a monorepo, here using turborepo: https://github.com/allenhartwig/convex-turborepo/tree/main/apps
im gonna try turborepo
sweet, I'll share a Nx integrated solution for future searchers when I get one working but it's taking a while
i have created a solution for nx but i cant give guarantees when it comes to the tsconfig part
what is needed is a node or ts(only tried node) lib. this lib exports the _generated folder of convex and all custom functions
the only problem i have is that it works both with and without changing the tsconfig of the lib which makes me worry
Sorry late to see this, this sounds alright. You should only need to export that _generated folder. The tsconfig.json file there is only used to typecheck and to bundle these functions, and is mostly there so you can choose what setting you want to typecheck the functions with.
@Captain curious if you came up with something like this https://github.com/thomasballinger/convex-nx-integrated-monorepo
i see you went with the packages approach. i use the integrated approach. i will publish what i have on github tomorrow and send you the link
I don't think I did, there's only one package.json at the top
if the tsconfig truly doesnt matter then i think a simple lib dedicated to convex(or as a data-access lib) should work
maybe I'm misunderstanding what the packages approach is
I followed this https://nx.dev/getting-started/tutorials/integrated-repo-tutorial
ohh i see. the example also uses packages in the integrated example.
this is a good example. https://github.com/sitepoint-editors/nx-nextjs-monorepo
GitHub
GitHub - sitepoint-editors/nx-nextjs-monorepo
Contribute to sitepoint-editors/nx-nextjs-monorepo development by creating an account on GitHub.
when setting up the integrated monorepo, you need to choose react as the base and next.js as the framework. this sets up 2 things.
apps folder with 1 next.js app and a empty libs foldersAh interesting, thanks for the pointer. Looks like it would be similar mostly, sounds like yours can be the example of that style.
do convex functions only run in the browser?
Convex functions run on the backend only. You use them on the frontend by calling our specially made react hooks.