Sending Email with MailGun JS

[00:00:00]
>> So this part is optional. If you don't wanna sign up for a Mailgun account, you don't have to. It's just a way to actually see real things happening with a serverless API. So the way that we're gonna make Mailgun work is, first, I'm going to add a couple dependencies.

[00:00:16]
So I'm gonna yarn add. Dotenv, which is for environment variables, because we're going to need API keys. And I'm also going to add Mailgun js, which is an SDK for doing MailGunny things without having to write a bunch of custom code. And while we're waiting for that to install, we can just go ahead and head over to the Mailgun app, Mailgun dot com.

[00:00:46]
And I'm going to login because I already have an account. If you want to set up an account, you can do that. But we're gonna need two pieces of data off this. I set up a dot env dot example so that you can see which pieces we need.

[00:01:02]
And it's also got links to where to find it, which sections we're going to. I've already set these up so that I don't have to show API keys on the stream. If you wanna find yours, you're sending domains will be here by default. When you sign up, you get this sandbox domain.

[00:01:22]
And your API keys are down at the bottom. And you can just click through to an API key, and you'll be able to grab this private API key, right? So that's what you'll need. You'll paste that API key up here. You'll paste the domain over here. And that'll give you the values that you need to actually operate the Mailgun API.

[00:01:43]
So inside of our contact form, or our contact handler, what we need to do is get access to those environment variables. So the first thing I'm gonna do is I'm gonna require dotenv. And I'm gonna use the config method on it. That actually causes it to load these dotenv file.

[00:02:05]
This one here is what'll get loaded by default. You can change the path to that if you want it to be something else. But dotenv is kind of the industry standard, that's why the package is called dotenv. Inside of this, I am going to just replace all of this.

[00:02:22]
Well, I guess, we'll actually use some of that. I'm gonna grab the Mailgun SDK by requiring Mailgun-js. And then, I'm going to initialize Mailgun by calling it with our API key, which is going to be at process dotenv dot malign API key. And then, I also need the domain, which is at maligun domain.

[00:02:56]
And I've spelled something wrong. Okay, that looks a little better. So we now have this mg which is an authenticated instance of Mailgun that we can send things from. So what I wanna do next, is I wanna take that event that we were logging, and that showed up up here somewhere What comes out of this is we get the body that we sent in the post request.

[00:03:30]
And so, I'm just gonna grab that out so we can use it. So our email, or data, sorry, is going to be json dot parse to turn the stringify JSON into real usable JavaScript object. We're gonna use the event dot body, and that's gonna give us the state.

[00:03:49]
So whatever we pass in our form, we're sending this state. We're gonna get that out in data. So then, we wanna set up our email. So this is what we're actually gonna send. And the requirement is a from address, so we'll say it's gonna come from me. You can add your own address if you'd like.

[00:04:11]
This is a kind of an email format, you do a name and then inside of brackets you do the email so that the email client knows who it came from. And then, we're gonna set up the to, and that's going to be data.name. And then, inside of the angle brackets, we'll do data dot email, okay?

[00:04:33]
Subject is going to be data dot subject. And the text will be data dot body. So once we have the email ready, we can just send it. So we'll do mg, and then this has a messages, kind of suite of things, so we'll initialize that. And then, I'm gonna send our email.

[00:04:57]
And what comes out the other side is an error and a message. And if nothing goes wrong, error is null. And if all goes well, the response that we get back, sorry, this is a response, not a message. So the response that we get back will be useful information about what just happened.

[00:05:20]
So what we can do is actually just send back this error because it'll be null. And otherwise, if things go well, we'll send back statusCode 200, and then we can send the body will be JSON.stringify, the response. And then, I can delete this down here. And that's really how it works, right?

[00:05:48]
That's really all we need. So from here, we can test this. Let's see, we've got it running. And so, if I just shoot off an empty message, we should get an error because Mailgun's gonna expect that there's a valid email address. So let's see if that works. Okay, something went wrong.

[00:06:07]
Our error message isn't super helpful, which is a little frustrating. So Let's send one that is valid so that we don't derail with me trying to debug why that error message isn't working the way I want. So we're gonna send this in, and we'll say that this is a test.

[00:06:37]
Hello from Frontend Masters. And I'm gonna send it. Okay, it was sent. And now, the true moment of truth. I'm gonna open my email on a stream. Hopefully everything is not gonna go. See, get anything weird? No, okay, hey, there we go. Hello from Frontend Masters. So we got the email.

[00:07:01]
It actually sent, it did what we want. And I'm gonna immediately close that. [LAUGH] So let's save our work. And that's In a nutshell, we have just written a legitimately full-featured application. We've got a form that is responding to user input. It's responding to server state. But we didn't have to stand up a server for that.

[00:07:23]
We wrote one function, and that function realistically is not doing a whole lot. This is a startlingly low amount of code to write for the handling server side logic. And if you've ever had to stand up a node server to be an API, or if you've stood up a Ruby or a PHP server to handle API requests, this is really powerful stuff.

[00:07:50]
This is really, really nice.