"dev": "concurrently -kill-others npm:build:watch npm:serve"īy running npm run dev, we'll now have automatic hot-reload (upon changes) of our built templates served locally on the 8080 port. "build:watch": "tsx watch scripts/build.tsx", Npm i simple-hot-reload-server concurrently -D concurrently: Run multiple commands concurrently.We'll use it to serve our built templates during local development. simple-hot-reload-server: Serve static files from a directory with automatic hot-reload.Optional: Get a nicer development experienceĪs every project, we might need to iterate a bit while developing, so let’s get a simple but comfortable environment to work with: Let’s start by creating our three components (only Header.tsx is detailed here, but the principle is the same for other components):Ĭomponents/Header.tsx export function Header(`) Īs we wrote our templates/components and our build script in TypeScript, we must run it with a tool like tsx. So let’s say we have to write several email templates that all share the same header, main content, and footer, and that only some text change between them: 1. Using React templating features with MJMLĮven if React is mostly known as a reactive view library, it provides all the features you would expect from a templating engine and a composition library. But as soon as you need to go a bit further, you’ll need to pair it with a templating engine, like React. So as long as you have a single email template to write, or that none of your emails needs such templating features, MJML by itself is great, and sufficient. MJML also provides a way to include external .mjml files in your templates using, which allows you to reuse some markup in several emails.īut as MJML is not a templating language, there are things it doesn’t provide, and that you might need: To install it from npm, without surprise: npm i mjml It’s an awesome framework that abstract most of the pain of writing responsive HTML emails by providing a set of stylable MJML custom elements (buttons, columns, images, etc… transformed to plain HTML once built) that you can reuse to write the markup of your emails. If you ever looked up at what an email’s source code looks like, you wouldn’t even consider writing it in plain HTML (really, you can’t be that crazy)… Ī foretaste of hell (circa 2022, colorized)įortunately, MJML was created to save our souls. Writing good looking emails is usually not the first task of your product backlog, but eventually, every product ends up needing it.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |