News

Serverless React Starter Kit Features One-Click AWS Deployment

• By David Ramel
• July 21, 2017

The React JavaScript library for Web development -- enjoying immense popularity right now -- is featured in a just-launched serverless starter kit that leverages new capabilities of the AWS Mobile Hub on the Amazon Web Services Inc. (AWS) cloud.

The kit's sample app shows off modern trends such as serverless computing and AWS' new one-click Deploy from GitHub button capabilities of Mobile Hub, which serves as the back-end infrastructure for the kit's Web app, optimized for mobile.

That single-click functionalty was announced last month as means to let developers share their Mobile Hub project configuration templates with fellow coders.

"With one click, you can import the project configuration from a GitHub repository into the AWS Mobile Hub console and deploy an identical mobile backend," AWS said last month. "In addition to one-click import, you can export your project configuration, commit to GitHub, and provide your project configuration as a one-click from your GitHub repository."

The new open source React kit can be customized for real-world use, or developers can use different kit components in their own separate projects.

AWS yesterday announced improvements to the Mobile Hub's Cloud Logic functionality. Part of that involves letting developers include custom AWS Lambda functions -- for serverless computing, in which code functions are executed in response to events -- in projects launched with the company's import tool.

"With the Cloud Logic import feature, developers can also specify environment variables and CORS settings, allowing for the same code to be used for multiple functions with different settings (for example, test vs. production workloads or CRUD API for different tables within a DynamoDB database)," AWS said in a post. "The Cloud Logic import feature will also provide appropriate authorization for a linked Amazon DynamoDB database and Amazon API gateway, taking care of all resource deployments, service connections and IAM configuration with a single command."

Those and other capabilities are demonstrated in the starter kit, which generates a Web app that can be run locally via a webpack server or as a static site hosted in an Amazon S3 bucket. The generated Web site provides a restaurant ordering system in which registered and logged-in users can view different restaurant menus, select items and place orders.

"The sample is optimized for mobile devices, which enables you to view the app from your phone or desktop browser," AWS's Richard Threlkeld said in a blog post yesterday. "You can register users in the system and log user in with SMS-based MFA. After they are signed in, users can insert sample data for 'BBQ Restaurants' and view all restaurants in the system. They can then navigate to see everything on the menu and place an order. The sample also demonstrates using forgotten password workflows."

AWS said the app simplifies the complicated details associated with serverless Web sites, such as registration, sign-in, managing API routing, managing CORS settings, endpoint authorization, user authentication and so on.

For example, the import tool can automatically configure elements such as:

• Amazon Cognito User Pools and Federated Identities
• Amazon API Gateway, AWS Lambda, and Amazon DynamoDB
• Cross-origin resource sharing (CORS) for the API
• IAM roles and policy for the Lambda execution role
• IAM roles and policy for the user roles that access API routes after authentication

The React starter kit was released with an open source license. To use it, developers must have an AWS account, NodeJS with npm and the AWS CLI (command-line interface). Installing it simply involves cloning the GitHub respository and clicking the "Deploy to Mobile Hub" button.