Quickstart

Prerequisites

Before you get started, make sure you have the following installed:

Node.js v18.17 or later
npm v9 or later
git v2.14.1 or later
You will also need tocreate an AWS Account. Note that AWS Amplify is part of theAWS Free Tier.
Configure your AWS account to use with Amplifyinstructions.

This Quickstart guide will walk you through how to build a Todo application for Android or iOS usingExpo's TypeScript template.

Warning: React Native for Web is not officially supported yet, but we are working towards official support. We are tracking the progress inissue #13918 on GitHub

Amplify now requires native modules not available through the Expo SDK. As a result, Expo Go is no longer supported but you should still be able to use Expo.Learn more about dropping support for Expo Go in Amplify v6.

Terminal

npx create-expo-app my_amplify_app -t expo-template-blank-typescript
cd my_amplify_app

For calling native libraries and platform dependencies, you need to have run the prebuild command for generating the folders for depending platforms.

Terminal

npx expo prebuild

Create Backend

The easiest way to get started with AWS Amplify is through npm withcreate-amplify command. You can run it from your base project directory.

Terminal

cd my_amplify_app
npm create amplify@latest
? Where should we create your project? (.) # press enter

Running this command will scaffold Amplify backend files in your current project with the following files added:

├── amplify/
│   ├── auth/
│   │   └── resource.ts
│   ├── data/
│   │   └── resource.ts
│   ├── backend.ts
│   └── package.json
├── node_modules/
├── .gitignore
├── package-lock.json
├── package.json
└── tsconfig.json

To deploy your backend use Amplify's per-developer cloud sandbox. This feature provides a separate backend environment for every developer on a team, ideal for local development and testing. To run your application with a sandbox environment, you can run the following command:

Terminal

npx ampx sandbox

Adding Authentication

The initial scaffolding already has a pre-configured auth backend defined in theamplify/auth/resource.ts file. We've configured it to support email and password login but you can extend it to support a variety of login mechanisms, including Google, Amazon, Sign In With Apple, and Facebook.

The fastest way to get your login experience up and running is to use our Authenticator UI component available in the Amplify UI library.

To use the Authenticator, you need to add the following dependencies to your project:

Terminal

npm add \
  @aws-amplify/ui-react-native \
  @aws-amplify/react-native \
  aws-amplify \
  @react-native-community/netinfo \
  @react-native-async-storage/async-storage \
  react-native-safe-area-context@^4.2.5 \
  react-native-get-random-values \
  react-native-url-polyfill

Then install the iOS cocoapods for targeting iOS by running:

Terminal

npx pod-install

Next, update theApp.tsx file with the following:

import Reactfrom"react";
import{ Button, View, StyleSheet}from"react-native";
import{ Amplify}from"aws-amplify";
import{ Authenticator, useAuthenticator}from"@aws-amplify/ui-react-native";
import outputsfrom"./amplify_outputs.json";
Amplify.configure(outputs);
constSignOutButton=()=>{
const{ signOut}=useAuthenticator();
return(
<View style={styles.signOutButton}>
<Button title="Sign Out" onPress={signOut}/>
</View>
);
};
constApp=()=>{
return(
<Authenticator.Provider>
<Authenticator>
<SignOutButton/>
</Authenticator>
</Authenticator.Provider>
);
};
const styles= StyleSheet.create({
  signOutButton:{
    alignSelf:"flex-end",
},
});
exportdefault App;

The Authenticator component auto-detects your auth backend settings and renders the correct UI state based on the auth backend's authentication flow.

Run your application in your local environment again. You should be presented with a login experience now.

Adding Data

The initial scaffolding already has a pre-configured data backend defined in theamplify/data/resource.ts file. The default example will create a Todo model withcontent field.

Let's modify this to add the following:

A booleanisDone field.
An authorization rules specifying owners, authenticated via your Auth resource can "create", "read", "update", and "delete" their own records.
Update thedefaultAuthorizationMode to sign API requests with the user authentication token.

import{typeClientSchema, a, defineData}from'@aws-amplify/backend';
const schema= a.schema({
  Todo: a
.model({
      content: a.string(),
      isDone: a.boolean()
})
.authorization(allow=>[allow.owner()])
});
exporttypeSchema= ClientSchema<typeof schema>;
exportconst data=defineData({
  schema,
  authorizationModes:{
    defaultAuthorizationMode:'userPool'
}
});

