website·Indexed 32 days ago
https://www.mailing.run/docsAn open source tool for building, testing, and sending compatible, consistent emails using React components. It features a REST API for email templating, support for Remix and Turborepo, and a platform for managing mailing lists and subscription preferences.
emails directory to a Node application where templates are stored under source control. These templates can import shared constants, images, and components. To send emails, the sendMail function renders React MJML templates to HTML and sends them via a transport provider. Because it is built with Nodemailer, any options supported by Nodemailer can be passed into the sendMail function./signup on your production instance. This process secures the deployment, creates a Default list, and generates an API key for the /api/sendMail endpoint. Note that currently, only one user can sign up per instance.sendMail proxy. If you need to switch to a different sending system, you can either export the preview HTML or use the render function to process the React templates.defaultFrom in emails/index.ts. To send an email, import the sendMail function and provide the recipient details and the React component to be rendered as the email body.// emails/index.ts - Example SendGrid transport
import nodemailer from 'nodemailer';
const transport = nodemailer.createTransport({
host: "smtp.sendgrid.net",
port: 587,
auth: {
user: "apikey",
pass: process.env.SEND_GRID_KEY,
},
});
// Sending an email
import sendMail from "./path/to/emails";
import AccountCreated from "emails/AccountCreated";
await sendMail({
subject: "My First Email",
to: "tester@example.com",
cc: "tester+cc@example.com",
bcc: ["tester+bcc@example.com", "tester+bcc2@example.com"],
component: <AccountCreated firstName="Amelita" />,
});Use this setup when multiple apps in your monorepo need to send the same set of emails. This involves creating a dedicated internal package to house the templates.
packages/emails and install mailing, mailing-core, next, react, and react-dom. If using TypeScript, also install @types/react and @types/react-dom.packages/emails/index.ts to export your templates and emails/index.package.json for packages/emails with the correct entrypoint and add a dev script to start the preview server alongside your apps.packages/emails package into your target apps. For Next.js apps, add the package to transpilePackages in next.config.js to allow imports in server-side API routes.// next.config.js
module.exports = {
transpilePackages: ['@repo/emails'],
};sendMail function allows you to send emails by passing a React component, which is automatically rendered to HTML. Because it uses secrets, sendMail must be called from the back-end (e.g., a Next.js API route). It is an asynchronous function and should be used with await.import sendMail from "path/to/emails";
await sendMail({
to: "ok@ok.com",
subject: "Hello",
component: <MyTemplate data={myData} />
});# Build Command
npx mailing server build
# Output Directory
.mailing/.next# Install dependencies
yarn add mailing-core next react react-dom
yarn add --dev mailing
# Start preview server and scaffold emails directory
npx mailing
# Force TypeScript mode during scaffolding
npx mailing --typescriptEMAIL_PREFERENCES_URL constant from the mailing-core package in your template. When sendMail is called, Mailing automatically substitutes this constant with a unique link to the recipient's email settings page, where they can subscribe or unsubscribe from lists they have previously received mail from.import { EMAIL_PREFERENCES_URL } from "mailing-core";
// Inside your component/template
<a href={EMAIL_PREFERENCES_URL}>Unsubscribe</a>