Ionic Email Composer

Ionic Email Composer

Send e-mails from any app or website




Member since 2014


iOS, Android  
5 years ago
5 years ago
nodejs, email, emails, e-mail, compose, nodemailer, mailgun, gmail, sendgrid, server, ionic, mail,

Multi-functional package to send emails from any app or website

This package enables any developer, skilled in any language, to start sending emails from any app or website today. By downloading this package you will save precious time and will be able to send your first email within 10 minutes. While the setup is very straightforward and easy, we still provide you elaborate instructions and background information.

Usage Opportunities

You can use the content of this package in many ways:

  • Add a contact form in your app
  • Add a contact form on your website
  • Automatically notify users when someone places a new comment or rating


The package consists of two folders:

  • ionic-example: Complete and functional starter app of how to send emails with Angular (in Ionic Example)
  • node-server-api: Complete and funtional NodeJS Server API with routes to process your emails. Can be hosted anywhere and called using $HTTP.

Try before you buy

You can try the Ionic-App Part by downloading Ionic View ( Then use the following app Id to fetch a preview of the app: b1f6e8cc


This package leverages on the benefits of two powerful tools to process your emails.

The first is NodeMailer which is a tool send to send emails from a NodeJS server. NodeMailer is a very popular option among many developers (more than 400.000 installs alone in last month, as of Jan. 22, 2016).

For authentication (SMTP) and the transport, we use the dedicated provider Mailgun, and thus the NodeJS package NodeMailer-Mailgun. We choose this option to 1) prevent having login issues and 2) prevent your emails ending up in spam. Also not to forget, Github and Heroku are using Mailgun in their back-end as well. You can read more about our choice (and thus why we not use Gmail for instance) on this link.

10,000 Emails per month for free

Mailgun charges based on your monthly consumption. You get 10,000 emails per month free. If you ever manage to exceed that (please let me know), you only pay $0.00050 per sent email (10,001 emails per month cost $0.00050), which is to our opinion a very attractive deal.

Setup 1. Mailgun

The first thing we need to do is setup our Mailgun account and thus retrieve our API credentials. To do so:

  1. Visit and create an account
  2. When asked to verify a domain name, skip this step. It is optional and only needed for more advanced functionalities.
  3. Verify your e-mail address (a banner will appear in the top). This is needed before you can start sending emails.
  4. Go to your Dashboard and scroll down to the section Sandbox Domains. Click on the already pre-defined DOMAIN (something like You will find the API_KEY in the section Domain Information.
  5. Open server.js in this package located at: node-server-side/server.js and replace the constants API_KEY and DOMAIN on line 22.

Setup 2. Hosting the Server-Side

All the files for the server-side are strictly located in the folder node-server-side, which you have already interacted with in Step 1. To test this part of the package, it is important that NodeJS is installed and available in your workspace. If you are working locally on your computer, you will need to host this part of the package on a site like Heroku (for production). Alternatively, to avoid installing a lot of dependencies, we recommend that you use Cloud9 Cloud9 (for testing and development)

To get started, cd into the directory node-server-side and install all the dependencies as follows:

$ cd node-server-side $ npm install

This will install all the required packages. After this, deploy your package to a Cloud server (such as AWS, Heroku, C9, etc.). Below are two examples:

Example 1: Heroku

You can read most of the information you need in the tutorial Deploying with Git on Heroku. What is basically boils down to the following:

$ git init $ git add . // or git add -A $ git commit -m "commit name" $ heroku create // it will ask you to login (sign up on for an account) $ git push heroku master

The command line $ heroku create will create a directory for your app, something like:

This is the location of your server side, and from now on we will define it as SERVER_SIDE_URL.

Example 2: Cloud 9

To avoid the hassle of installing dependencies such as git, node, etc. Cloud9 is a perfect solution to get you quickly started. The only disadvantage is that your workspace will go in a hybernation mode if you are not active on it for more than 2 days. This can be again solved by pushing your work to Heroku and buying a dyno that keeps your server running 24/7. You can contact me for more information about this option.

To get started with Cloud9, simply create an account on and subsequentely create a new workspace with NodeJS as a template. Once you open your new workspace, delete all the nodejs files in there and unpack/unzip (drag and drop) all the files from the folder node-server-api of this package. Open the file server.js and press on Run (green button in top). You will see something like:

``` Your code is running at

Important: use process.env.PORT as the port and process.env.IP as the host in your scripts!

Debugger listening on port 15454

Magic happens on port 8080 ```

If you have chosen for this option, then we define from now on as the SERVER_SIDE_URL

Setup 3. Client-Side

Depending on where you have chosen to host the files in the folder node-server-side, we can now start consuming the the server from the client side. We just need the client-side understand where our code is hosted. To do so:

  • Open ionic-example/www/js/app.js and replace SERVER_SIDE_URL with the appropriate value (depending on example1 or example2)

Wrapping up

That is it, now you can start using the Ionic-Example/Angular to send emails to anyone at at any time.

If you do not want to use Ionic or Angular, you can do so by sending HTTP POST request to your SERVER_SIDE_URL. The setup for each programming language might differ, so I will leave out the code examples. Basically just look up something on Google like "Sending HTTP Request in your-programming-language" to find a code example. The only requirement is that you pass an object in the request, which needs to have the following properties:

{ senderName: '<SENDER-NAME>', senderEmail: '<SENDER-EMAIL>', receiverEmail: '<RECEIVER-EMAIL-1>, <RECEIVER-EMAIL-2', // pass multiple separated by comma subject: '<SUBJECT>', html: '<BODY-IN-HTML' }

Questions or feedback?

If you have questions or remarks, please let me know by either typing a comment on this site, or by e-mailing me to: [[email protected]](mailto:%[email protected])

Have fun!