Sending Emails

With Wasp's email-sending feature, you can easily integrate email functionality into your web application.

main.wasp

app Example {
  ...
  emailSender: {
    provider: <provider>,
    defaultFrom: {
        name: "Example",
        email: "hello@itsme.com"
    },
  }
}

Choose from one of the providers:

• Mailgun,
• SendGrid
• or the good old SMTP.

Optionally, define the defaultFrom field, so you don't need to provide it whenever sending an e-mail.

Sending e-mails

Sending emails while developing

When you run your app in development mode, the e-mails are not actually sent. Instead, they are logged to the console.

In order to enable sending e-mails in development mode, you need to set the SEND_EMAILS_IN_DEVELOPMENT env variable to true in your .env.server file.

Before jumping into details about setting up various providers, let's see how easy it is to send e-mails.

You import the emailSender that is provided by the @wasp/email module and call the send method on it.

src/actions/sendEmail.js

import { emailSender } from '@wasp/email/index.js'

// In some action handler...
const info = await emailSender.send({
  from: {
    name: 'John Doe',
    email: 'john@doe.com',
  },
  to: 'user@domain.com',
  subject: 'Saying hello',
  text: 'Hello world',
  html: 'Hello <strong>world</strong>'
})

Let's see what the send method accepts:

• from - the sender's details.
  • name - the name of the sender
  • email - the e-mail address of the sender
  • If you set up defaultFrom field in the main.wasp, this field is optional.
• to - the recipient's e-mail address
• subject - the subject of the e-mail
• text - the text version of the e-mail
• html - the HTML version of the e-mail

The send method returns an object with the status of the sent e-mail. It varies depending on the provider you use.

Providers

For each provider, you'll need to set up env variables in the .env.server file at the root of your project.

Using the SMTP provider

First, set the provider to SMTP in your main.wasp file.

main.wasp

app Example {
  ...
  emailSender: {
    provider: SMTP,
  }
}

Then, add the following env variables to your .env.server file.

.env.server

SMTP_HOST=
SMTP_USERNAME=
SMTP_PASSWORD=
SMTP_PORT=

Many transactional email providers (e.g. Mailgun, SendGrid but also others) can also use SMTP, so you can use them as well.

Using the Mailgun provider

Set the provider to Mailgun in the main.wasp file.

main.wasp

app Example {
  ...
  emailSender: {
    provider: Mailgun,
  }
}

Then, get the Mailgun API key and domain and add them to your .env.server file.

Getting the API key and domain

1. Go to Mailgun and create an account.
2. Go to API Keys and create a new API key.
3. Copy the API key and add it to your .env.server file.
4. Go to Domains and create a new domain.
5. Copy the domain and add it to your .env.server file.

.env.server

MAILGUN_API_KEY=
MAILGUN_DOMAIN=

Using the SendGrid provider

Set the provider field to SendGrid in your main.wasp file.

main.wasp

app Example {
  ...
  emailSender: {
    provider: SendGrid,
  }
}

Then, get the SendGrid API key and add it to your .env.server file.

Getting the API key

1. Go to SendGrid and create an account.
2. Go to API Keys and create a new API key.
3. Copy the API key and add it to your .env.server file.

.env.server

SENDGRID_API_KEY=