docs: jsx email example

examples/aws-jsx-email/.gitignore

@@ -0,0 +1,15 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+node_modules
+
+# env
+.env
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+.pnpm-debug.log*
+
+# sst
+.sst

examples/aws-jsx-email/README.md

@@ -0,0 +1 @@
+# aws-jsx-email

examples/aws-jsx-email/index.ts

@@ -0,0 +1,37 @@
+import { Resource } from "sst";
+import { render } from "jsx-email";
+import { Template } from "./templates/email";
+import { SESv2Client, SendEmailCommand } from "@aws-sdk/client-sesv2";
+
+const client = new SESv2Client();
+
+export const handler = async () => {
+  await client.send(
+    new SendEmailCommand({
+      FromEmailAddress: Resource.MyEmail.sender,
+      Destination: {
+        ToAddresses: [Resource.MyEmail.sender],
+      },
+      Content: {
+        Simple: {
+          Subject: {
+            Data: "Hello World!",
+          },
+          Body: {
+            Html: {
+              Data: await render(Template({
+                email: "[email protected]",
+                name: "Spongebob Squarepants"
+              })),
+            },
+          },
+        },
+      },
+    })
+  );
+
+  return {
+    statusCode: 200,
+    body: "Sent!"
+  };
+};

examples/aws-jsx-email/package.json

@@ -0,0 +1,22 @@
+{
+  "name": "aws-jsx-email",
+  "version": "0.0.0",
+  "private": true,
+  "description": "A simple starter for jsx-email",
+  "scripts": {
+    "build": "email build ./templates",
+    "create": "email create",
+    "dev": "email preview ./templates"
+  },
+  "dependencies": {
+    "@aws-sdk/client-sesv2": "^3.651.1",
+    "jsx-email": "^1.10.11",
+    "sst": "latest"
+  },
+  "devDependencies": {
+    "@types/aws-lambda": "8.10.145",
+    "@types/react": "^18.2.0",
+    "react": "^18.2.0",
+    "typescript": "^5.2.2"
+  }
+}

examples/aws-jsx-email/sst-env.d.ts

@@ -0,0 +1,18 @@
+/* This file is auto-generated by SST. Do not edit. */
+/* tslint:disable */
+/* eslint-disable */
+import "sst"
+export {}
+declare module "sst" {
+  export interface Resource {
+    "MyApi": {
+      "name": string
+      "type": "sst.aws.Function"
+      "url": string
+    }
+    "MyEmail": {
+      "sender": string
+      "type": "sst.aws.Email"
+    }
+  }
+}

examples/aws-jsx-email/sst.config.ts

@@ -0,0 +1,63 @@
+/// <reference path="./.sst/platform/config.d.ts" />
+
+/**
+ * ## AWS JSX Email
+ *
+ * Uses [JSX Email](https://jsx.email) and the `Email` component to design and send emails.
+ *
+ * To test this example, change the `sst.config.ts` to use your own email address.
+ *
+ * ```ts title="sst.config.ts"
+ * sender: "[email protected]"
+ * ```
+ *
+ * Then run.
+ *
+ * ```bash
+ * npm install
+ * npx sst dev
+ * ```
+ *
+ * You'll get an email from AWS asking you to confirm your email address. Click the link to
+ * verify it.
+ *
+ * Next, go to the URL in the `sst dev` CLI output. You should now receive an email rendered
+ * using JSX Email.
+ *
+ * ```ts title="index.ts"
+ * import { Template } from "./templates/email";
+ *
+ * await render(Template({
+ *   email: "[email protected]",
+ *   name: "Spongebob Squarepants"
+ * }))
+ * ```
+ *
+ * Once you are ready to go to production, you can:
+ *
+ * - [Request production access](https://docs.aws.amazon.com/ses/latest/dg/request-production-access.html) for SES
+ * - And [use your domain](/docs/component/aws/email/) to send emails
+ */
+export default $config({
+  app(input) {
+    return {
+      name: "aws-jsx-email",
+      removal: input?.stage === "production" ? "retain" : "remove",
+      home: "aws",
+    };
+  },
+  async run() {
+    const email = new sst.aws.Email("MyEmail", {
+      sender: "[email protected]",
+    });
+    const api = new sst.aws.Function("MyApi", {
+      handler: "index.handler",
+      link: [email],
+      url: true,
+    });
+
+    return {
+      api: api.url,
+    };
+  },
+});

examples/aws-jsx-email/templates/email.tsx

@@ -0,0 +1,96 @@
+import {
+  Body,
+  Button,
+  Container,
+  Head,
+  Hr,
+  Html,
+  Link,
+  Preview,
+  Section,
+  Text
+} from 'jsx-email';
+
+
+export type TemplateProps = {
+  email: string;
+  name: string;
+}
+
+const main = {
+  backgroundColor: '#f6f9fc',
+  fontFamily:
+    '-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Ubuntu,sans-serif'
+};
+
+const container = {
+  backgroundColor: '#ffffff',
+  margin: '0 auto',
+  marginBottom: '64px',
+  padding: '20px 0 48px'
+};
+
+const box = {
+  padding: '0 48px'
+};
+
+const hr = {
+  borderColor: '#e6ebf1',
+  margin: '20px 0'
+};
+
+const paragraph = {
+  color: '#777',
+  fontSize: '16px',
+  lineHeight: '24px',
+  textAlign: 'left' as const
+};
+
+const anchor = {
+  color: '#777'
+};
+
+const button = {
+  backgroundColor: 'coral',
+  borderRadius: '5px',
+  color: '#fff',
+  display: 'block',
+  fontSize: '16px',
+  fontWeight: 'bold',
+  textAlign: 'center' as const,
+  textDecoration: 'none',
+  width: '100%',
+  padding: '10px'
+};
+
+export const defaultProps = {
+  email: '[email protected]',
+  name: 'Bruce Wayne'
+} as TemplateProps;
+
+export const templateName = 'aws-jsx-email';
+
+export const Template = ({ email, name }: TemplateProps) => (
+  <Html>
+    <Head />
+    <Preview>This is our email preview text for {name} &lt;{email}&gt;</Preview>
+    <Body style={main}>
+      <Container style={container}>
+        <Section style={box}>
+          <Text style={paragraph}>This is our email body text</Text>
+          <Button style={button} href="https://example.com">
+            Hi {name}
+          </Button>
+          <Hr style={hr} />
+          <Text style={paragraph}>
+            This is text content with a{' '}
+            <Link style={anchor} href="mailto:{email}">
+              link
+            </Link>
+            .
+          </Text>
+        </Section>
+      </Container>
+    </Body>
+  </Html>
+);

examples/aws-jsx-email/tsconfig.json

@@ -0,0 +1,24 @@
+{
+  "$schema": "https://json.schemastore.org/tsconfig",
+  "compilerOptions": {
+    "declaration": true,
+    "declarationMap": true,
+    "esModuleInterop": true,
+    "jsx": "react-jsx",
+    "lib": ["ES2023"],
+    "module": "ESNext",
+    "moduleResolution": "node",
+    "noEmitOnError": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "preserveSymlinks": true,
+    "preserveWatchOutput": true,
+    "resolveJsonModule": true,
+    "skipLibCheck": true,
+    "strict": true,
+    "strictNullChecks": true,
+    "target": "ESNext"
+  },
+  "exclude": ["**/dist", "**/node_modules", "sst.config.ts"],
+  "include": ["templates", "index.ts", "sst-env.d.ts"]
+}