Build your own mailing list, mailer & subscription form with AWS Mobile Hub and React

Solutions like mailchimp or mailjet provide great out of the box options to integrate a simple sign up form to your website and manage mailing lists. However, they can start to get very costly when you have to scale to thousands of users.

Why pay more when you can build your own on top of AWS for a fraction of the cost ?

We can achieve this in no time using AWS Mobile Hub for our backend, providing easy access to lambda functions for our logic and a DynamoDB for storing our users' email. The new aws-amplify client for react will then make it easy for our front-end to call our back-end and subscribe new users.

Because it is important to maintain a healthy email database and achieve reasonable deliverability rates, the second part of this tutorial will focus on setting up a SNS notification to call a lambda function and update our DynamoDB mailing list every time an email bounce.

Source code there.

Here is how our architecture will look like at the end of this tutorial :

Part I : Sign up form, mailing list and welcome email

You will need an AWS Account, as well as to activate AWS Simple Email Service with a validated domain name and sending email address (instructions there), otherwise your welcome email mailer will not work. When you're ready, let's begin :

1. Let's start by installing AWS Mobile CLI

npm install -g awsmobile-cli

2. Configure it with your AWS credentials

awsmobile configure

3. Go to your existing react project root folder or generate a new app

create-react-app subscribe-form

4. Go to the root folder of your app and run

awsmobile init

5. Choose the default options, then connect the app to your backend by adding the following to your index.js file :

import Amplify from 'aws-amplify';
import aws_exports from './aws-exports'; Amplify.configure(aws_exports);

You can try running your app locally by typing the following command in your root folder :

awsmobile run

You can also deploy it instantly to the cloud by typing :

awsmobile publish

6. Now let's start by providing a DynamoDB to store your mailing list :

awsmobile database enable --prompt

You can choose if you want to restrict access to the data and pick a name for the db. We will use subscribers for this tutorial. We don't need any additional column, sort key or index.

7. To access your NoSQL database, you will need an API that can be called from your app with the email to subscribe to the list. Let's enable the Cloud Logic feature for that purpose :

awsmobile cloud-api enable --prompt> Create CRUD API for an existing Amazon DynamoDB table
> subscribers

8. This command created new files under ./awsmobilejs/backend/cloud-api/subscribers/, including app.js, which provides out of the box CRUD logic for our mailing list. The post method is the one we will use to subscribe our users. Let's look for the following lines :

And replace them with our custom lambda function :

Don't forget to change the sender email address to the one you have configured from your SES console, and import the SES client at the beginning of the file for the welcome email to work :

const ses = new AWS.SES();

Let's save the file and push our changes with awsmobile push.

This lambda function we have configured :

• Checks email format
• Checks if email doesn't exist in our DynamoDB already
• Saves new email to DynamoDB
• Sends a welcome email to the new subscriber

9. In order to send the email, we will need to update the IAM settings to authorize our lambda function to call SES. Go to your AWS IAM Management Console and select the role for the lambda function, then add the policy "AmazonSESFullAccess".

10. Finally, let's test our API endpoint by running the following line in the console (replace the email with an email address you have access to) :

awsmobile cloud-api invoke subscribersCRUD POST /subscribers '{"body":{ "email": "test@example.com" }}'

You should get a welcome email, and the new email with the sign up date is saved in our DynamoDB table.

Last step for this part is adding the signup form to our front-end application, and link it to our API to start subscribing new visitors.

11. For the purpose of this tutorial I will not bother creating a new component and will just add our signup form to the generated App.js. You are free to put the logic for the form anywhere you like. Add this to the top of this file :

import { API } from 'aws-amplify';

And our function to subscribe the user will look something like this (see github for full component) :

Part II : Keeping a clean mailing list

For the second part, let's just follow the great walkthrough from AWS there. The DynamoDB with the mailing list is already created, you will just need to setup SNS to trigger the Lambda function with the necessary authorisations that will then go and update our mailing list when a bounce or complaint happens.

You now have a fully functional signup form together with a smart mailing list that keeps itself updated thanks to SNS notifications. This is just one in many great ways to leverage your powerful Lambda assistants to automatize any process you might have as a startup.

Thanks for reading!