Files
open-saas/opensaas-sh/blog/src/content/docs/guides/email-sending.mdx
Martin Šošić 04553cd60c All in dirs (#154)
* Split the project into template and opensaas-sh (demo app (diff) + docs).

* fix
2024-06-04 13:24:32 +02:00

97 lines
3.7 KiB
Plaintext

---
title: Email Sending
banner:
content: |
⚠️ Open SaaS is now running on <a href='https://wasp-lang.dev'>Wasp v0.13</a>! If you're running an older version of Open SaaS, please follow the
<a href="https://wasp-lang.dev/docs/migrate-from-0-12-to-0-13">migration instructions here</a> ⚠️
---
import { Tabs, TabItem } from '@astrojs/starlight/components';
This guide explains how to use the integrated email sender and how you can integrate your own account in this template.
## Sending Emails
### The `Dummy` Email Provider (for Local Dev Only)
By default we've set up the email sender to use the `Dummy` provider. This is **for local development only** and no emails will actually be sent out!
To obtain an email verification token/link, you must check the server logs on initial sign up. You can click this link to verify your email and continue with the sign up process.
```tsx title="main.wasp"
app SaaSTemplate {
// ...
emailSender: {
provider: Dummy,
defaultFrom: {
name: "Open SaaS App",
email: "me@example.com"
},
},
```
Note that your app will not build if using the `Dummy` provider and you must switch to a production-ready provider in order to do so.
### Using a Production-Ready Email Provider (e.g. SendGrid)
To change your email provider to a production-ready one, such as SendGrid, you'll want to configure your `emailSender` like so:
```tsx title="main.wasp"
app SaaSTemplate {
// ...
emailSender: {
provider: SendGrid,
defaultFrom: {
name: "Open SaaS App",
// When using SendGrid, you must use the same email address that you configured your account to send out emails with!
email: "me@example.com"
},
},
```
This means that you can send emails from your app using the `send` function from the `email` modul provided by Wasp:
```tsx title="src/server/webhooks.ts"
import { emailSender } from "wasp/server/email";
//...
if (subscription.cancel_at_period_end) {
await emailSender.send({
to: customer.email,
subject: 'We hate to see you go :(',
text: 'We hate to see you go. Here is a sweet offer...',
html: 'We hate to see you go. Here is a sweet offer...',
});
}
```
In the example above, you can see that we're sending an email to the customer when we receive a cancel subscription event within the Stripe webhook.
This is a powerful feature and super simple to use.
## Integrate your email sender
To set up your email sender, you first need an account with one of the supported email providers.
<Tabs>
<TabItem label="SendGrid">
- Register at SendGrid.com and then get your [API KEYS](https://app.sendgrid.com/settings/api_keys).
- Copy yours to the `.env.server` file under the `SENDGRID_API_KEY` variable.
</TabItem>
<TabItem label="MailGun">
- Go to [Mailgun](https://mailgun.com) and create an account.
- Go to [API Keys](https://app.mailgun.com/app/account/security/api_keys) and create a new API key.
- Copy the API key and add it to your .env.server file under the `MAILGUN_API_KEY=` variable.
- Go to [Domains](https://app.mailgun.com/app/domains) and create a new domain.
- Copy the domain and add it to your .env.server file as `MAILGUN_DOMAIN=`.
</TabItem>
</Tabs>
Make sure to change the `defaultFrom` email address in the `main.wasp` file to use the same email address that you configured your account to send out emails with!
```tsx title="main.wasp" {5}
emailSender: {
provider: SendGrid,
defaultFrom: {
name: "Open SaaS App",
email: "me@example.com" // <--- same email address you configured your SendGrid account to send emails with!
},
```
If you want more detailed info, or would like to use SMTP, check out the [Wasp docs](https://wasp-lang.dev/docs/advanced/email).