How to send an Email using Angular, Sails.js, and Mailgun

I recently spent quite some time scouring the internet for a tutorial on how to send an email from the Mailgun service using Angular2 as my front-end and Sails.js as the back-end. I found this great tutorial that uses the sails-hook-email package, but since I was using Angular2, I needed a few more steps. Most of the Mailgun tutorials I found show you how to use Express.js , and because I am new to Sails, I struggled a bit. But alas, a solution was found! And today I would like to share it with you.

This article is going to take you through the steps of:

A few disclaimers:

  • As I am working on this project locally at the time, I am using a sandbox domain with Mailgun. In order to test that an email is being sent, you will need to add a verified email address to your Mailgun account and use that email address in your form. If you are not using the sandbox domain, you will have to configure DNS records and verify the domain.
  • This tutorial assumes you have set up your Angular2 app and your Sails app.

Mailgun

  1. Set up your Mailgun account.
  2. Take note of your Secret API Key, Sandbox Domain, Default SMTP Login, and Default Password (you will use them in your configurations in your Sails app).
  3. Add an email address to the Authorized Recipients so you are able to test the Mailgun service without adding your credit card information or buying a custom domain.

Sails.js

  1. Install mailgun.js in your sails app
npm install mailgun.js --save

2. Install the sails-hook-email package

npm install sails-hook-email  --save

3. Create a model.js file and controller.js file using the sails generate api command. Name it email.

sails generate api email

4. In your email.js model file, structure the model similar to the object sent from the client side (we will do this in the Angular2 section).

5. In your EmailController.js file, use the sails.hooks.email.send(template, data, options, cb) function to send your email.

The first argument in the sails.hooks.email.send(template, data, options, cb)function is the name of the view template we are going to use. We will need to create that template file in the views folder. The view templates path defaults to views/emailTemplates. Please follow the following path structure when creating your view:

your-sails-app/views/emailTemplates/sendEmail/html.ejs

6. In your sails config folder, create a file called email.js. This is where you will set your Mailgun configurations, using your Default SMTP Login and Default Password. Remember to set testMode to false, otherwise your email is sent to a .txt file rather than actually being sent.

7. In your models.js file in the config folder, set migrate to ‘alter’. This setting controls the auto-migration strategy when you run your Sails app. ‘Alter’ will try to keep your data but will make changes to your tables if you do so in your models.

migrate: 'alter'

8. In your cors.js file in the config folder, set AllRoutes to true, and origin to ‘*’. CORS is a mechanism that allows browser scripts on pages served from other domains to talk to your server. By default, CORS is disabled in Sails. These settings will allow your Angular app to interact with your API.

allRoutes: true,
origin: '*',

Angular2

  1. In your component’s html file, create your form to capture the user’s information. At the very least, you will need their email address. Bind an onSubmit() function to the click event on your submit button. In the example below, I am collecting the user’s name, email address and message and passing those values as arguments in my onSubmit() function.

2. In your form.component.ts file, add your onSubmit() function and pass it your three arguments. In this function, you will be calling yourEmailService (which we will create in step #3) and sending it the values from your form.

3. Create your email service which makes the http call to the Mailgun service. Remember you can use the ng generate command to quickly set up and a service.

ng generate service email

3a. Go back to your form.component.ts file to import your EmailService and add it to your constructor function.

import { EmailService } from '../email.service';
......
constructor(
private _emailService: EmailService
) {}

3b. Provide the service in the providers property in your app.module.ts file. With this in place, we are able to use the EmailService in all components belonging to our AppModule.

...
providers: [
EmailService
]
...

6. In your email.service.ts file, add the following code:

The sendEmail() function will send the data from your form to the email API you created in your sails app. From there, Sails will use your Mailgun credentials to send the information to the Mailgun service, which in turn sends your template email. If you followed all of these steps, you should see an email in the verified email account that you added to Mailgun.

That’s it. Hope this was helpful.


Need Help with Angular, Sails.js or Mailgun? Contact us!

☞ Related articles you might enjoy: