Mail-a-tron
✉️ Painless email templates with Next.js ✉️
Mail-a-tron provides you with a better workflow for using email templates in your app.
- 🚀 Powerful: Use React to construct your email templates as composable components.
- 🛠️ Maintanable: Preview your designs, see how different data affects your layouts.
- 📦 Modular: Deploy as a microservice that responds to HTTP requests with html ready to be sent as an email.
Getting started
Make sure you have docker installed, clone the repo and run:
docker-compose upBrowse to http://localhost:3000/welcome to see the an example template.
How does it work?
Mail-a-tron is built on top of Zeit's Next.js - a minimalistic framework for server-rendered React applications. If you're unfamiliar with Next, take a few minutes to read through their readme. This project leverages a couple of fundamental features:
- URL paths are automatically routed to components in
/pageswith query parameters passed in. - Automatic server-side rendering - you get a fully formed html response when hitting any route.
- Webpack, hot module reloading, minification, isolated scoped css, and many other things come for free.
In mail-a-tron, we simply build each email template as a separate page. This gives us an easy way to preview them in the browser, whilst also lending itself to be used as a microservice where fully formed email templates are retrieved from an HTTP request.
Designing anything beyond simple text-based emails is challenging due to the inconsistent support for html and css properties. We use some components from the react-html-email project to avoid common pitfalls and extend deprecated react attributes, as well as provide some of our own.
Deployment
The quickest way to get a deployment out in the wild is to use now. Make sure you have yarn installed (you can also use npm if you prefer):
yarn global add now
now
Alternatively, to deploy it manually you can run:
yarn
yarn run build
yarn run start
Contribute
This project is still young and will probably have a few bugs to be ironed out. There are also many components and example pages which could be included to help people with common use cases such as background images and invoice emails.
If you find a bug or have any suggestion for improvements feel free to create an issue, or even better a pull request and we'll try to get it included in the project.
Lets give developers a powerful new tool to simplify their workflows when dealing with emails!
Suggested improvements
Storybook
Originally this project started out by integrating react-storybook for previewing emails and quickly inspecting components with different sets of mocked data. We ran into issues getting responsiveness to work well since react-storybook puts the component inside an iframe. There was a proposed PR to introduce some UI elements into react-storybook that could potentially solve this, but it seems that this approach would be better suited if it was re-implemented as a decorator.
Templates
This project could do with more templates that can be used as boilerplates. The welcome template is roughly based on a free email template pack by Litmus.
Resources
- Useful stackoverflow answer about what you can and can't do with css in emails
- Find out if a css property is supported
- Using CSS in emails
- Awesome email awesomeness
- Creating and sending reusable emails with React
- Coding mobile first emails
- Send test emails
Authors
- João Mesquita (@fusillini) - GenLife
- James Poole @jamescpoole - GenLife
- Sha 256 - GenLife