Open a browser and navigate to http://localhost:8080 . The ‘Add data’ button does not work yet. We’ll work on that next.

Create a new ‘plain’ JavaScript ES2015 app with webpack. With the following commands, create the directory ( amplify-js-app ) and files for the app.

If you are using a version of React Native below 0.60 , you would need to link your dependencies by running the following command:

If you are using React Native 0.60 and above, autolinking is enabled. Run the following commands for iOS:

While not needed in this getting started flow, Amplify provides React Native bridges when using the Auth category in the aws-amplify-react-native package. If you are using Expo v25.0.0 or greater , those libraries are already included in your dependencies. Otherwise, you need to link those libraries to your project.

The project name is in camelCase to avoid problems when testing on a physical iOS phone.

Run the following commands to install Expo CLI to create and bootstrap your app (use defaults):

In addition to aws-amplify core, you can install the Angular Ionic modules which provide a service provider, helpers, and components:

To install Vue-specific Amplify UI components and the Amplify Vue plugin you can install the aws-amplify-vue package. See the Vue Guide for details and usage.

Use the Vue CLI to bootstrap a new Vue app (selecting the defaults will work for this project):

In a terminal window, run the following command (accept defaults is OK, use ‘test’ environment name) from inside your project directory:

When asked for the distribution directory, answer dist/myAmplifyProject . If you did not use the name in this tutorial, change “myAmplifyProject” with the name of your application. You can run an ng build and check your dist directory to see what the name is and re-run amplify configure project to change your dist directory setting.

How it Works: Rather than configuring each service through a constructor or constants file, Amplify supports configuration through a centralized file called aws-exports.js which defines all the regions and service endpoints to communicate. Whenever you run amplify push , this file is automatically created allowing you to focus on your application code. The Amplify CLI will place this file in the appropriate source directory configured with amplify init .

To verify that the CLI is set up for your app, run the following command:

The CLI displays a status table with no resources listed. As you add feature categories to your app and run amplify push , backend resources created for your app are listed in this table.

You can update a category by running amplify update <category-name> . If you no longer want to use a service you can delete it with amplify remove <category-name> . Lastly, you can remove the whole project by running amplify delete (Warning: This will attempt to delete your entire project, locally and in the cloud, essentially resetting your project as if you never ran amplify init ).

Add a GraphQL API to your app and automatically provision a database with the following command (accepting all defaults is OK):

The add api flow above will ask you some questions, like if you already have an annotated GraphQL schema. If this is your first time using the CLI select No and let it guide you through the default project “Single object with fields (e.g., “Todo” with ID, name, description)” as it will be used in the code generation examples below. Later on you can always change it. This process creates an AWS AppSync API and connects it to an Amazon DynamoDB database.

Learn more about annotating GraphQL schemas and data modeling.

Create required backend resources for your configured api with the following command:

Since you added an API the amplify push process will automatically prompt for codegen (select y when prompted for automatic query and code generation). Accept the defaults choosing JavaScript, TypeScript, or Angular depending on your platform.

For Ionic applications, choose Angular which will create an API.service.ts file in the app directory.

For Angular applications, choose Angular which will create an API.service.ts file in the app directory.

Angular

Ionic

Vanilla JavaScript

React

React Native

Vue

