Email with React? (export to raw HTML)

With Blaze, and Arunoda’s server side rendering package for Meteor, it was really easy to add user data to emails, and send them from there.

How does email work with React? Is there a built in method that converts JSX nodes and data to raw HTML, or do I need a package?

You can still use meteorhacks:ssr. Use html files in your /private folder. From your react template you can pass data to your email method, and then from the method into the html template via SSR.render.

https://themeteorchef.com/snippets/using-the-email-package/#tmc-using-server-side-rendering

This still requires I keep the package Blaze installed.

I’m looking to improve performance and reduce network load by removing Blaze altogether and just using React.

Bump
Up
My
Post

Bump

1 Like

One idea is to use regex on a string instead of rendering React server side.

Care to elaborate? It sounds interesting, but I don’t completely understand what you’re suggesting.

Create a file in your /private directory with html:

<div>
  Hello, {{name}}!
</div>

Use Assets.getText() to get the contents of the file as a string.
http://docs.meteor.com/#/full/assets_getText

Then do a find and replace in the string for {{name}}.
str.replace("{{name}}", "Lucy");

1 Like

These are all interesting ideas, but still not what I’m going for.

It would be nice to actually create React components, have them work with the data they’re given, export to raw HTML, and send emails from there.

Right now it seems like Meteor is still very dependent on Blaze. I’m not getting that “just react on the front-end” feel like MDG suggested I would.

Anyway you can not render React to HTML like you do it on the Client. It is not an MDG or Meteor antipattern. React server-side rendering is pretty nice but do not mind that it so simle (even with non-Meteor backend)

React’s API allows you to easily render static HTML from a React component.

This is absolutely false. ReactDOMServer.renderToStaticMarkup allows you to render any React component to static HTML. I use it for sending emails within my application and it works great.

1 Like

I mean not the techics. React can render on the server really fine (And Blaze also too). It is more about we should think about data and not to use client-side ui components as we do it on the Client

Thats not polite. Dont you think that people here know about React (in context that it nice for server side rendering). It is friendly to ask for details or just “What you mean …?”

1 Like

The OP was asking about sending emails using React components. I admit that I could have worded my response more nicely, but using ReactDOMServer.renderToStaticMarkup is how you render React on the server when you want to send static HTML like an email.

There’s no anti-pattern here. You’re creating static HTML for emails with variables. IMO the simplest thing to do is to use a stateless, functional React component and simply render the HTML and add it to the email.

Your answer didn’t offer any suggestions of what the OP should do where I am giving him clear guidance to solve his problem.

He’s not really talking about “server-side rendering” - this term is typically reserved for pre-rending a page on the server before sending it to the client to become a live, updatable page. Sending an email doesn’t work like that. It’s all static HTML.

4 Likes

Clayne, thanks a bunch! This is great.

For your emails, do you send them as unstyled-html or you do know of a nice way to inline the styles before/after using ReactDOMServer.renderToStaticMarkup?

To be honest most of the emails I send as React components are simple reports because HTML emails are awful. For me the most part if I need a more complex email I’ll create something in Mailchimp because it saves me a ton of time and I don’t have to test my email to make sure it works across all kinds of different mail clients.

If you want to code complex emails by hand, however, I would recommend using something like Radium: http://stack.formidable.com/radium/