Configuration

The @turbostarter/email package provides a simple and flexible way to send emails using various email providers. It abstracts the complexity of different email services and offers a consistent interface for sending emails with pre-defined templates.

To configure the email service, you need to set a few environment variables.

EMAIL_PROVIDER="resend"
EMAIL_FROM="hello@resend.dev"
EMAIL_THEME="orange"

Let's break down the variables:

• EMAIL_PROVIDER - The email provider to use. Defaults to Resend.
• EMAIL_FROM - The email address that emails will be sent from. Please make sure that the mail address and domain are verified in your mail provider.
• EMAIL_THEME - The theme color to use for the emails. See Themes for more information.

Configuration will be validated against the schema, so you will see the error messages in the console if something is not right.

Providers

TurboStarter supports multiple email providers, each with its own configuration. Below, you'll find detailed information on how to set up and use each supported provider. Choose the one that best fits your needs and follow the instructions in the respective accordion section.

Templates

In the @turbostarter/email package, we provide a set of pre-defined templates for you to use. You can find them in the packages/email/src/templates directory.

When you run your development server, you will be able to preview all available templates in the browser under http://localhost:3005.

Next to the templates, you can also find some shared components that you can use in your emails. The file structure looks like this:

Feel free to add your own templates and components or modify existing ones to match them with your brand and style.

How to add a new template?

We'll go through the process of adding a new template, as it requires a few steps to make sure everything works correctly.

export const EmailTemplate = {
  ...AuthEmailTemplate,
  WELCOME: "welcome",
} as const;

type WelcomeEmailVariables = {
  welcome: {
    name: string;
  };
};
 
export type EmailVariables = AuthEmailVariables | WelcomeEmailVariables;

import { Heading, Preview, Text } from "@react-email/components";
 
import { Button } from "../_components/button";
import { Layout } from "../_components/layout/layout";
 
import type { EmailTemplate, EmailVariables } from "../../types";
 
type Props = EmailVariables[typeof EmailTemplate.WELCOME];
 
export const Welcome = ({ name }: Props) => {
  return (
    <Layout>
      <Preview>Welcome to TurboStarter!</Preview>
      <Heading>Hi, {name}!</Heading>
 
      <Text>Start your journey with our app by clicking the button below.</Text>
 
      <Button>Start</Button>
    </Layout>
  );
};
 
Welcome.subject = "Welcome to TurboStarter!";
 
Welcome.PreviewProps = {
  name: "John Doe",
};
 
export default Welcome;

import { Welcome } from "./welcome";
 
export const templates = {
  ...
  [EmailTemplate.WELCOME]: Welcome,
} as const;

import { sendEmail } from "@turbostarter/email/server";
 
sendEmail({
  to: "user@example.com",
  template: EmailTemplate.WELCOME,
  variables: {
    name: "John Doe",
  },
});

Et voilà! You've just added a new email template to your application 🎉