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.

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.

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.

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

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.

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

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.

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.

Software Developer https://jameshamann.com

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store