In the first article, we built a serverless voting website in under an hour. Now let’s do it again, this time using AWS Amplify.

I set myself the challenge of building a highly scalable, serverless voting website in under an hour, and published the results in this article. While it worked as a proof of concept, the deployment process wasn’t ideal— I had to manually create a DynamoDB table, set up API Gateway and configure my IAM permissions, separately from bundling and hosting the front-end.

In this blog post, I’m approaching the problem again, still using Vue for the front-end, but this time introducing AWS Amplify as a way to co-ordinate the back-end pieces. The goal is to produce the same application but with fewer moving parts and a more maintainable architecture for modifications in the future.

Why do we need Amplify?

One of the issues with developing JavaScript front-ends with serverless back-ends is that you end up with two distinct code repositories, effectively creating two different applications. This makes it awkward to synchronize changes between the two, especially when handling multiple versions or different environments (for example, dev and prod).

Often there’s also a fair amount of boilerplate code involved — just setting up a basic CRUD interface for a DynamoDB table, it requires the same 100 lines of code to implement a REST API over and over again. It would be great to focus the effort on writing code for features that your customers care about, and not have to worry about the plumbing.

Amplify is the biggest news for web and mobile application developers in quite some time. It’s an opinionated framework from AWS designed for both web and mobile development, but for JavaScript developers includes all the most popular single-page application libraries and frameworks like React and Vue. It treats back-end services as components you can interact with, and manages all the configuration and interaction on your behalf.

Put simply, if you have a web front-end that needs a database, authorization and an S3 bucket, look no further — we can do all of this from Amplify in a couple of minutes and never need to venture into the AWS console. The original voting application used API Gateway to interact with a DynamoDB for managing voting tallies, and in this exercise we’re going to use the same components managed by the Amplify framework.

Learn more about the Amplify Framework at https://aws-amplify.github.io/docs/.

Getting started

First, make sure you have installed Node and the AWS CLI before we start. I’m using VSCode but feel free to use your favorite IDE.

Set up the Vue application: