Wraps Logo
DocsHome
Email Quickstart
Quickstart / Remix

Send Email from Remix

Deploy email infrastructure and send your first email from a Remix application.

Prerequisites

Before you begin, make sure you have:

  • Node.js 18 or later installed
  • AWS credentials configured (AWS Setup Guide)
  • A domain you own

1
Deploy Infrastructure

Run the Wraps CLI to deploy email infrastructure to your AWS account:

GNU Bashterminal.sh
npx @wraps.dev/cli email init

2
Add Your Domain

Add and verify your sending domain with AWS SES:

GNU Bashterminal.sh
npx @wraps.dev/cli email domains add -d yourdomain.com

DNS Setup

The CLI will output DKIM records to add to your DNS provider. Once added, verify them with npx @wraps.dev/cli email domains verify -d yourdomain.com

3
Install the SDK

Install the @wraps.dev/email package in your Remix project:

GNU Bashterminal.sh
npm install @wraps.dev/email

4
Send from a Remix Action

Create a route with a Remix action that sends an email when a form is submitted:

Reactapp/routes/contact.tsx
import type { ActionFunctionArgs } from '@remix-run/node';import { json } from '@remix-run/node';import { Form, useActionData } from '@remix-run/react';import { WrapsEmail } from '@wraps.dev/email';const email = new WrapsEmail();export async function action({ request }: ActionFunctionArgs) {  const formData = await request.formData();  const to = formData.get('email') as string;  const name = formData.get('name') as string;  const result = await email.send({    from: 'hello@yourdomain.com',    to,    subject: `Thanks for reaching out, ${name}!`,    html: `<h1>We received your message</h1><p>We'll get back to you soon.</p>`,  });  return json({ success: true, messageId: result.messageId });}export default function Contact() {  const data = useActionData<typeof action>();  return (    <Form method="post">      <input name="name" placeholder="Your name" required />      <input name="email" type="email" placeholder="Your email" required />      <button type="submit">Send</button>      {data?.success && <p>Email sent!</p>}    </Form>  );}

How it works

  • The action function runs on the server when the form is submitted
  • useActionData gives you the result in the component for UI feedback
  • The email client is initialized once at module level and reused across requests

5
Deploy

Deploy your Remix application using your preferred hosting provider. Set the following environment variables in your deployment configuration:

Environment Variables

  • AWS_REGION — The AWS region where your infrastructure is deployed
  • AWS_ROLE_ARN — The IAM role ARN for OIDC authentication (or use access keys)

Next Steps

Email SDK Reference

Learn about all available methods, options, and advanced features.

View SDK Docs
Error Codes

Reference for all error codes and troubleshooting steps.

View Errors

Need Help?

If you run into any issues, check our GitHub discussions or open an issue.

Get Help