📧 Email Frontend V2

It creates responsive email content using React.

Development 👨‍💻

Starting a local development server 🏃‍♂️

To start working on the email frontend you need to install all dependencies using yarn command. Once all dependencies are installed you can run yarn dev to start the local development server. This server will be accessible using http:://localhost:3006. Every time when you make changes in the codebase it will restart and apply them automatically.

Building blocks 🧱

Layout

Building an email has some differences from building a normal web page. Email clients are usually very dumb and have pure support of the modern HTML and CSS features. If you want to know if some feature can be used in an email you can always check it on https://www.caniemail.com/. Unfortunately, you can't use Flexbox or Grid to build your email layouts. The only way to build robust layouts is to use tables. A lot of tables! You can think about an email layout as a combination of tables.

To encapsulate this logic and make the developer experience better we encapsulated it into a Grid component:

• Grid
• Grid.Row
• Grid.Column

These should be your main blocks for building emails. It has the logic to handle a responsive layout. And if there are some bugs it will be easier to fix that for all emails. That is why you should try to avoid using custom div elements and use Grid components.

Text

When you need to specify some text in the email please make sure that you use BodyText or HeadlineText components. It will make sure that all your emails look consistent. These components have built-in accessibility support ensuring that the text is visible on the background. By default, it picks black or white color based on the section background color. In case you want to render the text on a different background you have to provide the background color to the BodyText or the HeadlineText components using onBackground prop (see Footer).

Styling and Theming 💅

Some email clients don't work well with an external CSS so all styles have to be applied inline. This will make sure that your email looks the same on all clients.

It's also best to avoid using margin to separate elements and use padding instead.

To keep our emails consistent we created a theme object. Please check it out and use the tokens almost for any styling, especially for coloring, spacings, and typography. This theming will allow the email frontend v2 to work as a white-label for our partners.

Building emails 💌

This service is built similar to NextJS framework meaning that there are top-level components that work like pages or routes. These components exist in the ./src/emails folder. Every component in there corresponds to a standalone REST API route. For example if it's required to create a sale email the server will look for sale.tsx file in the ./src/emails folder. Then based on the React component it will validate the request body using prop-types and generate HTML using ReactDOMServer.

Here is the endpoint that you can call to create an email content - POST http://localhost:3006/:email, where :email is the email type.

Previewing emails 👀

Every email has a preview mode that helps to see the content visually. To see the preview you can send a GET request to the following URL http://localhost:3006/:email, where :email is the email type that your want to view, or open that link in a browser (see example http://localhost:3006/sale). The preview feature is built using sampleProps object that exists for every email.