Update your src/app.js file to configure the library with Amplify.configure() and add data to your database with a mutation by using API.graphql() : import API , { graphqlOperation } from ' @aws-amplify/api ' import PubSub from ' @aws-amplify/pubsub ' ; import { createTodo } from ' ./graphql/mutations ' import awsconfig from ' ./aws-exports ' ; API . configure ( awsconfig ); PubSub . configure ( awsconfig ); async function createNewTodo () { const todo = { name : " Use AppSync " , description : " Realtime and Offline " } return await API . graphql ( graphqlOperation ( createTodo , { input : todo })) } const MutationButton = document . getElementById ( ' MutationEventButton ' ); const MutationResult = document . getElementById ( ' MutationResult ' ); MutationButton . addEventListener ( ' click ' , ( evt ) => { MutationResult . innerHTML = `MUTATION RESULTS:` ; createNewTodo (). then ( ( evt ) => { MutationResult . innerHTML += `<p> ${ evt . data . createTodo . name } - ${ evt . data . createTodo . description } </p>` }) }); After restarting your app using npm start go back to your browser and click ADD DATA. You’ll see that your application is now submitting events to AppSync and storing records in DynamoDB. Next, update src/app.js to list all the items in the database by importing listTodos and update the page when a query runs on app start by immediately calling the function: // other imports import { listTodos } from ' ./graphql/queries ' const QueryResult = document . getElementById ( ' QueryResult ' ); async function getData () { QueryResult . innerHTML = `QUERY RESULTS` ; API . graphql ( graphqlOperation ( listTodos )). then (( evt ) => { evt . data . listTodos . items . map (( todo , i ) => QueryResult . innerHTML += `<p> ${ todo . name } - ${ todo . description } </p>` ); }) } getData (); Now if you wish to subscribe to data, import the onCreateTodo subscription and create a new subscription by adding subscription with API.graphql() like so: // other imports import { onCreateTodo } from ' ./graphql/subscriptions ' const SubscriptionResult = document . getElementById ( ' SubscriptionResult ' ); API . graphql ( graphqlOperation ( onCreateTodo )). subscribe ({ next : ( evt ) => { SubscriptionResult . innerHTML = `SUBSCRIPTION RESULTS` const todo = evt . value . data . onCreateTodo ; SubscriptionResult . innerHTML += `<p> ${ todo . name } - ${ todo . description } </p>` } }); The code above imports only the API and PubSub category. To import the entire Amplify library use import Amplify from 'aws-amplify' . However, importing only the required categories is recommended as it will greatly reduce the final bundle size. After restarting your app using npm start go back to your browser and using dev tools you will see data being stored and retrieved in your backend from the console logs. At any time you can open the AWS console for your new API directly by running the following command: $ amplify console api > GraphQL ##Select GraphQL This will open the AWS AppSync console for you to run Queries, Mutations, or Subscriptions at the server and see the changes in your client app.

Update your src/App.js file to configure the library with Amplify.configure() and add data to your database with a mutation by using API.graphql() : import React from ' react ' ; import API , { graphqlOperation } from ' @aws-amplify/api ' ; import PubSub from ' @aws-amplify/pubsub ' ; import { createTodo } from ' ./graphql/mutations ' ; import awsconfig from ' ./aws-exports ' ; import ' ./App.css ' ; // Configure Amplify API . configure ( awsconfig ); PubSub . configure ( awsconfig ); async function createNewTodo () { const todo = { name : " Use AWS AppSync " , description : " Realtime and Offline " }; await API . graphql ( graphqlOperation ( createTodo , { input : todo })); } function App () { return ( < div className = " App " > < button onClick = { createNewTodo } > Add Todo < /button > < /div > ); } export default App ; Next, update src/App.js to list all the items in the database by importing listTodos and then using Hooks to update the page when a query runs on app start by adding initial state and a reducer function as well as modifying your App function: import React , { useEffect , useReducer } from ' react ' ; // ... import { createTodo } from ' ./graphql/mutations ' ; import { listTodos } from ' ./graphql/queries ' ; // ... // Action Types const QUERY = ' QUERY ' ; const initialState = { todos : [], }; const reducer = ( state , action ) => { switch ( action . type ) { case QUERY : return {... state , todos : action . todos }; default : return state ; } }; // ... function App () { const [ state , dispatch ] = useReducer ( reducer , initialState ); useEffect (() => { async function getData () { const todoData = await API . graphql ( graphqlOperation ( listTodos )); dispatch ({ type : QUERY , todos : todoData . data . listTodos . items }); } getData (); }, []); return ( < div > < div className = " App " > < button onClick = { createNewTodo } > Add Todo < /button > < /div > < div > { state . todos . length > 0 ? state . todos . map (( todo ) => < p key = { todo . id } > { todo . name } : { todo . description } < /p> ) : < p > Add some todos !< /p> } < /div > < /div > ); } export default App ; Now if you wish to subscribe to data, import the onCreateTodo subscription and create a new subscription by adding subscription with API.graphql() like so: // ... import { createTodo } from ' ./graphql/mutations ' ; import { listTodos } from ' ./graphql/queries ' ; import { onCreateTodo } from ' ./graphql/subscriptions ' ; // Action Types // ... const SUBSCRIPTION = ' SUBSCRIPTION ' ; // ... const reducer = ( state , action ) => { switch ( action . type ) { // ... case SUBSCRIPTION : return {... state , todos :[... state . todos , action . todo ]}; // ... } }; useEffect (() => { // ... const subscription = API . graphql ( graphqlOperation ( onCreateTodo )). subscribe ({ next : ( eventData ) => { const todo = eventData . value . data . onCreateTodo ; dispatch ({ type : SUBSCRIPTION , todo }); } }); return () => subscription . unsubscribe (); }, []); Below is the full sample code for this Getting Started section: import React , { useEffect , useReducer } from ' react ' ; import API , { graphqlOperation } from ' @aws-amplify/api ' ; import PubSub from ' @aws-amplify/pubsub ' ; import { createTodo } from ' ./graphql/mutations ' ; import { listTodos } from ' ./graphql/queries ' ; import { onCreateTodo } from ' ./graphql/subscriptions ' ; import awsconfig from ' ./aws-exports ' ; import ' ./App.css ' ; API . configure ( awsconfig ); PubSub . configure ( awsconfig ); // Action Types const QUERY = ' QUERY ' ; const SUBSCRIPTION = ' SUBSCRIPTION ' ; const initialState = { todos : [], }; const reducer = ( state , action ) => { switch ( action . type ) { case QUERY : return {... state , todos : action . todos }; case SUBSCRIPTION : return {... state , todos :[... state . todos , action . todo ]} default : return state ; } }; async function createNewTodo () { const todo = { name : " Use AWS AppSync " , description : " RealTime and Offline " }; await API . graphql ( graphqlOperation ( createTodo , { input : todo })); } function App () { const [ state , dispatch ] = useReducer ( reducer , initialState ); useEffect (() => { async function getData () { const todoData = await API . graphql ( graphqlOperation ( listTodos )); dispatch ({ type : QUERY , todos : todoData . data . listTodos . items }); } getData (); const subscription = API . graphql ( graphqlOperation ( onCreateTodo )). subscribe ({ next : ( eventData ) => { const todo = eventData . value . data . onCreateTodo ; dispatch ({ type : SUBSCRIPTION , todo }); } }); return () => subscription . unsubscribe (); }, []); return ( < div className = " App " > < button onClick = { createNewTodo } > Add Todo < /button > < div > { state . todos . length > 0 ? state . todos . map (( todo ) => < p key = { todo . id } > { todo . name } : { todo . description } < /p> ) : < p > Add some todos !< /p> } < /div > < /div > ); } export default App ; The code above imports only the API and PubSub category. To import the entire Amplify library use import Amplify from 'aws-amplify' . However, importing only the required categories is recommended as it will greatly reduce the final bundle size. After restarting your app using npm start go back to your browser and using dev tools you will see data being stored and retrieved in your backend from the console logs. At any time you can open the AWS console for your new API directly by running the following command: $ amplify console api > GraphQL ##Select GraphQL This will open the AWS AppSync console for you to run Queries, Mutations, or Subscriptions at the server and see the changes in your client app.

