Get the generated HTML email templates through API about mailing HOT 19 CLOSED

OK, that makes sense: you want to pass props and have it render the template.

I think it would be relatively straightforward to expose an API that did that if you run mailing on a server (e.g. we could call it npx mailing server).

@alan-francis is a REST API good for you?

Something like...

GET /previews/TemplateName.json?props=JSON_PROPS

would return

{
  html?: string,
  errors?: object[] // prop type or template compilation errors
}

Or let me know if you were thinking something else.

cc @alexfarrill

from mailing.

mentioned in #58, but worth surfacing here too...

I went ahead and built out a serverless API proof of concept with vercel here: https://github.com/psugihara/mailing-serverless-api

Still trying to decided the best way to proceed with a built-in server mode / html API, but something like this is a possibility.

from mailing.

@psugihara I also need something like this. I started implementing this in the back-end just to realize that I could not instantiate the React component. Would it be possible to do it at runtime? Most of my email templates have some variables I need to inject at runtime.

from mailing.

Thanks for the reply @psugihara . Actually my use case will be to send email from the db function in the application. So it would be great if we can build and test the email templates here and then while calling an api from the db function, we can get the HTML template and send the mail from there.

Thanks
Alan

from mailing.

thanks all!

from mailing.

Hey @alan-francis! Currently there is not, but I'd be happy to add a command to the CLI that exported just the templates to HTML. Would that work for you?

Can you tell me a little more about your use-case and where you want to send the emails from?

from mailing.

@psugihara : Yes that would be great so that it would be easy to create templates and then use it with just a REST API call.

from mailing.

OK cool, I got this request in a different forum too. I'll investigate how we can implement. Thanks for the feedback @sebasalvarado and @alan-francis, will ping you here when I have something.

@sebasalvarado out of curiosity, what kind of backend are you in?

from mailing.

@psugihara I'm on a Node.js backend. Just a regular Express REST API.

from mailing.

Got it @sebasalvarado. If you're in a node environment where you're not already using react, you might try adding react and react-dom as dependencies and using something like this (or babel) to import the jsx files: https://github.com/vadimdemedes/import-jsx

It's a bit hacky, but you won't have to run an extra server process if you can get it to work as a library.

from mailing.

thanks @psugihara looks like I'm unable to make import-jsx work with my configuration.

When using import-jsx how do we pass the props to the react component? Ideally I could serialize the component (with props) as an HTML string. Would babel need to be added to my npm run start and npm run build commands? Not sure where it fits in bundling.

You can see that when I pass <UserRegistered /> react component, looks like it can't parse it. Any help would be appreciated.

from mailing.

In order for it to be parsed, the JSX has to be in a file with a .jsx extension. What you have above looks like a valid jsx file, so you could try renaming it.

One unrelated note, sendEmail is an async function if you imported it from emails/index so you'll want to await sendEmail(emailOptions); to wait for it to send.

If you're in a plain js file and don't want to/can't use jsx for some reason, you could use this syntax https://reactjs.org/docs/react-without-jsx.html

from mailing.

Actually, the image above is a .ts file, running on my node process in the server. I'm importing a JSX component like so:

import UserRegistered from 'emails/UserRegistered';

Do I need to add babel to compile the JSX files? I am using .tsx to write the React component for the email.

from mailing.

Got it, then try renaming that file from .ts to .tsx. It's invalid ts but valid tsx. I'm guessing your ts compiler has tsx support built in, so you won't need babel, but you might need to toggle something in the config.

Otherwise, try the non-tsx/jsx syntax here for your sendMail call: https://reactjs.org/docs/react-without-jsx.html

from mailing.

+1

from mailing.

@psugihara the latest export previews command works like magic, thanks!

from mailing.

awesome @mrlubos! We'll do a release later today to get it in the main package.

from mailing.

released, closing this for now. we can follow up with api stuff in #58

from mailing.

Thanks for the responsiveness @psugihara

from mailing.