Introduction

Mails play a crucial role in any application, it's used to send notifications, welcome emails, and many other use cases.

Warlock provides a simple way to send emails using NodeMailer.

Setup

By default Warlock installs nodemailer so you don't need to install it manually.

Now just head to the Mail Configurations file, and set your mail configurations.

Sending Emails

After we configured the mailer, we can now send emails using the sendMail function.

import { sendMail } from "@mongez/warlock";

sendMail({
  to: "your-email@exampl.com",
  subject: "Welcome to Warlock",
  html: "<h1>Welcome to Warlock</h1>",
});

The sendMail function accepts an object that contains the following properties:

• to: The email address of the recipient.
• subject: The email subject.
• html: The email body, it could be a string or an HTML string.
• text: The email body, it should be only a plain text.
• attachments: An array of attachments, each attachment is an object that contains the following properties:
  • filename: The file name.
  • path: The file path.
  • content: The file content.
  • encoding: The file encoding, the default value is utf-8.
  • contentType: The file content type, the default value is text/plain.
  • cid: The file content id, the default value is null.
• from: it is optional as it will be taken from the mail configurations, but you can override it here.
• cc: An array of email addresses to be added to the cc field.
• bcc: An array of email addresses to be added to the bcc field.

React Mails

React is a popular library to build user interfaces, and it's used in many applications.

Luckily, Warlock uses a simple react component to render the email body, so you can use react to build your emails.

Send a react mail

To send a react mail, use sendReactMail, it takes everything that sendMail takes, except the html is replaced by render property

src/app/users/mail/verifyEmail.tsx

import { sendReactMail } from "@mongez/warlock";
import EmailVerification from "./../components/EmailVerification";
import { User } from "./../models/user";

export async function sendVerificationMail(user: User) {
  await sendReactMail({
    to: user.email,
    subject: "Verify your email",
    render: <EmailVerification user={user} />,
  });
}

Now define the EmailVerification component:

src/app/users/components/EmailVerification.tsx

import { User } from "./../models/user";

export default function EmailVerification({ user }: { user: User }) {
  return (
    <div>
      <h1>Verify your email</h1>
      <p>
        Hello {user.name}, please click the following link to verify your email
        address.
      </p>
      <p>Your verification code is: {user.get("activationCode")}</p>
    </div>
  );
}

Using Styled Components

The project is installed with Emotion Styled Components so you can use it to style your emails.

src/app/users/components/EmailVerification.tsx

import { User } from "./../models/user";
import styled from "@emotion/styled";

const Container = styled.div`
  background: #f5f5f5;
  padding: 20px;
  border-radius: 5px;
`;

export default function EmailVerification({ user }: { user: User }) {
  return (
    <Container>
      <h1>Verify your email</h1>
      <p>
        Hello {user.name}, please click the following link to verify your email
        address.
      </p>
      <p>Your verification code is: {user.get("activationCode")}</p>
    </Container>
  );
}

note

Please note that not all CSS properties are supported in emails, so make sure to check the Supported CSS Properties before using any CSS property.

You can of course remove it if you don't need it.