Sending emails from a Create-React-App
Tags: react, express, email, mjml
Published: 2018-07-20 18:33:23

---
title: Sending emails from a Create-React-App
published: true
tags: react,expressjs,email,mjml
canonical_url: 
---

![](https://cdn-images-1.medium.com/max/1024/1*IiQuFZskyWATRJBMXGVXkQ.jpeg)<figcaption>Castillo de los Tres Reyes Magos del Morro, Havana, Cuba</figcaption>

A few days ago we added a new **Invite people by email** feature, to an app we’re developing internally at [Ingenious](http://ingenious.agency). The app consists of a board with a collaborative text editor and some cards that complement the behavioral insight approach used in product design [consulting](http://ingsw.com/agency/). Tech-wise the app is built with React, bootstrapped with [create-react-app](https://github.com/facebook/create-react-app), Firebase as the backend and hosted on Heroku.

We needed to invite people as Editors of the board by sending an email with the board URL. To keep things simple, we first tried [EmailJS](http://www.emailjs.com/), a service that allows sending emails without focusing on any server code. EmailJS would have been an excellent choice but we needed a bit more of control on how the email was generated, for example, it is impossible to add custom fonts to the HTML version of the email.

We choose, as the path of least disruption, to set up a small Express (Node) backend to serve our React app and publish an endpoint that takes care of sending the email. I’ve found several tutorials on the topic, but most of them were outdated or incomplete, so wanted to share a walk through of our solution in case it benefits you as well.

If you like to deep dive into the code, check the demo link in the end.

The first task is to transform our client only React project into a full express app with the following steps:

1. Remove create-react-app-buildpack from the app and setup the default [heroku/nodejs buildpack](https://devcenter.heroku.com/articles/nodejs-support#activation).
2. Move the root React app files into a subdirectory, e.g. _react-ui_.
3. Copy _server/index.js_, _package.json_, and_ .gitignore_ files in the root of the project from the buildpack [example repo](https://github.com/mars/heroku-cra-node#switching-from-create-react-app-buildpack).
4. Commit and push to the Heroku origin.

To keep the React SPA up and working we need to serve all its assets using the static express middleware. Afterward, we can process any request to perform custom actions, such as sending an email, using the common **get(…)**, **post(…)** express handlers. Finally, we can re-route any non API request to the SPA entry point, that way the client side routing continues to work as expected. Check the code below:

{% gist https://gist.github.com/pepesenaris/11dde803640d949793d280c336c9d6f2.js %}

The key here is to run npm run buildin the React project which copies all the assets: JS, CSS, images, etc. to the _build_ folder. The command also generates an _index.html_ file which can be returned by our web server. This process can be triggered by adding a post-build script in the express _package.json_ file:

{% gist https://gist.github.com/pepesenaris/23371feb9bf20d315b0eeba73d5eebb7.js %}

To generate the email we can rely on the email-templates package. It allows us to obtain . **html** and . **text** versions of the content and later send the email with a 3rd party provider. We’ll show how to work with the [Mailjet](https://www.mailjet.com) API but, any other vendor will do.

{% gist https://gist.github.com/pepesenaris/63378b3b0748f97bd820f26b9f75b367.js %}

Finally, we modify the express route handler to obtain the email address, alongside the user-provided content used in the _._ **ejs** template and send the email.

{% gist https://gist.github.com/pepesenaris/f15f808c0581db091aefc250935fdfe1.js %}

Creating HTML emails that work well in many different email clients is a daunting task. If you ever need to build a custom email take a look into [MJML](https://mjml.io/), a component-based framework that generates responsive emails templates. It ships with some excellent templates and an easy to grasp documentation that gets the task done.

You can check a full demo repository [here](https://github.com/pepesenaris/emails-from-create-react-app-example).

* * *