AWS Amplify and AppSync with Expo (React Native) cheat sheet

awsamplifyexpo.js

AWS Amplify and AppSync with Expo (React Native) cheat sheet and reference guide

[AWS Amplify] https://aws-amplify.github.io
[Expo] https://expo.io

// In order to run the Android emulator with Expo you will need Android Studio with Android Virtual Device Manager
// In order to run the iOS simulator with Expo you'll need Xcode  

INITIALIZE PROJECT

# install Expo CLI
npm install expo-cli --global

# scaffold a new expo project
expo init expo-amplify
cd expo-amplify

# install local dependencies for the AWS Amplify library
npm install --save aws-amplify aws-amplify-react-native

# test out the project
expo start

# install and configure the AWS Amplify CLI
npm i -g @aws-amplify/cli

# Configure the AWS Amplify CLI with an IAM user
amplify configure

# initialize the AWS Amplify project
amplify init 

AUTHENTICATION

# add a new feature such as Authentication (Cognito)
amplify add auth

# enable the service in your account
amplify push

// review aws-exports.js that was created by the CLI
// update code in your app.js, 
// import { Auth } from 'aws-amplify'
// import config from ‘./aws-exports’
// add authentication flow with:

// import { withAuthenticator } from 'aws-amplify-react-native'
// export default withAuthenticator(App, { includeGreetings: true }

GRAPHQL

# AppSync is a managed GraphQL service that allows you to build serverless GraphQL APIs that scale

# run app
expo start

# view config 
amplify status

# GraphQL - AWS AppSync
amplify add api

// edit schema.graphql under /backend/api/* 

# once AppSync resources are successfully added locally push them out for execution
amplify push

// to interact with the API, we will use the API category & graphqlOperation helper from aws-amplify
// import API, { graphqlOperation } from '@aws-amplify/api'
// we can use the API.graphql function to define a mutation and execute a mutation
// define the query and then execute it

LAMBDA

# AWS Amplify allows us to quickly spin up both Lambda functions as well as APIs that are built using Lambda functions by using the api category.
# This Lambda function will be running an Express app with different REST endpoints that we can access.

# create the API & Lambda function
amplify add api
// provide the top level path and choose the function template that you want to use as “Serverless express function (Integration with Amazon API Gateway)”
// update /amplify/backend/function/“mylambdaapifunction”/src/app.js with your app.get function
// answer cli

# push resources  
amplify push

// to fetch data we can call API.get (api name, apipath) ex. const apidata = await API.get(‘mylambdaapi’, ‘/endpoint’)

# Updating the Lambda REST API, such as adding new endpoints
amplify configure api
// change code in /amplify/backend/function/“mylambdafunction”
amplify push

# if you want promise-based HTTP request capability
// add the axios library to /amplify/backend/function/“mylambdafunction” run:
npm install —save axios

// in your app.js file below your last import add:
// const axios = require('axios') and use the axios.get method
amplify push 
// now you can call the API from the Expo app 

ANALYTICS

# AWS Amplify allows us to easily add Analytics to our app using Amazon Pinpoint

# add analytics
amplify add analytics

# push the new config to our account
amplify push

// import Analytics from ‘@aws-amplify/storage’ and call Analytics.record with three arguments
// Analytics.record({ name: String!, attributes: Object, metrics: Object })

STORAGE

# add storage to our app using Amazon S3
amplify add storage

// import Storage from ‘@aws-amplify/storage’ 
// to store an item:  await Storage.put(‘file.txt’, ‘Hello World!’)
// to retrive an item: const s3file = await Storage.get(‘file.txt’)

# add a couple libraries
yarn add mime-typed path