Front-End Web & Mobile

Announcing AWS Amplify and the AWS Mobile CLI

The JavaScript ecosystem is thriving. Every day there are new use cases and functionality across web and mobile ecosystems. Developers are building highly interactive and functional applications across social, consumer, and enterprise spaces. We’ve spent a lot of time talking to these developers. They want to scale their applications quickly on cloud services, and they want to enable similar patterns and use cases in their apps, such as sign-in and MFA.

First, many developers are looking for a more declarative way to interact with different categories of cloud services, rather than having to learn individual service contracts. Additionally, while developers are happy to dive into implementations for advanced or non-standard use cases, many UX flows have become commonplace, but can be difficult to get up and running. This leaves less time to focus on their business differentiators.

We’re happy to announce today the release of AWS Amplify, an open source library (under Apache 2.0) for interacting with cloud services that use JavaScript applications. Amplify is broken into categories to help developers programmatically use best practices and deliver a scalable and secure experience to their customers.

We’ve designed the Amplify library to be flexible for new implementations in these categories. We are looking to build upon this start in the future. Today Amplify supports categories of:

  • Auth: Provides AWS credentials for Signature Version 4 signing as well as OIDC JWT tokens from Amazon Cognito. Common functionality, such as MFA features, are supported.
  • Analytics: With a single line of code, get tracking for authenticated or unauthenticated users in Amazon Pinpoint. Extend this for custom metrics or attributes as you wish.
  • API: Interaction with RESTful APIs that leverage AWS Sigv4 in a secure manner. The API module is great on serverless infrastructures with Amazon API Gateway.
  • Storage: Simplified commands to upload, download, and list content in Amazon S3. Additionally you can easily group data into public or private content on a per-user basis.
  • Caching: An LRU cache interface across web apps and React Native using implementation-specific persistence.
  • i18n and Logging: Internationalization and localization, as well as debugging and logging capabilities.

AWS Amplify favors a convention over configuration style of development, with a global initialization routine or initialization at the category level. The quickest way to get started is with an aws-exports file, but developers can also use the library independently with existing resources.

We want to keep supporting the larger JavaScript ecosystem, but we also want to give a great experience on each framework independently, rather than spread the experience too thin. In this first release, we’ve provided additional packages for React and React Native with Higher Order Components. These make it easy to wrap your application for these categories or use pieces when building out interfaces.

Finally, we’re also launching a comprehensive CLI experience for building projects. This experience includes creating serverless backends with AWS Lambda, allowing you to inject cloud functionality into an existing project. The Amplify library then allows common configuration from this process to be consumed for usage in a single line of code.

EDITORIAL NOTE: The AWS Mobile CLI has been replaced by the AWS Amplify CLI. Please use this going forward and read the announcement blog posting here.

Getting Started

Adding the AWS Amplify library to your project can be done easily via NPM:

npm install --save aws-amplify
npm install --save aws-amplify-react

The AWS Mobile CLI can be installed from NPM as well:

npm install -g awsmobile-cli

You can configure the library manually, passing options into Amplify.configure(), or you can leverage the Quickstart guide with an aws-exports.js file, or you can use the new CLI, which provides your configuration file. At that point, it’s simply 3 lines of code to get started:

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

Just doing this action sends Analytics data to Amazon Pinpoint with no effort on your part. You can then track custom events to meet the needs of your applications:

//Record an event
const recordEvent = (evt) => {
  Analytics.record(evt);
}

...
//JSX
<button onClick={()=>recordEvent('Button1')}>Button1</button>

Adding functionality like user sign-up and sign-in to your application is simple as well. For React and React Native, Amplify comes with a withAuthenticator HOC. You can wrap the component at your application entry point and get basic functionality in minutes:

import { withAuthenticator } from 'aws-amplify-react';

//Components and JSX code...

export default withAuthenticator(App);

Language settings can be configured with a single line of code when using the I18n module:

 

You can also build out your own UI with the Auth module by using components such as <SignIn />, <SignOut />, <Greetings />, and <Authenticator />.

Finally, the storage and APIs modules are designed to be aware of user credentials and authorized state. API requests are automatically signed using AWS credentials. Content being uploaded to Amazon S3 that is marked private is protected in a path using the Amazon Cognito Identity ID for that user. Helper React components are also available for uploading/downloading/rendering images.

Learn more

We’re excited to bring these capabilities to the JavaScript ecosystem and to make this project open sourced. We hope that our customers find it helpful and we’re looking for feedback and contributions for how to improve this project. Please log an issue or a pull request any time to share your thoughts.