Update your App.js file to configure the library with Amplify.configure() and add data to your database with a mutation by using API.graphql() : import React , { useEffect , useReducer } from ' react ' import { StyleSheet , Text , View , Button } from ' react-native ' ; import API , { graphqlOperation } from ' @aws-amplify/api ' import PubSub from ' @aws-amplify/pubsub ' ; import { createTodo } from ' ./src/graphql/mutations ' ; import config from ' ./aws-exports ' API . configure ( config ) // Configure Amplify PubSub . configure ( config ) async function createNewTodo () { const todo = { name : " Use AppSync " , description : " Realtime and Offline " } await API . graphql ( graphqlOperation ( createTodo , { input : todo })) } export default function App () { return ( < View style = { styles . container } > < Button onPress = { createNewTodo } title = ' Create Todo ' /> < /View > ); } const styles = StyleSheet . create ({ container : { backgroundColor : ' #ddeeff ' , alignItems : ' center ' , justifyContent : ' center ' , flex : 1 } }); Next, update App.js to list all the items in the database by importing listTodos and then using Hooks to update the page when a query runs on app start by adding initial state and a reducer function as well as modifying your App function: // other imports import { listTodos } from ' ./src/graphql/queries ' ; const initialState = { todos :[]}; const reducer = ( state , action ) => { switch ( action . type ){ case ' QUERY ' : return {... state , todos : action . todos } case ' SUBSCRIPTION ' : return {... state , todos :[... state . todos , action . todo ]} default : return state } } export default function App () { const [ state , dispatch ] = useReducer ( reducer , initialState ) useEffect (() => { getData () }, []) async function getData () { const todoData = await API . graphql ( graphqlOperation ( listTodos )) dispatch ({ type : ' QUERY ' , todos : todoData . data . listTodos . items }); } return ( < View style = { styles . container } > < Button onPress = { createNewTodo } title = ' Create Todo ' /> { state . todos . map (( todo , i ) => < Text key = { todo . id } > { todo . name } : { todo . description } < /Text> ) } < /View > ); } Now if you wish to subscribe to data, import the onCreateTodo subscription and create a new subscription by adding subscription with API.graphql() like so: // other imports import { onCreateTodo } from ' ./src/graphql/subscriptions ' ; useEffect (() => { //...other code const subscription = API . graphql ( graphqlOperation ( onCreateTodo )). subscribe ({ next : ( eventData ) => { const todo = eventData . value . data . onCreateTodo ; dispatch ({ type : ' SUBSCRIPTION ' , todo }) } }) return () => subscription . unsubscribe () }, []) The code above imports only the API and PubSub category. To import the entire Amplify library use import Amplify from 'aws-amplify' . However, importing only the required categories is recommended as it will greatly reduce the final bundle size. After restarting your app and running a mutation, using dev tools (developer menu tap “Debug JS Remotely) you will see data being stored and retrieved in your backend from the console logs. At any time you can open the AWS console for your new API directly by running the following command: $ amplify console api > GraphQL ##Select GraphQL This will open the AWS AppSync console for you to run Queries, Mutations, or Subscriptions at the server and see the changes in your client app.

