Building Serverless Mobile Applications with React Native & AWS

Building Serverless Mobile Applications with React Native & AWS

In this post, we’ll look at how to build fully serverless & backendless mobile applications with AWS Amplify & React Native that include features like authentication, analytics, a managed data layer, storage & push notifications.

When building a real-world mobile application there are a ton of essential basic requirements.

You need to have a way to authenticate users, you want to track user engagement & usage, & you probably want to be able to send push notifications and maybe base these messages on events or user behavior. Then you have to manage your application data and are probably dealing with multiple REST endpoints. You’re also usually dealing with media such as images & videos and you hopefully want to be able to handle offline use cases so that the app continues to work whether or not they are online.

More and more developers & companies are adopting and taking advantage of managed services in order to lessen their dependence on building & maintaining their own infrastructure and having to create this functionality from scratch, lowering the cost and decreasing the complexity of their back end development infrastructure in the process.

It’s now even possible for a single developer without a lot of traditional back end experience to be able to build and ship a fully featured application by taking advantage of these managed backend services, bringing about what I consider the next revolution of architecture that will dominate in the future, backend-less application development.

Some of the more popular existing use cases that come to mind are push notification services, authentication providers, & analytics services. There are now also services like AWS AppSync that offer completely managed data layers so you can also offload the complexity & work of building & maintaining your backend & API to a managed service with a single GraphQL endpoint.

In this post, we’ll look at how to leverage the AWS Mobile CLI to quickly spin up these types of services & add new this new functionality to your React Native application using the AWS Amplify JavaScript SDK.

The AWS Amplify JavaScript SDK was created to provide a unified API across many of AWS’ services & managed services. There is first class support for JavaScript frameworks like React Native, React, & Angular.

The projects we will create in this post will be created from the AWS Mobile CLI but will also be accessible from within the AWS Mobile Hub console as we’ll see in just a moment.

We’ll touch on how to not only create these services through the AWS Mobile CLI but also show how to integrate them into a React Native application using AWS Amplify.

Getting Started

Creating the React Native App

First we’ll create a new React Native project using either the React Native CLI or the Create React Native App CLI:

Installing the AWS Mobile CLI

The AWS Mobile CLI offers a way to quickly & easily spin up new AWS Mobile Hub projects from the command line.

To get started we’ll now need to install & configure the AWS Mobile CLI if you don’t already have it installed:

npm i -g awsmobile-cli
awsmobile configure

If you’re not sure how to work with AWS IAM roles, check out this video walking through how to configure the AWS Mobile CLI from end to end in just a couple of minutes.Once the CLI is installed & configured, we need to go ahead and create a new AWS Mobile Project. From within the new React Native project root directory create a new AWS Mobile project:

awsmobile initNow, answer the default to all questions from awsmobile init.

This will also install a couple of local dependencies to our project. You should now see aws-amplify & aws-amplify-react-native in your package.json.

Finally, we need to link anaws-amplify native dependency:

react-native link amazon-cognito-identity-jsWe now have a new Mobile Hub project created in our AWS dashboard. You can view the project & configuration at anytime by running awsmobile console from the root of the React Native directory.

Now, we have a completely functioning sign up / sign in process in front of our main app.

To achieve similar functionality you can also use the <Authenticator />component to wrap whatever main component you would like to authenticate:

<Authenticator>
<App />
</Authenticator>

In the wrapped component (App), you will have access to a prop called authState that you can use to conditionally render. authState will have values of signIn, signUp, & signedIn among others to properly identify the current authentication state.

To view the S3 bucket, we can run awsmobile console from the command line, click on Resources, and under Amazon S3 Buckets click on the userfiles bucket.

Lambda Functions

When you hear “Serverless” you may typically think of a Lambda function. We can set one of these up manually and connect it with our existing AWS Amplify resources, or we can use the AWS Mobile CLI to set this up for us. Let’s continue using the CLI to create the new Lambda function.

To add a Lambda function as well as have it configured for you off the bat with some basic configuration, run the following command:

awsmobile cloud-api enable> If you’re not sure how to work with AWS IAM roles, check out this video walking through how to configure the AWS Mobile CLI from end to end in just a couple of minutes.awsmobile cloud-api enable will automatically create an API in API Gateway as well as a Lambda function and associate the two together.

Now, we can look in our project in awsmobilejs/backend/cloud-api to see some new configuration. Here, we see we have another new folder called sampleLambda holding a sample Lambda function that was deployed for us.

The Lambda function that was created for us is using the AWS Serverless Express package to spin up an express server with some preconfigured endpoints. These endpoints can be updated in our local code and pushed up to the server using the awsmobile push command as we’ll see in a second. We can also add new endpoints by configuring our local code as well as the cloud logic configuration in our AWS Mobile Hub project in the console.

Let’s update the app.get method on the /items path in awsmobilejs/backend/cloud-api/sampleLambda:

Managed API & Data Layer

AWS Amplify offers a GraphQL client that works with any GraphQL API. In our case, we’ll be looking at AWS AppSync which is a fully managed GraphQL service.

With AWS AppSync, you can have a GraphQL API that interacts with any data source you would like. There are built in data sources like Amazon DynamoDB, AWS Lambda Function or Amazon Elasticsearch, and with a Lambda function you can access any service or database you would like seamlessly through the single API layer that is GraphQL in the form of your AppSync API.

There are a couple of GraphQL clients that work with AWS AppSync. AWS Amplify has an API category that works seamlessly with any GraphQL API including AWS AppSync.

We can enable AWS AppSync from the AWS Mobile CLI, but doing so will create an autogenerated schema & datasource. Instead, we’ll visit the console to create and manually configure a custom API & configuration from the console.

**# Push Notifications**
Push Notifications are available for both Android & iOS in AWS Amplify.
To enable the Push Notification service, you should go to the Pinpoint console by running ```awsmobile console``` and clicking on Resources then under Amazon Pinpoint click the link to your service.
The initial configuration for Push Notifications takes more time than any of the other services because we not only need to update some configuration for React Native, we also need to set up the actual services through Apple & Google.
I&#x2019;ve written an article with a video walking through the entire process of setting up an iOS project [here](https://medium.com/react-native-training/react-native-push-notifications-with-amazon-pinpoint-ios-b2efa89ced32 "here"). The setup for Android can be found [here](https://aws.github.io/aws-amplify/media/push_notifications_setup#setup-for-android-devices "here").
Once your project is configured you can handle push notifications from with the app: