Ionic Email Composer
Send e-mails from any app or website
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.
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 (view.ionic.io). 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:
- Visit mailgun.com and create an account
- When asked to verify a domain name, skip this step. It is optional and only needed for more advanced functionalities.
- Verify your e-mail address (a banner will appear in the top). This is needed before you can start sending emails.
- Go to your Dashboard and scroll down to the section Sandbox Domains. Click on the already pre-defined
sandbox6d291df....mailgun.org). You will find the
API_KEYin the section Domain Information.
server.jsin this package located at:
node-server-side/server.jsand replace the constants
DOMAINon 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 Heroku.com 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
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 c9.io 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 https://your-workspace-name-your-username.c9users.io.
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
https://your-workspace-name-your-username.c9users.io as the
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:
SERVER_SIDE_URLwith the appropriate value (depending on example1 or example2)
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:
receiverEmail: '<RECEIVER-EMAIL-1>, <RECEIVER-EMAIL-2', // pass multiple separated by comma
Questions or feedback?