NX Monorepo support

[juliencastera]

Hi, first of all, thank you for your work, it's a really great and promising lib :)

It would be really great if react-email could integrate in an NX monorepo.

Actually, we have to run email dev, that creates a folder .react-email and we have to add a yarn.lock into it to install dependencies.

Is it possible to make a thing about it ? Like create an adapter that doesnt create this folder and uses root package.json ?

Or maybe I miss something..

Thanks :)

[bastiaanv]

You do not need to use yarn. You can use NPM if you want

I took a look at the code, but the dev server does use the root of your package.json. So I guess you can generate a react email project and just move it to your monorep. I do not use NX monorepo, but I guess you still need to edit the nx.json file to make it aware of your new project.

If not, can you provide a sample repo in which you want to integrate this project?

[williamgkzhang]

Here's a sample repo where it works and doesn't work:

https://github.com/williamgkzhang/nx-react-email

works with npx nx run backend-emails:serveFromWorkspace but not so with npx nx run backend-emails:serve

Basically it'd be nice to generate the .react-email next project in a sub-directory. The problem is that nx generates a package.json with the package name @org/packageName in the subdirectory which violates readPackage normalization.

Line in question:
https://github.com/resendlabs/react-email/blob/ee7aa406e139948439fe5e9778a2ef2bc407bb54/packages/react-email/source/commands/dev.ts#L221

The read-pkg itself uses https://github.com/npm/normalize-package-data to do much of the heavy lifting. You could use that to parse the package.json file with a warning function if all you care about is the dependencies in the resulting package.json.

Or perhaps a cli flag to pick the package.json directory.

[williamgkzhang]

I ended up using Ladle and Vite just to render emails for now with nx. Works decently.

[talhameer]

Can you please explain a little bit more about it...

In my case, I have a npm-based mono repo using Nx that contains restful APIs and some other stuff. I created another package in this repo for emails and I'm trying to access email in the API, It works fine during development, but when I build and run it it doesn't work with the error can't find the package @reme/emails... Please help me to fix this issue...

[amosbastian]

I'm also interested in this, maybe check how https://www.mailing.run/ do it, as it was easy to set up in an Nx monorepo

I found a solution (sort of) for react-email: create a Next.js lib with the Nx generator, add a package.json in the src/ folder, add a serve target to the project.json of the lib:

// project.json
"serve": {
  "command": "npm run --prefix libs/path/to/your/libl/src dev"
},

// package.json
{
  "private": true,
  "workspaces": [
    ".react-email"
  ],
  "scripts": {
    "dev": "email dev",
    "export": "email export"
  },
  "dependencies": {
    "@react-email/body": "0.0.2",
    // Other dependencies
    "@react-email/text": "0.0.5",
    "react-email": "1.9.3"
  }
}

It makes it so you can still import all the emails from @acme/ui/email and you can run it with npx nx serve your-lib

[jt561]

Does anyone know how this would work with Turborepo?

I have started this discussion here

[gabrielmfern]

I think this is one of the problems that are going to be solved when #960 gets merged and there is no more .react-email folder

[mmmoli]

I had a go at setting this up. Added some comments in the readme:
https://github.com/HTCH-app/nx-react-emails