Amazon Web Services for React Native Developers – The Series: Chapter 1

AWS provides libraries that can be used easily. Even the documentation on its site is well documented. So, in this blog post, we will digest all that information and tell you how to create an App for exploring the basic libraries to use and interact with it. You will be able to start quickly. Keep reading!

Overview

As a mobile developer, I always try to know about the most recent technologies to interact with the server. Most of the time, we use Firebase as the primary server technology. So, one day I was looking for more technologies to implement, and that was how I started to interact with AWS.

It was awesome! It provides us with cloud services, such as storage, NoSQL database technologies, Server-less, GraphQL APIs, testing tools, analytics, and caching data. Also, we can administer all these technologies from the web browser.

In this blog post, we will create an app to explore the basic libraries to use and interact with it. Just for you to know, AWS provides libraries that we can use easily; even the documentation on its site is well documented. So, let’s start!

Ready? Let’s get started

First, we are going to talk about the architecture that we are going to use. Take a look at the following image:

Services summary

Amazon Mobile Hub

Amazon Mobile Hub is a service that enables us to deploy and configure mobile app backend features quickly using a range of robust AWS services.

Here, you create a project, choose and configure mobile app features using a point and click console. The good thing is that Mobile Hub takes care of the complexities in the background and then supplies you with step-by-step integration instructions.

Amazon S3 (Simple Storage Service)

Amazon S3 is an object storage service that offers industry-leading scalability, data availability, security, and performance. You can use it for different industry sizes and it is not only for mobile development; you can use it either with web or mobile.

If you want, you can upgrade the size of the service and you can control the rate to use. Use it to manage all the multimedia and files.

Amazon Cognito

Amazon Cognito is a service that will handle all the authentication flow. That means that this service provides us a HOC to create Sign-in and Sign-up screens. Oh, and you can control it from a web dashboard.

This service can support millions of users and provides us sign-in flow with social identity providers, such as Apple, Facebook, Google, and Amazon, and enterprise identity providers via SAML 2.0 and OpenID Connect.

Amazon API Gateway

This service allows us to create, maintain, display, and scale an API quickly. Here we have the option to create a RESTful API or WebSockets and enable real-time communication. You pay the service on-demand, which means you pay only for the calls that you make. Also, we have sub-services to interact with more AWS services.

• AWS Lambdas: It helps you to create functions when we make a call on the API.
• Amazon DynamoDB: It is the database management system that uses AWS.
• AWS Amplify: It is a set of services that provides all the backend that we talked about previously. We can deploy full-stack applications, and for that, we need to install all the services with their own CLI.

Now, let’s get things done

To follow along with this tutorial you should have:

1. Node v10 or later
2. npm v5.2 or later
3. An AWS account
4. Knowledge of JavaScript and React
5. Knowledge of React Native
6. An Android and/or IOS emulator
7. Git v2.14.1 or later
8. Yarn latest version

Ready? Let’s get started!

Setting up AWS Amplify

To use AWS within our application you must have installed Amplify CLI already. To do that, go to your terminal and run the following command:

$ npm install -g @aws-amplify/cli

After you have installed Amplify CLI successfully, you should configure the CLI. Run the following command to configure Amplify:

$ amplify configure

This command will require several steps related to your Amazon authentication and device detection before a successful installation. These are the steps to do that:

1. Authentication with your Amazon account
2. Adding identity and access management (IAM)

We must create a user account with AdministratorAccess Level, by doing so, we will ensure that we have enough permissions to administer Amplify. The CLI will ask us this information:

1. Specify an AWS region
2. Add the AccessKey and SecretAccessKey. We can see this information on the AWS console
3. Adding AWS profile

The next screen will show a summary of the steps taken,

Setting up the React Native project

For this step, we must have installed React Native without expo. If you do not have React Native CLI installed, I recommend you to read RN documentation, which is easy to follow the steps for the RN installation without expo.

Once you have installed RN, run the following command:

$ react-native init awsblogcourse

It is supposed that this command installed all the required dependencies to run the React Native project. So, now we can access the directory.

In your terminal, go to the project directory and open it on your code IDE to follow the following steps.

Add AWS amplify to the React Native project

Once we have installed the AWS Amplify CLI and the React Native project is set up, in your terminal go to the project path and run the following command:

$ amplify init

The terminal will prompt the following information:

1. Project’s name
2. Environment to work (we are going to use dev)
3. Your code editor
4. The app type that you are building
5. The JavaScript framework you will use
6. The source path (press enter to let with default path)
7. Distribution directory path (press enter to set default path)
8. Build command (press enter to set default command)
9. Start command (press enter to set default command)
10. Whether you want to use an AWS Profile or not (input Yes and press enter)
11. If yes, which profile you want to use

After the installation process is completed, we can use the subsequent changes inside the project folder:

1. A new folder called Amplify inside this folder. Here we can read all the configurations about Amplify
2. Inside the src folder, we can see a file called aws-exports.js. It specifies all the Amplify initialization. Besides, it contains all the specifications for the Amplify service
3. The gitignore file was updated, adding all the new files that we will not need in the repository
4. We can now access the Amplify console to run commands related to the services that we can add. You will see an example in the following sections

Now, we have to install other Amplify dependencies, to install them run the next command:

$ yarn add aws-amplify aws-amplify-react-native @react-native-community/netinfo amazon-cognito-identity-js

Then, we have to open the App.js file on the code editor and add the following lines. Keep an eye on this step as it is important for the configuration because these lines are connected with AWS.

As we saw previously in the App.js file, the App is now connected with the AWS Amplify, and we can install the features that we want.

Setting up authentication with Amazon Cognito

Now we can install Amazon Cognito to manage all the users and use the HOC to use the sign-in or sign-up screens automatically.

To get started, go to the open terminal on the root path and add the following command lines:

$ amplify add auth

The terminal will prompt and will show us the following configuration:

1. Choose the default configuration
2. Choose the way you want to authenticate the users

After installation of the authentication service to deploy the service, you need to run the following command:
$ amplify push

Up to this point, you have enabled the authentication service, therefore you can manage the users’ data in the amazon web service console.

Click on the AWS amplify panel, and you will see all the apps that you have installed.

You will see the services that you have enabled.

We have enabled the authentication service, we can now add the HOC for the authentication user in the App.js

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

withAuthenticator is a higher-order component that automatically detects the authentication state of the application and updates the UI.

Change the default export at the App.js with the following lines:

export default withAuthenticator(App);

Now, the HOC will help us with the UI, and we can manage the users.

It is necessary to create an account to follow the next steps. If you need to see the information related to the users, you have to go to AWS (as we saw previously at the beginning of this blog).

Setting up API with Amazon API Gateway

Amplify CLI provides us a helper to create the initial structure. For this example, we will be using the following configuration to create a TODO app to understand the Amplify workflow and the way to connect it. Follow this format running the command:

$ amplify add api

The terminal will prompt the following steps:

1. One of the services that you want to work on (we chose GraphQL for this blog)
2. The project’s name will be used by amazon on the console
3. That we are going to use API Key to authorize the calls
4. If you want to add the project description
5. The number of days before project keys expire
6. If you need advanced features, you can do it in this step
7. If you want to start with your GraphQL schema, you can do it here; in our case, it will not be necessary
8. Amplify provides basic schemas to make it faster. Select “Single object with fields”

So, Amplify will create the schema and the configuration that you select. It takes a few seconds, but after that, you will enjoy all the perks AWS provides. Let’s analyze the auto-generated code.

If you are not familiar with GraphQL, I will share a quick overview of this technology. First go to the folders and search the file schema.graphql

> amplify > backend > api > schema.graphql

Now, we are going to see this file with the following code lines:

A type in GraphQL is a piece of data that allows us to store it in the database. Inside the model, you must declare the fields you want to store. In this case, the @model will create a structure with the name Todo and the fields will be id, name, and description.

The field’s type is next to the field’s name that will be declared by reserved words, such as ID, String, Int, Float, and Boolean. If you want to display a field as required, you need the ! symbol.

The previous data are auto-generated via amplify cli, now open the App.js file.

Add the following changes:

1. Add the useEffect and useState hook
2. Declare API and graphqlOperation
3. Call the query to list the to-do tasks
4. Declare the state to store the data
5. Declare the signout function
6. Use the Hook useEffect to call the AppSync with a graphqlOperation
7. Use the API and GraphQL methods

You can see the complete example in the following GitHub gist.

Wrap-up

So, we have finished the project’s first part here. Here, we are implementing all the needed stuff to start your React Native project with AWS, and you will be able to use Cognito to know the user’s status. Just for you to know, we will get into the S3, API Gateway, and Lambdas in the following chapters, and some more stuff about GraphQL. Keep reading and stay motivated. Thanks for reading this first chapter!