Introducing the New AWS Amplify CLI Toolchain

AWS Amplify has released a brand new CLI Toolchain that makes it easy to create & configure AWS cloud services on the fly directly from your local environment.

The CLI will allow you to add features like authentication, GraphQL APIs, Lambda functions, web hosting, analytics, storage & more to your existing app without leaving your command line.

This CLI complements the AWS Amplify Library to provide an end to end solution for the creation, configuration, & implementation of scalable cloud-enabled applications with a Rails-like experience focusing on developer efficiency. AWS Amplify supports not only JavaScript applications & frameworks like Angular, React, & React Native, but also native iOS & native Android.

Serverless

Many of the AWS Amplify CLI features are serverless, meaning you can hook into an existing battle-tested & scalable solution instead of building, managing & deploying your own infrastructure from scratch.

This CLI & toolchain for the client greatly lowers the barrier to entry for developers & companies looking to build full-stack applications allowing them to not only iterate & experiment quickly, but also giving them the ability to do so at a lower cost.

AWS Amplify also offers an opportunity for traditionally front-end developers to leverage their existing skillset / language specialty & move further up the stack by taking advantage of services like Amazon Cognito for authentication & AWS AppSync, a completely managed GraphQL API, that would traditionally require a back-end developer to implement.

Additional Toolchain Features

Along with the CLI there were also some other major new features released.

GraphQL Transforms

AWS Amplify has added a GraphQL Transformer library that drastically simplifies developing, deploying, and maintaining GraphQL APIs from your local environment. You can define a schema with a basic type(s), add directives for things like data relationships, authorization, or search, and then the the library expands and creates a full AWS CloudFormation template that implements your data model.

GraphQL Codegen

The AWS Amplify CLI has added a new codegen category that plugs into the deployment workflow that automatically downloads the GraphQL introspection schemas from your endpoint, and generates Swift or TypeScript. For Android it also downloads the schema & the code generation happens through Gradle.

This codegen automatically creates the introspection schema as well as GraphQL documents (queries, mutations, and subscriptions) that are compiled into a strongly typed class.

Visual Studio Code Plugin

The AWS Amplify VS Code plugin gives you autocomplete & code snippets for many of the Amplify API features available in the library for use in JavaScript, TypeScript, or JSX files.

UI Component Library

Also check out the beginnings of a new component library that allows you to scaffold out pre-styles & configured components to build out things like authentication & photo-pickers with only a few lines of code.

Client-side Frameworks

While the AWS Amplify CLI supports both native & JavaScript environments, the AWS Amplify library only supports JavaScript for now.

There is also first-class support for JavaScript frameworks like Vue, Angular, React, React Native, & Ionic. The library provides preconfigured components for these libraries to do things like provide an authentication flow, allow for file uploads & file downloads.

My Thoughts

I’m really excited about this project. I had a chance to learn about AWS Amplify before joining AWS back when I was doing consulting. When I saw what they were working on & their vision of the future, I immediately knew that this is where I wanted to be.

AWS Amplify moves us into a new paradigm of application development that we’ve not really seen before, but something that you will undoubtedly be seeing a lot more of in the future.

With these new tools developers have the ability to take advantage of existing managed services, allowing us as developers to do what we do best: develop our applications, write code, create features, fix bugs & experiment.

I think we will begin to see more & more serverless web & mobile engineers that are tasked with not only building out the front-end, but also with understanding how to create, connect to, & configure managed & serverless services. I also see this as a burgeoning job title / role that will eventually be as common as a front-end or back-end engineer.

Workflow

The CLI allows you to initialize new cloud projects directly inside of any project & immediately start interacting with them.

What this workflow might look like is:

1. Create or open a web / mobile project
2. Initialize a new AWS Amplify project in the root directory
3. Begin adding services that you would like using the AWS Amplify CLI
4. Interact with these services using the AWS Amplify library

Once your features are created, you can then update & delete them directly from the CLI.

Getting Started

Installing & Configuring the CLI

To get started you need to install the AWS Amplify CLI.

npm install -g @aws-amplify/cli

Next, we will configure the CLI:

amplify configure

If you would like to see a video going through the configuration process including creating a new AWS IAM User, check out this video.

Using AWS Amplify in a Front-end Project

Let’s take a look at how to add authentication with Amazon Cognito & implement it into a React app.

In the root of the React project we can go ahead and initialize a new Amplify project:

amplify init

To add authentication we can run the following command:

amplify add auth

When prompted, use the default configuration.

Next, we’ll push the updated configuration to our AWS account:

amplify push

Now, the service has been initialized in our account & we can begin using it!

To add authentication to our React app using the new service, we’ll need to do three things:

1. Install the AWS Amplify client libraries.
2. Configure our client project to recognize our new Amplify project configuration.
3. Add the authentication functionality into the React app.

Installing the AWS Amplify client libraries

To install the AWS Amplify library, we can use either npm or yarn.

yarn add aws-amplify aws-amplify-react

# or

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

Configuring the client project to recognize the new Amplify project configuration

To configure the client application, we can go into index.js and add the following code below the last import:

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

Adding the authentication functionality

Finally, in the main component of the app, we can add the following:

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

export default withAuthenticator(App)

Now, we should be able to run the app & have a basic authentication flow working!

If you would like to view the new authentication service, go to the Amazon Cognito dashboard, click on Manage User Pools, then click on the name of the application you just created.

To also read the official AWS announcement blog, click here.

If you’d like to learn more about AWS Amplify, check out the documentation here or the Github repository here.

My Name is Nader Dabit . I am a Developer Advocate at AWS Mobile working with projects like AWS AppSync and AWS Amplify.