Chapter 2: Creating a React App with AmplifyJS and TypeScript

Now that we've familiarized ourselves with the Amplify CLI and Amplify Console, in this chapter, we will build a simple to-do app with TypeScript (TS) without writing much code. The idea is for you to get used to transitioning to TypeScript if you have not used it already. TypeScript is based on the concept of Strongly Typed, which means you can avoid a lot of runtime errors compared to using JavaScript (JS). This is because the transpiler (TS will get transpiled into JS, so it is not a compiler) will give you errors and warnings during transpilation when the types don't match.

The main reason we're following this to-do example is to give you an idea of how quickly we can build a basic React app with data input, store and retrieve data on DynamoDB, create the latest API 4.0 (GraphQL), and use Function as a Service (FaaS) and NoOps. That is all you need to create your next interactive prototype for user...

Technical requirements

This chapter requires that you have completed the exercises in Chapter 1, Getting Familiar with the Amplify CLI and Amplify Console. You can download the code for this chapter from the following link: https://github.com/PacktPublishing/Rapid-Application-Development-with-AWS-Amplify/tree/master/ch2.

Important Note

It is important that you keep your libraries up to date if you want to have better compatibility with the latest browsers and mobile operating systems, such as iOS and Android OS. Run the yarn upgrade command to keep your app up to date once in a while.

Creating a new project with React or React Native with TypeScript

I am glad that both React and React Native actually share the exact same processes for adding AWS Amplify to existing projects. Now, let's add the AWS Amplify library and Amplify UI to our app.

Installing AWS Amplify dependencies

Before we dive into the details of how to create the to-do list app and connect it to the backend, we will need to add the necessary dependencies to our projects:

1. For the ReactJS project, enter the following command:

   ? yarn add aws-amplify @aws-amplify/ui-react

2. For the Expo project, enter the following command:

   yarn add aws-amplify aws-amplify-react-native @react-native-community/netinfo

For the React Native project, things are more complicated. We need to follow these steps:

1. Enter the following command:

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

2. Run the following...

Setting up the backend

Now that you have installed the AWS Amplify dependencies, you will need to initialize the project by running the amplify init command in your terminal. You will run into a series of questions that will help you choose the right settings for your project. In our case, we only need to press Enter to choose the default prompted answers and wait for the process to complete. Here is an example of the React Native project after running the amplify init command:

? Enter a name for the project reactnative
? Enter a name for the environment dev
? Choose your default editor: Visual Studio Code
? Choose the type of app that you're building javascript
Please tell us about your project
? What javascript framework are you using react-native
? Source Directory Path:  /
? Distribution Directory Path: /
? Build Command:  npm run-script build
? Start Command: npm run-script start
Using default provider  awscloudformation
For more information...

Adding an API with GraphQL and DynamoDB

Now, let's add the GraphQL API to the app by running the amplify add api command in a Terminal. We will choose a to-do list template as the example for this chapter:

? amplify add api
? Please select from one of the below mentioned services: GraphQL
? Provide API name: my-api-name
? Choose the default authorization type for the API: API key
? Enter a description for the API key: dev
? After how many days from now the API key should expire (1-365): 365
? Do you want to configure advanced settings for the GraphQL API? No, I am done.
? Do you have an annotated GraphQL schema? No
? Choose a schema template: Single object with fields (e.g., "Todo" with ID, name, description) 
 ? Do you want to edit the schema now? Yes

Before we modify the code, we should call the amplify push command to trigger the code generator. This will generate the GraphQL code first:

? amplify push
? Do you want to generate code for your newly created...

Integrating the GraphQL API with the ReactJS app

For the ReactJS project, we must open the App.tsx file under the src folder to look at the JavaScript code that was generated by the Amplify CLI. Then, we must change the TypeScript code, as follows:

1. The following code was generated without any semi-colons. We will add them back in the TypeScript version. This code imports the essential libraries for React, Amplify, and GraphQL:

   import React, { useEffect, useState } from 'react'
   import Amplify, { API, graphqlOperation } from 'aws-amplify'
   import { createTodo } from './graphql/mutations'
   import { listTodos } from './graphql/queries'

2. The following code block imports your AWS account settings and your own credentials. These have been marked so that they not submitted to GitHub. This is because your credentials are supposed to be private to everyone. Therefore, if someone needs to pull from your repository, they need to set up their own...

Launching the ReactJS app

Let's call the amplify add hosting command to integrate all our code with Amplify Hosting. This will allow us to host the app with a dedicated URL so that we can share it with our friends or customers for user testing. Let's get started:

1. Go back to your Terminal and enter the amplify add hosting command to configure Amplify Hosting through the Amplify CLI:

   amplify add hosting
   Select the plugin module to execute (Use arrow keys)
   ❯ Hosting with Amplify Console (Managed hosting with custom domains, Continuous deployment) 
     Amazon CloudFront and S3
   Choose a type 
     Continuous deployment (Git-based deployments) 
   ❯ Manual deployment 
   You can now publish your app using the following command:
   amplify publish

2. Use the arrow keys to select manual deployment. Then, run the amplify publish command to publish the artifacts to the development environment with a staging URL:

   ✔ Successfully pulled backend environment...

Integrating the GraphQL API with the React Native and Expo apps

For the Expo and React Native projects, we cannot use standard CSS; we must use the React way of styling. If you want to let the user switch between light and dark modes on your app, you must keep the styling for the external files so that you can use code to switch between the different themes. In this case, we will create the AppStyles.ts file in the root directory with the following code:

import { StyleSheet } from 'react-native';
export default StyleSheet.create({
    container: { flex: 1, justifyContent: 'center', padding: 20 },
    todo: {  marginBottom: 15 },
    input: { height: 50, backgroundColor: '#ddd', marginBottom:    10, 
    padding: 8 },
    todoName: { fontSize: 18 }
  });

Now, we will open the App.tsx file and add the following...

Launching the React Native and Expo apps

For the Expo project, we will test the web, iOS, and Android versions:

1. Let's test out the web version first by entering the yarn web command in a Terminal:

   Figure 2.8 – The Expo CLI will show you the local URL and open it in your browser

2. A browser will open. It will start the metro builder and compile the web version of the app:

   Figure 2.9 – Compiling the web version of the app

3. Once the compilation is complete, a new tab will open in your browser automatically. You will see that the app is running, as shown in the following screenshot:

Figure 2.10 – The Expo to-do app running in a browser

As you can see, the styling of the Expo and React Native apps has been optimized for mobile, so the button and the input fields have been stretched across the screen. If you want to make this look nicer, you can add a fixed width for the button and input fields. Let's press Ctrl + C in...

Summary

We finally have our to-do app running on all React frameworks and devices. In this chapter, you learned how to build and run a working to-do list app with ReactJS, Expo, and React Native with AWS Amplify. This means you have enough knowledge to start building apps by yourself. In the next chapter, we will learn how to use pre-built Amplify UI components to speed up our next project.