Next, let's implement UI to create, list, and delete the to-do items. Create asrc folder, and within the folder, create a new file calledTodoList.tsx. This page will contain information about creating, reading, updating, and deleting Todo items.

Copy and paste the following code into the file:

import{ useState, useEffect}from"react";
import{ View, Button, Text, StyleSheet, FlatList}from"react-native";
import{ generateClient}from"aws-amplify/data";
importtype{ Schema}from"../amplify/data/resource";
import{ GraphQLError}from"graphql";
const client=generateClient<Schema>();
constTodoList=()=>{
const dateTimeNow=newDate();
const[todos, setTodos]=useState<Schema["Todo"]["type"][]>([]);
const[errors, setErrors]=useState<GraphQLError>();
useEffect(()=>{
const sub= client.models.Todo.observeQuery().subscribe({
next:({ items})=>{
setTodos([...items]);
},
});
return()=> sub.unsubscribe();
},[]);
constcreateTodo=async()=>{
try{
await client.models.Todo.create({
        content:`${dateTimeNow.getUTCMilliseconds()}`,
});
}catch(error:unknown){
if(errorinstanceofGraphQLError){
setErrors(error);
}else{
throw error;
}
}
};
if(errors){
return<Text>{errors.message}</Text>;
}
const renderItem=({ item}:{ item: Schema["Todo"]["type"]})=>(
<TodoItem{...item}/>
);
return(
<View style={{ flex:1}}>
<FlatList
        data={todos}
        renderItem={renderItem}
        keyExtractor={(item)=> item.id}
        ItemSeparatorComponent={()=>(
<View style={styles.listItemSeparator}/>
)}
        ListEmptyComponent={()=><Text>The todo listis empty.</Text>}
        style={styles.listContainer}
></FlatList>
<Button onPress={createTodo} title="Create Todo"/>
</View>
);
};
const TodoItem=(todo: Schema["Todo"]["type"])=>(
<View style={styles.todoItemContainer} key={todo.id}>
<Text
      style={{
...styles.todoItemText,
        textDecorationLine: todo.isDone?"line-through":"none",
        textDecorationColor: todo.isDone?"red":"black",
}}
>
{todo.content}
</Text>
<Button
      onPress={async()=>{
await client.models.Todo.delete(todo);
}}
      title="Delete"
/>
<Button
      onPress={()=>{
        client.models.Todo.update({
          id: todo.id,
          isDone:!todo.isDone,
});
}}
      title={todo.isDone?"Undo":"Done"}
/>
</View>
);
const styles= StyleSheet.create({
  todoItemContainer:{ flexDirection:"row", alignItems:"center", padding:8},
  todoItemText:{ flex:1, textAlign:"center"},
  listContainer:{ flex:1, alignSelf:"stretch", padding:8},
  listItemSeparator:{ backgroundColor:"lightgrey", height:2},
});
exportdefault TodoList;

With the code above, you can create a random todo item and display todo items in a list. You can mark them as done, update the list, or revert that operation. You can also delete the items. Each change in the list is listened to with the subscription and immediately shown on the screen.

If we take a closer look at the code:

generateClient generates the necessary files and folders for models.
TodoList component includes the subscription, creation operations, and a list to hold created items.
TodoItem holds the information about each todo item.

Lastly, update theApp component inApp.tsx as follows:

constApp=()=>{
return(
<Authenticator.Provider>
<Authenticator>
<SafeAreaView style={styles.container}>
<SignOutButton/>
<TodoList/>
</SafeAreaView>
</Authenticator>
</Authenticator.Provider>
);
};
const styles= StyleSheet.create({
  container:{
    flex:1,
    padding:8,
},
  signOutButton:{
    alignSelf:"flex-end",
},
});

If you run the application now, you should see the following behavior:

You can terminate the sandbox environment now to clean up the project.

Publishing changes to cloud

Publishing changes to the cloud requires a remote git repository. Amplify offers fullstack branch deployments that allow you to automatically deploy infrastructure and application code changes from feature branches. To learn more, visit thefullstack branch deployments guide.

🥳 Success

That's it! You have successfully built a fullstack app on AWS Amplify. If you want to learn more about how to work with Amplify, here's the conceptual guide forhow Amplify works.

Movatterモバイル変換

Introducing Amplify Gen 2

Fullstack TypeScript

Built with the AWS CDK

Quickstart

Prerequisites

Create Backend

Adding Authentication

Adding Data

Publishing changes to cloud

🥳 Success