You are starting a new project in Vercel, and suddenly you realize you need to send transactional emails for actions like user sign-ups or order completions.
A quick search will lead you to Mailgun, but guess what, you discover that their free tier is no longer available 🥲.
Don’t worry! This isn’t a dead end, I’ll show you how to send and receive emails completely for FREE on your custom domain.
Let’s dive into the different solutions.
Email providers
At first, I tried Mailgun and figured out that they no longer offer a free tier. Later, I went for SendGrid, but my registration was rejected without reason 🥲. Then, I found Brevo, the perfect solution 🤩.
Not only do they provide 300 free messages a day, but they also offer an awesome email template creation interface that immensely simplifies the creation of my emails.
Provider | Outgoing emails/day | Free Tier |
|---|---|---|
Brevo | 300 | Yes |
Mailgun | - | No, 30 days trial |
Sendgrid | 100 | Yes |
Creating email templates
Creating email templates is pretty straightforward, and you can leverage existing templates as a starting point. For customization, you can use placeholders, such as {{params.userName}}.
A more detailed explanation can be found here.
Notice that email templates have an ID; we will use them in the next section to map the template IDs to their corresponding placeholders in TypeScript.
Sending from your domain
Just follow the instructions in the Brevo documentation to add Brevo's DNS records to your domain provider. After you've done that, Brevo will be able to send emails from your domain, like [email protected].
Now to the code, the npm package @cuecodes/emails is the fastest, easiest way to send emails, and it supports types for your email templates ❤️.
Create the client
emails.ts
Use the client to send the email.
example.ts
Receiving emails
You can send emails from your custom domain [email protected] but something is missing, you want any email sent to your domain to be forwarded automagically to your personal email, so you can keep track of what’s going on.
The key here is Cloudflare.
Register, it’s free. You will first need to add your domain to Cloudflare DNS first. This means that you will manage your DNS records now in Cloudflare, trust me, it’s very simple there. 🤩
And now to the fun part, Email forwarding.
Navigate to the email page on the Cloudflare dashboard.
Select Configure.
Enter the email address you want to create. Alternatively, you can choose to use a catch-all so that all possible emails addresses in your domain are considered valid and forwarded.
The DNS configuration step is automatic if you don’t have email configured for your domain. Otherwise, they provide straightforward guidance on how to best configure it.
Lastly, you just need to validate that the destination email belongs to you. Super simple, and exactly the same as you’ve done a million times before.
Now you are all set! Happy emailing 🎉
