Learn how the Nylas Email API makes it easy to integrate with 100% of email providers to add complete email draft and send functionality to your app.
If you want to add email functionality to your app, the ability to send an email is something your users probably expect. Investigating the various options for connecting to email service providers can be a daunting task that requires you to read through complex provider documentation and implement niche protocols like SMTP and IMAP. Why spend your time becoming an expert in email integrations when it could be better spent building the features your users love?
The Nylas Platform provides a single point of integration that instantly connects 100% of email, calendar and contacts providers to your app, via simple REST APIs. With Nylas, you can add email functionality to your app in minutes; this article will show you how build complete email draft and send functionality with the Nylas Email API.
Getting Started with Inbox Zero
Inbox Zero is a demo inbox application that you can use to explore and understand the Nylas API. It’s built using:
Next.js, a framework for making server-rendered React apps
Express.js to create RESTful endpoints on the server
Lowdb, a lightweight key-value database powered by Lodash, for storing user information
Drafting & Sending Emails
Inbox Zero is all about getting a grip on your incoming mail so we’ll focus on creating reply emails, but the same principles apply for new outgoing threads. Here’s the steps:
Create a draft and set up the metadata for a reply email.
Set up infrastructure to upload attachments
Put it all together and send an email!
Let’s get started!
Draft an Email
Inbox Zero includes a reply button that opens up a view to let the user draft an email. When the use hits this button, there are some states that need to be setup for the view initialization. The first step is to figure out who the email will be sent to. A reply should be sent to the previous sender, but it should also include anyone else who is on the to, cc, and bcc lines. Lastly, we don’t want to send the reply to the user themselves, so their email address is filtered out.
Once the recipient state is set up, it’s time to present the user with an email editor to let them write their message, and update the recipients as needed; Inbox Zero uses Quill for easy, rich text editing. On the back end, the content of the message is placed into the body property of the outgoing message object.
No email draft functionality is complete without the ability to add attachments. The first step to add an attachment is to upload the file to the Nylas Platform. To do so, we need an HTML form that the user can interact with to select a file that will be provided to the attachment upload route. Inbox Zero uses the Formidable module for interpreting the file upload data and Node’s built-in fs module for lifting the file from disk.
When the user hits the send button they trigger the reply route with the thread ID in the URL and the outgoing message information in the request body. The first thing this route does is mark the original email thread as read since the user has now addressed it.
Next, the thread metadata is used to set the subject line and to set the replyToMessageId to be the ID of the last message in the thread. Setting the replyToMessageId properly is important because it helps mail providers associate messages with threads so that they show up properly for the recipients.