Open zenorocha opened 1 year ago
Yes pleaseee :)
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) {
...
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
Are there any updates on this? I'm currently unable to get it to work with express.
I find a solution for express, not perfect (because it need an build
command) but not to dirty:
npm i @babel/cli @babel/core @babel/plugin-transform-modules-commonjs --dev
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
npm i react-email @react-email/render @react-email/components react
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:
> ```json
> // 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*