Impossible to use the dev server/preview functionality within an existing project

[kevinschaich]

Describe the Bug

All the documentation recommends installing react-email into a new, fresh package – why is that?

Presumably the workflow a lot of people would want is to be able to build emails with react-email, and then send them with existing logic they have in their code base. We're using nodemailer and some frankenstein HTML generation code right now and would like to replace it. But if all the react-email stuff is in its own package (package A), how would one use the render() functionality to generate a templatized email from within an existing codebase (package B)?

Despite the docs' recommendation, I tried to get this working within our existing package, but since it's trying to copy over dependencies from my existing package.json and also merge them with requirements from the react-email template side of things, we get stuck in dependency hell.

Which package is affected (leave empty if unsure)

No response

Link to the code that reproduces this issue

can't share

To Reproduce

1. add react-email and @react-email/components dependencies to an existing NextJS project package.json
2. add a script entry to package.json: "email": "email dev",
3. npm run email

Since we're using next 12 and react-email stubs in several next 13 dependencies, we get a ton of warnings like the following:

I tried to edit the .react-email/package.json to more closely match the minimal one when doing npx create-email - but it just overwrites my changes and uses what it wants.

Expected Behavior

🤷🏻‍♂️ I think the existing preview dev server infrastructure needs reworked because this is pretty painful. Rather than creating an entire subproject with its own set of dependencies, react-email should be able to compile and serve the preview server with a single command

What's your node version? (if relevant)

No response

[bukinoshita]

But if all the react-email stuff is in its own package (package A), how would one use the render() functionality to generate a templatized email from within an existing codebase (package B)?

Here's an example with React Email + Next.js + Resend where you put all your emails in a folder (transactional) and still be able to import that email in your server.

And here if you don't want to use the react, you switch to html: render(MyEmail())

[jinsley8]

Here's an example with React Email + Next.js + Resend where you put all your emails in a folder (transactional) and still be able to import that email in your server.

@bukinoshita, so it's absolutely necessary to install a full new install inside a Next.js app like the link below? or is this for preview only? If the extra install folder is needed, does this need to be included in the build when deployed to Vercel?

Any way to generate or preview emails without creating another app folder?

https://github.com/resendlabs/react-email/tree/main/examples/resend

[idafoh]

But if all the react-email stuff is in its own package (package A), how would one use the render() functionality to generate a templatized email from within an existing codebase (package B)?

Here's an example with React Email + Next.js + Resend where you put all your emails in a folder (transactional) and still be able to import that email in your server.

And here if you don't want to use the react, you switch to html: render(MyEmail())

Can we use with react for sengrid or it's resend specific?

[bukinoshita]

It's agnostic, you can use with whatever you want. You can use the render method to generate the HTML to be used with Sendgrid for example.

[kevinschaich]

Thanks @bukinoshita, that's a reasonable workaround for now.

I think it'd still be worth the investment to create a self-contained preview server script within react-email so that it's not necessary to create a new (hidden) subpackage every time.

Mailing has a similar offering that can do this in one command (npx mailing) – Prisma Studio also offers a similar database preview option (npx prisma studio).

[bergold]

I was thinking exactly that. The current approach is not stable enough in my opinion.

I have built a proof of concept here: https://github.com/bergold/react-email-dev (the documentation is very poor, but check the arch.md file)

It can be installed via npm i -D @bergold/react-email-dev and then used as a drop-in replacement for the react-email package.

It is based on the react-emails client UI components, but built into an SPA. The cli then takes care of serving this SPA (fully static, client side fetches the API) as well as a minimal API (two endpoints for listing all emails and getting the compiled HTML and TXT of an email).
It works in my specific setup, but it's far from a general solution.

I was planning to contribute this back to the react-email project somehow, but haven't found the time to document the ideas behind it yet.

[bukinoshita]

But if all the react-email stuff is in its own package (package A), how would one use the render() functionality to generate a templatized email from within an existing codebase (package B)?

Here's an example with React Email + Next.js + Resend where you put all your emails in a folder (transactional) and still be able to import that email in your server.
And here if you don't want to use the react, you switch to html: render(MyEmail())

Can we use with react for sengrid or it's resend specific?

I don't think Sendgrid support react, but you can use the render method to convert to HTML which is supported.

[idafoh]

I got it. I didn't know resend created react-mail so It's make sense it has a support for react also. Thanks.

[bukinoshita]

Thanks @bukinoshita, that's a reasonable workaround for now.

I think it'd still be worth the investment to create a self-contained preview server script within react-email so that it's not necessary to create a new (hidden) subpackage every time.

Mailing has a similar offering that can do this in one command (npx mailing) – Prisma Studio also offers a similar database preview option (npx prisma studio).

Not really sure if I understood correctly, doesn't the npx mailing or npx prisma studio the same as npx react-email dev?

[kevinschaich]

It's all in a self-contained script, so it doesn't need to make a new package and copy over dependencies. I think that's the main issue with how react-email does it as described in my first message.

[asmockler]

Want to +1 this -- it is a little annoying to create basically a completely separate app within my existing Next app to get this to work. Would be much nicer if I could just install react-email into my existing app and have email dev work

[everest113]

How about for applications other than next.js?

I have a scenario where we have a standalone node/express server. This server sends transactional emails, and populates the email data at runtime. I have tried the same approach suggested above, but I'm unsuccessful in configuring my node server to render the email templates. Here's some example code:

import EmailTemplate from "../../react-email/emails/email-template.tsx"
import { render } from '@react-email/render'

const send = () => {
  emailClient.send({
    html: render(EmailTemplate({ ...props }))
  })
}

Note, I have tried installing both react and react-dom on my node server. The error I receive is SyntaxError: Unexpected token '<'.

Any suggestions?