Accelerating Mobile App Development with AWS Amplify

Over the last couple of months AWS have released a new Library, AWS Amplify, both for Web Development and React Native Mobile Development. The purpose is to provide a declarative and easy-to-use interface across different categories of cloud operations. If you’re already using AWS Services, it plugs directly in, but it also designed in such a way to plug in with any other backed/cloud service that you use.

Having used it on a few projects myself, it made key areas of app development a breeze and accelerates the development of an app greatly. Services include Authentication through AWS Cognito, No-SQL Database’s through DynamoDB and hosting through S3 and CloudFont. It connects everything so easily and quickly that it gives you the time to focus on actually developing the app.

I’ll briefly walkthrough the process of scaffolding a simple awsmobile project, to demonstrate how easy and quick it is to get going. I’ll assume you have the basics, like node, react-native-cli or create-react-native-cli installed already.

Obviously, first things first, make sure you’ve got aws and awsmobile CLI (npm install awsmobile-cli — global) installed and ready to go, you’ll also want to make sure you’ve got your AWS_ACCESS_KEY and AWS_SECRET_KEY to hand.

Let’s setup our CLI to ensure it can connect to AWS.

#bash 
$ awsmobile configure
$ configure aws
? accessKeyId:  [ENTER YOUR ACCESS KEY ID] #hit enter
? secretAccessKey: [ENTER YOUR SECRET ACCESS KEY] #hit enter
? region:  eu-west-2 #select your region using arrows and hit enter

Now you’re all setup and connected to AWS let’s setup your app.

Setup

I’ll leave it up to you to decide whether you choose to use create-react-native-app or react-native-init, both have there advantages and disadvantages that are beyond the spec of this post. I’ll be using react-native init.

#bash 
react-native init awsMobileApp
This will walk you through creating a new React Native project in /Users/jameshamann/Documents/Development/awsMobileApp
Using yarn v1.3.2
Installing react-native...
[...]
✨  Done in 6.10s.
To run your app on iOS:
   cd /Users/jameshamann/Documents/Development/awsMobileApp
   react-native run-ios
   - or -
   Open ios/awsMobileApp.xcodeproj in Xcode
   Hit the Run button
To run your app on Android:
   cd /Users/jameshamann/Documents/Development/awsMobileApp
   Have an Android emulator running (quickest way to get started), or a device connected
   react-native run-android

Next you’ll probably want to set up your Github repo and push everything up. Then install both AWS Amplify and AWS Amplify React Native.

#bash 
$ npm install aws-amplify --save
$ npm install aws-amplify-react-native --save

Now we’ll initialise a awsmobile project, which will setup a backend for our app and connect it to AWSMobile hub.

#bash
awsmobile init
Please tell us about your project:
? Where is your project's source directory:  /
? Where is your project's distribution directory that stores build artifacts:  /
? What is your project's build command:  npm run-script build
? What is your project's start command for local test run:  npm run-script start
? What awsmobile project name would you like to use:  awsMobileAppExample
Successfully created AWS Mobile Hub project: awsMobileAppExample
retrieving the latest backend awsmobile project information
awsmobile project's details logged at: awsmobilejs/#current-backend-info/backend-details.json
awsmobile project's access information logged at: awsmobilejs/#current-backend-info/aws-exports.js
awsmobile project's access information copied to: aws-exports.js
awsmobile project's specifications logged at: awsmobilejs/#current-backend-info/mobile-hub-project.yml
contents in #current-backend-info/ is synchronized with the latest in the aws cloud
Executing yarn add aws-amplify ...
[...]
Success! your project is now initialized with awsmobilejs
awsmobilejs/.awsmobile
     is the workspace of awsmobile-cli, please do not modify its contents
awsmobilejs/#current-backend-info
     contains information of the backend awsmobile project from the last
     synchronization with the cloud
awsmobilejs/backend
     is where you develop the codebase of the backend awsmobile project
awsmobile console
     opens the web console of the backend awsmobile project
awsmobile run
     pushes the latest development of the backend awsmobile project to the cloud,
     and runs the frontend application locally
awsmobile publish
     pushes the latest development of the backend awsmobile project to the cloud,
     and publishes the frontend application to aws S3 for hosting
Happy coding with awsmobile!

That simple command pretty much sets everything up for you within a awsmobilejs directory within your app. If you head over to the AWS console, you should see your project, like this.

AWS Mobile Hub

AWS Mobile includes the main features you’d need for your mobile app, and there’s obviously plenty of other AWS Services you can tie into your mobile app. The ones that come bundled in can be found by using the awsmobile command.

#bash
$ awsmobile features
? select features:  (Press <space> to select, <a> to toggle all, <i> to inverse selection)
❯◯ user-signin
 ◯ user-files
 ◯ cloud-api
 ◯ database
 ◉ analytics
 ◉ hosting
[...]
enabled: user-signin
backend awsmobile project enabled features:
analytics, hosting, user-signin

From here you can select whatever feature you’d like to add, for arguments sake let’s add authentication.

Next, we’ll use AWS Amplify’s component withAuthenticator.

Let’s edit our App.js to include the component and then wrap our entire app around it. The main thing we’ll need to edit is changing the class from export default class App extends Component to Class App extends Component and then export the App at the bottom of the file as an argument in our withAuthenticator component. We’ll also need to

#javascript - App.js
[...]
import Amplify from 'aws-amplify';
import { withAuthenticator } from 'aws-amplify-react-native';
import aws_exports from './aws-exports';
Amplify.configure(aws_exports);
[...]
class App extends Component<Props> { 
[...]
}
export default withAuthenticator(App);

Now let’s boot our app up in an emulator. It should look similar to the below, with all the basics setup, including routing.

Authentication Front End Setup

When trying to sign up, however, you’ll notice there’s an error No userPool. That’s because we haven’t synced our backend with the cloud yet.

#bash 
$awsmobile push
[...]

Once this is complete, reboot your app on the emulator and try signing up. Boom, you’ve got a full authentication system ready to go, built in with SMS confirmations. (please check AWS Billing/Charges to make sure you don’t incur any unwanted charges). Once a user Signs up, they’ll be visible in your AWS Cognito Pool.

It’s super simple to get setup and going with AWS, plus with the addition of AWS Amplify, it’s even easier to connect essential AWS Services to your app.

As always, thanks for reading, hit 👏 if you like what you read and be sure to follow to keep up to date with future posts.