astro-email
Integration for Astro to Generate HTML emails with React (react-email).
Installation
npm i astro-emailUsage
import { defineConfig } from "astro/config";
import email from "astro-email";
// https://astro.build/config
export default defineConfig({
integrations: [
email({
filename: "[name].html",
}),
],
});Development
npx astro devDevelopment preview with live reload.
Production
npx astro buildThis will generate HTML files for each .astro file in the src/pages directory.
Example
---
// Important! Without partial astro will render the default Doctype.
export const partial = true;
import * as React from "react";
import { Body, Container, Heading, Link, Text } from "@react-email/components";
import Mail from "astro-email/Mail.astro";
const fontFamily =
"-apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif";
const container: React.CSSProperties = {
paddingLeft: "45px",
paddingRight: "45px",
margin: "0 auto",
maxWidth: "640px",
};
---
<Mail>
<Body
style={{
fontFamily,
backgroundColor: "#ffffff",
margin: "0",
}}
>
<Container style={container}>
<Heading>My Email</Heading>
<Text>Lorem Ipsum</Text>
<Link href="https://example.com">Click me</Link>
</Container>
</Body>
</Mail>