✉️ Painless email templates with Next.js ✉️
Mail-a-tron provides you with a better workflow for using email templates in your app.
Make sure you have docker installed, clone the repo and run:
bash docker-compose up
Browse to http://localhost:3000/welcome to see the an example template.
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:
/pageswith query parameters passed in.
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.
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
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!
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.
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.
The mjml project has a more robust set of React components, it would be nice to migrate the current react-html-email library to that one - there's an open issue at the moment regarding this https://github.com/mjmlio/mjml/issues/488