vaststories.blogg.se - Mjml templates

Mjml templates full#

One problem: At the start of this project, I had never built a plugin for Webpack! I had very little knowledge about Webpack outside of some fighting with configs to get my projects to build correctly. So we set off to build out a Webpack-powered build system. To put it all together, we felt that Webpack could handle a lot of the compilation steps, such as loading TypeScript sources, gathering dependencies, and outputting the final assets.

This covered most of our goals so we knew this was the way to go.

Mjml templates full#

We expanded it to a proof-of-concept showing emails built in React, written in TypeScript, with a backend of MJML, and rendering to static HTML with full EJS still intact. It solved a lot of the headaches involved with building specifically for email clients, which is an area where we didn’t want to reinvent the wheel or spend too much time worrying about email client rendering differences.

Simplify process of building for email clientsĪfter some initial prototyping, we landed on using MJML, an email-centric markup language from Mailjet.

Build static output in HTML with EJS template scripts.

Ideally leverage React and TypeScript, which our other web tech stacks are built on.

We had some important qualities going into our prototype: The goal: Create a new build pipeline for email templates Initial proof-of-concept We wanted components, we wanted TypeScript, and importantly we wanted a drop-in replacement so we could seamlessly move from the legacy system without a hitch. Each template was basically it’s own unique file, with poor reusability. We had a simple template build system that handled some things like i18n and A/B tests, but all of our emails were barebones HTML with no tooling to help developers build out each email. Our existing approach to building email templates was lacking from a technical standpoint too.