Add framework-specific docs

[zenorocha]

• [ ] Remix
• [ ] Next.js
• [ ] Redwood.js
• [ ] Express

[JClackett]

Yes pleaseee :)

[DHFW]

I got it working, but am not sure if this is the correct way to do it. I first tried in my app/services/emails.server.ts file to include the AccountCreated component. But that didn't work. Of course, I had to make the extension tsx! After that it was straightforward. Just import the <AccountCreated ... /> component like a normal component. Pass it some props like URL from process.env and send the email :) I imported the AccountCreated component from react-email-starter/emails/AccountCreated.tsx so the preview function in the NextJS app works as well. Very nice workflow. Develop/test/check it in the live preview and import the same file/component in the Remix app. To have some demo values in the preview I created a default function AccountCreatedEmail to add the props. And from the remix side I imported the (non-default) AccountCreated component. I only need to check if the Docker build will work (UPDATE: it does, but I had to include the template in the build explicitly because I excluded the whole directory (which caused my build to grow because of the NextJS application which is used by react-email preview functionality)

export default function AccountCreatedEmail() {
  return <AccountCreated url="test.com" />;
}

export function AccountCreated(props: AccountCreatedProps) {
...

[barakcodes]

Thanks for testing this out I was a bit curious as to how I'll get it work. Is it possible to compile the emails programmatically and see if possible to reduce the docker image size. Will try this over the weekend. https://react.email/docs/cli#email-export

[Tobjoern]

Are there any updates on this? I'm currently unable to get it to work with express.

[ecadagiani]

I find a solution for express, not perfect (because it need an build command) but not to dirty:

1. Install react-mails in an autonomous project (autonomous install)
2. Inside install babel depencies npm i @babel/cli @babel/core @babel/plugin-transform-modules-commonjs --dev
3. Compile (and transform in commonJS) your components babel ./emails/ --presets=@babel/preset-react --plugins @babel/plugin-transform-modules-commonjs --out-dir dist

If you use esModule in your express server, you can remove --plugins @babel/plugin-transform-modules-commonjs

4. In your express server, install react, @react-mail/render and all other dependancies used in your react-email components npm i react-email @react-email/render @react-email/components react
5. Render (without jsx):

const { render } = require('@react-email/render');
const React = require('react');
const {MyMail} = require('../../react-email/dist/MyMail');

const emailHtml = render(
    React.createElement(MyMail, { props1, props2 }, null)
);
console.log(typeof emailHtml) // => string

Work with:

   // react-email project
   "@babel/cli": "^7.23.9",
   "@babel/core": "^7.24.0",
   "@babel/preset-react": "^7.23.3",
   "@babel/plugin-transform-modules-commonjs": "^7.23.3",
   
   // express project
   "@react-email/render": "^0.0.12",
   "react": "^18.2.0"

Not tested with static files