Embedding Mazel in Laravel0:00
If you're sending email through an application, then you essentially have two projects. You have your Mazel project, then you have your other application project, like a Laravel project. So the question becomes, how do you organize these things? Do you keep them separate? Do you put the Mazel project inside of the Laravel project? I mean, really, it's up to you. There is no correct answer. However, in this episode, I'm going to show you how we can include the Mazel project in our Laravel project and change the config to build us some Blade views based upon our
However, in this episode, I'm going to show you how we can include the Mazel project in our Laravel project and change the config to build us some Blade views based upon our email templates. So I already have a Laravel application up and running. This is actually what I used a few episodes ago when we needed a web service. You can see this is the web service right here. It is hard-coded data. There's nothing special about this. And this is the only thing that has changed within this bare-bones, plain-Jane Laravel project.
Creating the Mazel Project0:55
And this is the only thing that has changed within this bare-bones, plain-Jane Laravel project. So in the command line, let's do this. We will create a new Mazel project. Now we could copy the existing Mazel project, but I mean, it's quick enough to create a new one. And plus, we get the opportunity to change the name if we want to. I'm going to stick with Mazel just because we know exactly what this folder would contain. So as far as the starter, we're going to use the default, yes, install the dependencies, and then it will install our Mazel project.
So as far as the starter, we're going to use the default, yes, install the dependencies, and then it will install our Mazel project. Now I took a few moments to copy over some files from our previous project. So if we look at templates, there is the invoice approval. That's all we're going to look at in this episode. We're not going to worry about the document approval or the digest. We're just going to work with this invoice approval. I also copied over the layout as well as the notification component. So we have everything that we need to generate emails. Now we just need to do that.
Configuring Blade Build Output1:54
So we have everything that we need to generate emails. Now we just need to do that. So we need to go to our production configuration. And what we're going to do is change the build path so that whenever we build our emails, they are going to go inside of our Laravel's projects, resources, views, and then we will create another directory called emails. So that path will be going back one so that we can get to the resources, views, and emails. So whenever we build our project, it's going to build that invoiceapproval.html, and it's going to put it inside of this folder. But really, we want a Blade view.
going to put it inside of this folder. But really, we want a Blade view. We don't want just an HTML. So what we can do is change our configuration so that we will end up with a Blade view. We'll add an extension option so that the files we generate are going to have the extension of blade.php. So that's perfect. Now if we had any assets, we could also copy those over as well. Now we didn't really use any assets, but there is the Mazel logo. So what we'll do is tell the build process to copy those assets to public/images/emails.
Now we didn't really use any assets, but there is the Mazel logo. So what we'll do is tell the build process to copy those assets to public/images/emails. So after we are done building our email, we will see that file inside of our public folder. And so with that in place, we can go to the command line. Let's cd into the Mazel directory, and then let's run build. This is going to build our project for production, and if we go back to our code editor, here inside of our views, we will see our emails folder, and then our new email blade view. Now that's great and all, but there is going to be an issue. So if we take a look here, we can see that, well, we get the exact same result that we would expect.
Handling Blade Variables3:41
So if we take a look here, we can see that, well, we get the exact same result that we would expect. Because if we take a look at our Blade template, you know, we just have this username here, and then we have this invoice ID. These were placeholders to where we need to provide some actual data. So our Blade view needs to be updated so that we provide a username to the view so that we can output that here, and the same would be for the invoice ID. Now we don't want to do this manually, because the next time we generate our email, all of those changes are going to go away. So we want to make this part of the template itself, and it's easy enough to do.
those changes are going to go away. So we want to make this part of the template itself, and it's easy enough to do. So back inside of our template, we need to change this so that we have our double curly braces and then our username variable as we would access it with php. However, this is a problem because Mazel expects anything inside of the double curly braces to be a JavaScript expression. Now of course, this technically can be a JavaScript expression, but it's going to try to find a variable called $username and provide a value there. And it's not going to find one, so we're going to end up with an error. So what we want is this exact literal string in the resulting Blade view.
And it's not going to find one, so we're going to end up with an error. So what we want is this exact literal string in the resulting Blade view. So we can just prepend that with an at sign, and that escapes this whole expression so that we get the proper output. So we will need to do the same thing for the invoiceID. So I'm going to change this URL so that it's invoices, and then we will have our invoiceID. So now we can rebuild our email, and when that is done, we will see our Blade view updated. So now we have our username as well as the invoiceID. So our Blade view is ready to go.
Generating Mail and Command5:22
So now we have our username as well as the invoice ID. So our Blade view is ready to go. We just need to create an email and a command to send that email. So let's go to artisan. We want to make mail, and let's call this InvoiceApprovalMail. And while we're here, let's also use artisan to create a command to send that email. So we will make a command, and let's just call it SendInvoiceApprovalCommand. It's a long name, but I don't know what else to call it. At least it's explicit, so we know exactly what that is. So if we go to our app folder, inside of the mail folder, we now have this InvoiceApprovalMail.
At least it's explicit, so we know exactly what that is. So if we go to our app folder, inside of the mail folder, we now have this InvoiceApprovalMail. So we want to scroll down to the content, and we want to change the view so that we use our email's InvoiceApprovalView. But we also have some data that we need to provide to it. Now ideally, this would be dynamic, but I don't really have information to do that. So we're just going to hard code this so that the username is going to be Jeremy, in my case. And then the invoiceID will be whatever we want. The number one's fine.
And then the invoice ID will be whatever we want. The number one's fine. Now for the subject line, I want to change this so that it's not InvoiceApprovalMail, it's InvoiceApprovalNotification. And that's really all that we need to do for our email here. So we're done as far as our email is concerned. Let's go back to App, Console, Commands, and then we see the SendInvoiceApproval command. So here we can see the signature of this command. This is what we will call in order to actually send that email. If we wanted to give it a command description, which I guess we could do that, SendInvoiceApprovalEmail.
Sending and Testing Email7:00
This is what we will call in order to actually send that email. If we wanted to give it a command description, which I guess we could do that, SendInvoiceApprovalEmail. And then for the handle method, this is what is actually going to execute. So we are going to mail to, and then you can pick whatever email address that you want. So let's have jeremy@jeremy.com, and we want to send our new InvoiceApprovalMail. Now of course, we can test this very easily. All we need to do is go to our environment, let's get to the mail settings, and then we just need to change these mail settings. So for actually sending an email, let's change the mail mailer to SMTP. The host needs to be whatever host you want to send the email.
So for actually sending an email, let's change the mail mailer to smtp. The host needs to be whatever host you want to send the email. I'm going to use Gmail. That means we need to use port 465. Encryption is going to use TLS. The from email address is going to be my email address. And then we can keep app name. Now of course, you will need to change the mail username, the mail password, and the mail from address. And you will also need to be sure that whatever email address you use inside of the SendInvoiceApproval
mail from address. And you will also need to be sure that whatever email address you use inside of the SendInvoiceApproval command is a legit email address. But when that's done, just go back to the command line, and we are going to use php artisan to call that command. So that was app/SendInvoiceApproval.php. Now if you get an immediate response, then something probably went wrong. However, that took a few seconds for me, so hopefully that means that the email was successfully sent and sure enough it was successful. We can see that this email looks almost exactly like our template.
sent and sure enough it was successful. We can see that this email looks almost exactly like our template. We have the SendInvoiceApproval notification, we have the blue background for the header. However, the body background didn't come through, and I guess what we should have done is save that for a div, but that's okay. The name that we provided, the username, Jeremy, is there. If we hover over the link, we can see that the number 1 is also part of the URL. So now our emails are generated as Blade views, and we can use them practically with no modification inside of our Laravel project. Before we go, I want to show you a very useful resource for anyone that needs to create HTML
Using Can I Email9:11
inside of our Laravel project. Before we go, I want to show you a very useful resource for anyone that needs to create HTML email. It's called Can I Email, and the idea behind it is a lot like the Can I Use website. So if there is a particular feature that you want to check, you can simply search for that feature, like font-face in this case, and it will show you the email clients that do or, in this case, do not support font-face, and there's a lot that don't. But as I've mentioned several times throughout this series, there is no standard when it comes to HTML email support. So Can I Email is an invaluable resource that you will need to use to generate HTML emails.
comes to HTML email support. So Can I Email is an invaluable resource that you will need to use to generate HTML emails that work across a broad variety of clients.
