Build a Serverless Full-Stack Registration App in minutes using AWS Amplify

Customers often ask developers to design and create a web application form that captures the registration for some events or training that they want to host. AWS Amplify solves this problem by creating the required resources and generating the boilerplate integration code for different layers using serverless technologies. Now, developers can focus on developing the business logic while Amplify manages the undifferentiated heavy-lifting of building and configuring the infrastructure resources.

Amplify is a fast and easy way to build cloud-powered web and mobile apps on AWS. Amplify comprises a set of tools and services that enable front-end web and mobile developers to leverage the power of AWS services to build innovative and feature-rich applications.

Benefits

• Add pre-built UI components from popular frameworks such as ReactJS, Vue, and AngularJS to accelerate front-end development.
• Add a serverless backend and use Amplify libraries to integrate it with your backend.
• Add a hosting environment to deploy and host the web application using Amplify Hosting.

What we’ll learn

• How to install and configure the Amplify CLI.
• How to create an API that takes in user data and is called from our frontend.
• How to add an AWS Lambda function to our API so that data is persisted in Amazon DynamoDB.
• How to build, deploy, and host the application using Amplify Hosting.

What we’ll build

Use-case: Either as a training organization or a business unit, I want to host a quick form that captures user data and provides a calendar invite for the registrants to download.

To achieve the above use case, we will use Amplify to create a form that captures user data and provides a response to add a calendar invite for the training using React.

The following diagram illustrates the final high-level architecture for this solution that you will build. Amplify will let you create, build, and deploy the react based registration web application to the Amplify hosting.

We use the following services in this solution:

• Amplify is a set of purpose-built tools and features that lets frontend web and mobile developers quickly and easily build full-stack applications on AWS. These have the flexibility to leverage the breadth of AWS services as your use cases evolve. For this use case, you use Amplify CLI to build the serverless registration form and use Amplify Hosting to deploy the registration web application to the Amplify global content delivery network hosting environment.
• Amazon Simple Storage Service (Amazon S3) is an object storage service that offers industry-leading scalability, data availability, security, and performance. For this use case, you use Amazon S3 as storage for build and deployment for hosting the web application.
• Amazon API Gateway is a fully-managed service that makes it easy for developers to create, publish, maintain, monitor, and secure APIs at any scale. For this use case, you use API Gateway as a “front door” for the registration application to access data and process data in your business logic connecting to your backend service.
• AWS Lambda is a serverless, event-driven compute service that lets you run code for virtually any type of application or backend service without provisioning or managing servers. For this use case, you use Lambda function for your registration form web application to create your backend data processing function.
• Amazon DynamoDB is a NoSQL database that supports key-value and document data models. This makes it easy for developers to build modern, serverless applications that can start small and scale globally to support petabytes of data and tens of millions of read and write requests per second. For this use case, you use DynamoDB to persist the registration data from the users registering for the event.

Prerequisites

For this walkthrough, you should have the following prerequisites:

• Node.js: Node.js v10.x or later.

Step By Step Registration Web-App Creation

Step 1: Setting up the Amplify environment for Registration Application

1. Clone the GitHub repository using the following command. This repository has all of the initial setup required for the ReactJS framework and the dependent libraries setup in the package.json file.
   • git clone https://github.com/aws-samples/aws-amplify-sample-registrationapp.git registrationapp
2. Go to the app directory and install the required packages for the web application using the following command:
   • npm install
3. Install and configure the Amplify CLI as per the installation guide (https://docs.amplify.aws/cli/start/install/) provided in the Amplify documentation. Run the command from the application folder (e.g., cd registrationapp):
   • npm install -g @aws-amplify/cli

4. Configure the Amplify CLI for the registration application by running the following command and follow the steps provided in the installation guide (https://docs.amplify.aws/cli/start/install/).
   • amplify configure
     • This will ask you to sign in to the AWS Management Console to create an AWS Identity and Access Management (IAM) user for the application with AdministratorAccess. Follow the following steps and create the user, such as “blog-user”.

4. • • As part of the configuration, provide the “accessKeyId” and the “secretAccessKey” to connect Amplify CLI with your newly created IAM.
     • Name the profile for your AWS account, such as “dev” during the configuration process from the installation guide.
5. Initialize the Amplify framework for the registration application using the following command.
   • amplify init

Step 2: Add our backend services

1. Add a REST API, registration function, and storage using AWS services by running the following command:
   • amplify add api
   • Follow the wizard providing the values from the following screenshot to add the REST API, Lambda function, and the corresponding storage. This is where you can adjust the column names that you wanted to add or modify to suit your needs for the registration application.

2. Navigate to app.js to add and update the code required as per the form elements added from the previous step.

1. • Refer to the example code provided from the GitHub for all of the updates.
   • Add a new function to generate unique GUID for every registration → function generateUID()
   • Update or Replace the function (HTTP Get method for list objects) with the DynamoDB index created → app.get(‘/users’, function (req, res)
   • Update or Replace the function (HTTP post method for insert object) with the form elements created → app.post(path, function (req, res)
   • Remove or block the following methods generated by Amplify, which are’t required for the demo:

1. • • HTTP Get method for get single object
     • HTTP put method for insert object
     • HTTP remove method to delete object

3. Push the locally created resource configuration (AWS CloudFormation templates) to AWS by running the following command which will run the templates to create the required backend resources in AWS.
   • amplify push

1. • Once the CloudFormation completes the resource creation in AWS, it will provide you with the API endpoint URL and a success message.

Step 3: Setting up/updating the front-end form for the registration application in Amplify

1. Navigate to “Registration.js” to add and update the react code as per the form elements added in the previous step.

2. Initialize the tailwind framework to generate the required final CSS for the registration application, and update the front-end dependency modules defined in package.json by running the following commands:
   • ❯ npx tailwind init tailwind.js --full
     ❯ npm update
3. Test the registration application by starting the dev server locally by running the following command:
   • npm start

Step 4: Add hosting to build and deploy the registration application using Amplify

1. After completing the local testing from the previous step, add hosting configuration to deploy using Amplify Hosting by running the following command and providing the options from the screenshot:
2. • amplify add hosting

2. Publish the hosting configuration to build and deploy the registration application to Amplify by running the following command:
   • amplify publish

3. Once the deployment is complete, navigate to the Amplify console and add a redirect for single page web apps to access the protected routes created in the react application as per the following screenshot:

4. Verify the application deployment by going through the hosting endpoint provided by Amplify at the end of the publish command, and submit some registration to test the application.

Conclusion

In this walkthrough, you have created a simple single page React web application using Amplify for collecting the registration information of the users interested in signing up for a virtual training. You created the registration application and deployed it to Amplify Hosting. The application itself is created using API Gateway, Lambda function, and the heavy lifting of configuring and deploying the entire application is done by Amplify. To learn and explore additional features from Amplify, read the Amplify documentation.

About the authors