There are many email marketing products, such as MailChimp, formspree, etc. but all of them cost money or have a limited number of emails you can send. And when you have a large number of subscribers to the server, the cost will be added up very quickly and usually too expensive for a small business.
Even though you know how to code and you can develop your email marketing solution, but you have to spend a portion of time maintaining the solution. Time is the most critical resource, and you need to 100% focus on your own business.
What could solve the money and time problem? Here comes the Serverless. For those of you who are not familiar with serverless, it is a technology which abstracts away the concept of the server in the backend system as well as the effort to maintain those servers. This is quite important as traditional web application requires a large amount of efforts to make sure the whole system can sustain the growth of the incoming traffic. These efforts usually include:
- Patch the operating system
- Update packages and operational environment
- Scale up database
- Scale up servers
However, technologies have advanced so fast that all the above efforts can be eliminated by using serverless techniques. For example, if we are using AWS as the cloud provider and host our solution, the total cost of the email marketing can be at least three times cheaper than the other Saas providers. If we compare the price with MailChimp and Constant Contact
In this article, I will talk about how to develop a cheap self-hosted contact form using serverless and AWS. The setup instruction below is for Mac and Linux. However, you should be able to find the corresponding command I am going to use in windows.
Also, I'm interested to know how many people are interested in using it, so if you want to get the source code, you will need to subscribe to our email list. However, you can choose to opt out at any time.
The whole solution contains
- API endpoint to receive the contact form
- A front end editor to edit the email template
Following is an architecture diagram of the email service:
Prepare AWS Environment
AWS account is needed to set up the infrastructure for the email service.
Once logged in to AWS, go to IAM and then create a deployment user. Make sure to tick "Programmatic access" and attach AdministratorAccess policy to the user (It is not best practice to attach admin policy, but security is another big topic. So let's leave it to another day). Then copy and paste the AWS access key id and secret key to somewhere for use later.
Create a Custom Domain
If you want to use a custom domain for sending out emails, you need to register a domain in AWS. If you registered the domain outside of AWS, you need to follow this guide to migrate domain over to AWS.
Create Certificate for HTTPS
Switch the AWS region to US East (N.Virginia). Go to Certificate Manager, click Request a public certificate, make sure to attach the domain name to the certificate. Instruction will be provided to validate the ownership of the domain. The verification process usually takes minutes. Once the validation process finishes, save the certification Arn to somewhere as we will use it later.
Deployment step is not complicated, and once you have subscribed to the email list, the source code will be sent to you.
First of all, make sure your local development environment has the following packages setup:
- NVM (Recommended) https://github.com/creationix/nvm
- NodeJs 8.10
- Serverless.js https://serverless.com/framework/docs/getting-started/
Create a config.json file in the root project folder as below
Following is an explanation of all the parameters in the config file
|The name of the environment
|The hosted zone name
|The full domain name of the email service
|The Arn of the certificate
|The email address to send the contact message to your admin
|The email address to send the contact message back to the customer
Config the AWS credentials in the local development environment following the documentation
Run the following command in the root directory to deploy the serverless infrastructure
serverless deploy --region <aws_region> --stage <stage>
How to Use
To use the template editor, go to the following URL, the domainName is your full custom domain, and you define templateName.
The template editor is created by using grapesjs-mjml.
Upload public/html/form.html from the project folder to the template storage s3 bucket. The bucket name should be something like repercept-email-service-<stage>-emailservicestorage-*. The upload destination should be <bucket>/static/html/form.html. Embed the contact form by copying and pasting the following iframe into your page.
<iframe src="https://<fullDomainName>/static/html/form.html" frameborder="0" style="position: relative; height: 400px; width: 100%; border:none;" scrolling="no"></iframe>
You can edit the style of the contact form, simple updating the form.html file.
Contact Form API
|The sender's email address
|The customer's email address
|The email template to use