Unless you have been living under a rock for the last decade, you’ve probably heard about this service called AWS by Amazon. It stands for Amazon Web Services — a comprehensive suite of cloud platform services in which you will continually be amazed at finding new uses for.
It literally has services for just about everything a Software Engineer would want when it comes to cloud platform tooling. I have just recently discovered one of those services, Amazon’s Simple Email Service (SES), whilst searching for alternative ways to send data from a web form to an email address via NodeJS, and I’m here to share with you how to achieve it.
I wanted to simply build a web form that captured the user’s name, email and enquiry message, allow them to post this data to a NodeJS end-point which would notify me (and others) via email. For clarity, I’ve broken the requirement into a few layers which we will tackle one-by-one, starting from the AWS set-up through to the actual UI where users will enter the data:
- Set up Amazon SES
- Use AWS SDK to send emails via SES
- Create an end-point
- Build a ReactJS-based web form
Set up Amazon SES
(This step assumes that you have already set up an AWS account)
Head over to the AWS dashboard to set up access to Amazon SES. To do this, we will need to do the following:
- Create an IAM user with SES access
- Add your access key id and secret access key to your local environment
- Add and verify an email within SES
Create an IAM user with SES access
- Go to the IAM Dashboard. We need to add a user with permissions to access SES and request to send the email
Users from the sidebar and click
3. Enter your desired username and check the
Access type checkbox as
Programmatic access. Click
4. Click the
Attach existing policies directly tab
5. Enter “SES” in the search field and check the
AmazonSESFullAccess policy name checkbox. Click
6. Ensure your user details are correct, with the correct policies attached. Click
7. Your user has now been created and you are provided with an
Access key ID and a
Secret access key. IMPORTANT: Note both of these down now, as you will need them later and won't be able to retrieve the
Secret access key again!
Add your access key id and secret access key to your local environment
Adding your access key id and secret access key to your local environment will allow you to trigger emails sent from your local development environment on your machine, rather than having to deploy to a server:
- Open your terminal
2. Create a credentials file inside your home’s
.aws directory (create it if you do not have one):
3. Edit the credentials file using VIM:
4. Add the following to your file and save (making sure to replace the
aws_secret_access_key values with the ones you noted down earlier):
aws_access_key_id = [ENTER YOUR ACCESS KEY ID HERE] aws_secret_access_key = [ENTER YOUR SECRET ACCESS KEY HERE]
Add and verify an email within SES
The final step is to add and verify an email within SES. This email will be used to send the form data on the behalf of your users, which in this case is essentially the same as sending an email to yourself. The benefit of this is that you utilise your own email provider’s (e.g Gmail) service to send user submitted data to yourself and others.
- Go to the Amazon SES dashboard
Email Addresses in the sidebar to display a list of email address identities. Click
Verify a New Email Address
3. You will be prompted to enter an email address. This is the email that will be used to send user-submitted data, so keep note of the email address you specify here. Click
Verify This Email Address.
4. This will send a verification email to that address where you simply need to click a link to verify
Use AWS SDK to send emails via SES
Now that we are set up on AWS to use Amazon SES, let’s dive into the code and build the mailing functionality using the AWS SDK.
aws-sdk as a dependency:
npm install aws-sdk
Create a new
mailer.js file. This file will contain the Amazon SES integration required to compose and send an email. Import the
We are going to send a HTML email in this example, so let’s create a small helper function that takes
data from our form and returns a string with HTML formatting:
Next, let’s create a
sendMail function which takes a
sender email address, an array of
receivers and the actual form
That completes our app’s integration side with Amazon SES — simple! We now have a function that will take the form data and compose a HTML email to send to a list of receivers using a specified email address as the sender.
Note: View the entire file here
Create an end-point
To create our end-point, we’re going to use NodeJS and Express. Express is a powerful, minimalist framework for NodeJS which provides a nice and simple way for us to create an end-point.
First, we need to add
express as a dependency:
npm install express
Now let’s create a new
server.js file and import some modules we're going to need:
Next, some configuration is needed to set up our Express app, specify a port to run the server on and set your AWS region:
Finally, create the end-point we will use to send requests from the client. It is important to ensure you update the first argument for
sender) to the same email you verified in the Amazon SES dashboard. Amazon SES will only allow you to send emails from an email that has been verified:
Note: View the entire file here
Build a ReactJS-based web form
There are a few layers to this part, first; building a helper function for sending data via the
FetchAPI, second; providing a way to extract data from the form elements into an object we can send via a request, and third; building the UI form elements to allow users to input data.
POST-ing with FetchAPI
Create a helper function using the
This helper function allows us to send a post request to a server. It takes
data as an argument, which is expecting a
url property containing the end-point URL to send the request to. Notice how after obtaining the
url property we delete it, since we don't actually want to send this in the request payload, it is simply a way for us to pass the endpoint URL and associated request payload as one argument.
Sending form data
Next, we need a way to send the form input data to our yet-to-be-created end-point. We can do this by taking the data from a form element and passing it through to our
post helper function. This can be done by adding a small method to our ReactJS component when the user triggers the
submitForm method doesn't necessarily need to be part of a ReactJS component, it just needs to be an event handler for the
onSubmit event that is fired from the
form DOM element. This gives us access to the
event's target (in this case, the form) which subsequently allows us to extract all values from the form's inputs.
post helper function and
submitForm method ready, the one missing piece of client-side functionality is to build the UI where users will submit data.
We’re going to need a form to display in the UI, with input fields for name, email and the message. Add an
onSubmit event listener which calls our
submitForm method and passes through the
The above can be achieved using any framework or library of your choice — or none at all — but the fundamentals are the same; we need some input fields and an
onSubmit event handler to deal with the submitting of the form.
Note: View the entire file here
Now we have all of the parts in place in respect to our application! We have:
- A web form that allows users to input data
- A method which converts the input data into an object ready to send via a request
- A helper function that allows us to send data via the
- An end-point which receives the object containing our form data
mailer.jsfile that generates the required params for Amazon's SES API and populates with our form data
And that’s it!
We have built a web form, created an end-point, integrated Amazon’s SES API and set up the IAM and SES dashboard that allows us to provide users with a form they can submit and for us to receive that form data by email via Amazon SES!