Update your main.ts to configure the library with Amplify.configure() : import PubSub from ' @aws-amplify/pubsub ' ; import API from ' @aws-amplify/api ' ; import awsconfig from ' ./aws-exports ' ; API . configure ( awsconfig ); PubSub . configure ( awsconfig ); Depending on your TypeScript version you may need to rename aws-exports.js to aws-exports.ts prior to importing, or enable the allowJs compiler option in your tsconfig. Update src/tsconfig.app.json to include the “node” compiler option in types: "compilerOptions" : { "types" : [ "node" ] } Note: If you are using Angular 6 or above, you may need to add the following to the top of your src/polyfills.ts file: (window as any).global = window; (window as any).process = { env: { DEBUG: undefined }, }; In your src/app/app.component.ts file, add the following imports and modifications to your class to to add data to your database with a mutation by using the API.service file which was generated when you ran amplify add api : import { APIService } from ' ./API.service ' ; export class AppComponent { constructor ( private apiService : APIService ) {} createTodo () { this . apiService . CreateTodo ({ name : ' Angular ' , description : ' testing ' }); } } Add the following to your src/app/app.component.html to add a button which calls your createTodo() method: <button (click)= "createTodo()" > Add Todo </button> Next, update the class to list all items in the database by running a ListTodos query when the app starts by implementing OnInit and storing the items in an array: export class AppComponent implements OnInit { todos : Array < any > ; async ngOnInit () { this . apiService . ListTodos (). then (( evt ) => { this . todos = evt . items ; }); } //Other code.... } Add the following to your src/app/app.component.html to display any of the todos you have added: <ul> <li *ngFor= "let item of todos" > {{item.name}} - {{item.description}} </li> </ul> Finally, to subscribe to realtime data, update ngOnInit to setup a subscription on app start and update the todos array when new events are received: import { Component , OnInit } from ' @angular/core ' ; export class AppComponent implements OnInit { async ngOnInit () { //Other code... this . apiService . OnCreateTodoListener . subscribe (( evt ) => { const data = ( evt as any ). value . data . onCreateTodo ; this . todos = [... this . todos , data ]; }); } The code above imports only the API and PubSub category. To import the entire Amplify library use import Amplify from 'aws-amplify' . However, importing only the required categories is recommended as it will greatly reduce the final bundle size. After restarting your app using ng serve go back to your browser and using dev tools you will see data being stored and retrieved in your backend from the console logs. At any time you can open the AWS console for your new API directly by running the following command: $ amplify console api > GraphQL ##Select GraphQL This will open the AWS AppSync console for you to run Queries, Mutations, or Subscriptions at the server and see the changes in your client app.

Update your main.ts to configure the library: import PubSub from ' @aws-amplify/pubsub ' ; import API from ' @aws-amplify/api ' ; import awsconfig from ' ./aws-exports ' ; API . configure ( awsconfig ); PubSub . configure ( awsconfig ); When working with underlying aws-js-sdk , the “node” package should be included in types compiler option. update your src/tsconfig.app.json : "compilerOptions" : { "types" : [ "node" ] } Note: If you are using Angular 6 or above or above, you may need to add the following to the top of your src/polyfills.ts file: (window as any).global = window; (window as any).process = { env: { DEBUG: undefined }, }; In your src/app/app.component.ts file, add the following imports and modifications to your class to to add data to your database with a mutation by using the API.service file which was generated when you ran amplify add api : import { APIService } from ' ./API.service ' ; constructor ( //other variables private apiService : APIService ){ this . initializeApp (); } createTodo () { this . apiService . CreateTodo ({ name : ' ionic ' , description : ' testing ' }); } Then, replace your src/app/app.component.html code with a button to add data: <ion-button (click)= "createTodo()" > Add Data </ion-button> Next, update initializeApp() in src/app/app.component.ts to list all items in the database by running a query on start and populating a local variable called todos : export class AppComponent { todos : Array < any > ; initializeApp () { this . platform . ready (). then (() => { //other code this . apiService . ListTodos (). then (( evt ) => { this . todos = evt . items ; }); }); } } Add the following to your src/app/app.component.html to display any of the todos you have added: <ion-list> <ion-item *ngFor= "let item of todos" > {{item.name}} - {{item.description}} </ion-item> </ion-list> Finally, to subscribe to realtime data, update initializeApp() to setup a subscription on app start and update the todos array when new events are received: initializeApp () { this . platform . ready (). then (() => { //other code this . apiService . OnCreateTodoListener . subscribe (( evt ) => { const data = ( evt as any ). value . data . onCreateTodo ; this . todos = [... this . todos , data ]; }); } } The code above imports only the API and PubSub category. To import the entire Amplify library use import Amplify from 'aws-amplify' . However, importing only the required categories is recommended as it will greatly reduce the final bundle size. After restarting your app using ng serve go back to your browser and using dev tools you will see data being stored and retrieved in your backend from the console logs. At any time you can open the AWS console for your new API directly by running the following command: $ amplify console api > GraphQL ##Select GraphQL This will open the AWS AppSync console for you to run Queries, Mutations, or Subscriptions at the server and see the changes in your client app.

Update your main.js file to configure the library with Amplify.configure() like so: import Vue from ' vue ' import App from ' ./App.vue ' import API from ' @aws-amplify/api ' ; import PubSub from ' @aws-amplify/pubsub ' ; import awsconfig from ' ./aws-exports ' ; API . configure ( awsconfig ); PubSub . configure ( awsconfig ); Vue . config . productionTip = false new Vue ({ render : h => h ( App ), }). $mount ( ' #app ' ) Next, open App.vue add data to your database with a mutation by using API.graphql() : <template> <div id= "app" > <button @ click= "createNewTodo" > Add Todo </button> </div> </template> <script> import API , { graphqlOperation } from ' @aws-amplify/api ' ; // eslint-disable-next-line import { createTodo } from " ./graphql/mutations " ; export default { name : ' app ' , methods :{ async createNewTodo (){ const todo = { name : " Use AppSync " , description : " Realtime and Offline " } await API . graphql ( graphqlOperation ( createTodo , { input : todo })) } } }; </script> To display the data, update App.vue to list all the items in the database by importing listTodos and then using the created() Vue lifecycle method to update the page when a query runs on page load: <template> <div id= "app" > <button @ click= "createNewTodo" > Add Todo </button> <ul> <li v-for= "todo in todos" :key= "todo.id" > {{todo.name}} - {{todo.description}} </li> </ul> </div> </template> <script> // other imports import { listTodos } from ' ./graphql/queries ' export default { name : ' app ' , data (){ return { todos : [] } }, methods :{ async createNewTodo (){ /* code above */ }, async getData (){ const todoData = await API . graphql ( graphqlOperation ( listTodos )) this . todos . push (... this . todos , ... todoData . data . listTodos . items ); } }, created (){ this . getData () } }; </script> Now if you wish to subscribe to data, import the onCreateTodo subscription and create a new subscription by adding subscription with API.graphql() like so: <script> // other imports import { onCreateTodo } from ' ./graphql/subscriptions ' export default { name : ' app ' , data (){ return { todos : [] } }, methods :{ async createNewTodo (){ /* code above */ }, async getData (){ /* code above */ }, subscribe (){ API . graphql ( graphqlOperation ( onCreateTodo )). subscribe ({ next : ( eventData ) => { const todo = eventData . value . data . onCreateTodo ; this . todos . push ( todo ); } }) } }, created (){ this . getData () this . subscribe () } }; </script> The code above imports only the API and PubSub category. To import the entire Amplify library use import Amplify from 'aws-amplify' . However, importing only the required categories is recommended as it will greatly reduce the final bundle size. After restarting your app using yarn serve go back to your browser and using dev tools you will see data being stored and retrieved in your backend from the console logs. At any time you can open the AWS console for your new API directly by running the following command: $ amplify console api > GraphQL ##Select GraphQL This will open the AWS AppSync console for you to run Queries, Mutations, or Subscriptions at the server and see the changes in your client app.

Step 5. Launch your App