The underlying AWS mobile CLI used in this course has changed it's API. If you're starting to learn AWS, you may want to try the latest course. We now recommend you take the AWS for Front-End Engineers (ft. S3, Cloudfront & Route 53) course.
Table of Contents
Introduction
Introduction
After introduces himself and the "Deploying Full Stack: Node.js & React on AWS" course, Steve talks about why prototyping and deploying on world-class architecture is important.
AWS Account Setup & IAM Role
Steve walks through setting up your AWS account with a subuser to work with Amazon MobileHub.
Mobile Hub & Amplify
AWS Mobile Hub, Amplify, and AppSync Overview
Steve elaborates on a few tools that AWS offers front-end engineers by describing how they are different and — more importantly — how you can use them together to rapidly build client-side applications.
React Application Review
Steve introduces "Grudge Bin," a sample application for keeping track of people who have wronged you over the years. In its initial state, this demonstration application, which will be used throughout the course is need of some work to solve three problems: data is saved in memory; missing authentication; and the application has not been deployed.
AWS Mobile Hub CLI Setup
Steve leverages AWS Mobile Hub to configure a backend authentication service.
Adding Authentication to React
Steve uses AWS Amplify to add a login page.
AWS Console Settings
After adding a log in page, Steve opens the AWS Mobile Hub console to show the custom configuration setup and makes some modifications.
Adding Amplify withAuthenticator into React
Steve wraps the Application component with Amplify's withAuthenticator component.
Adding a Database with Mobile Hub
To resolve the issue of data being stored only in memory, Steve uses AWS Mobile Hub CLI to create a database to persist data.
Adding Cloud API with Mobile Hub
Steve uses the cloud-api feature within AWS Mobile Hub CLI to create an API.
Saving React State to the Cloud API
Steve implements the ability to get all of the "grudges" from the database as well as creating a new "grudge."
Publishing Your Application
Steve demonstrates how to publish the new application onto the web.
API and Auth Modules
Steve reviews a few Auth and API methods provided by AWS Amplify.
File Storage
Storage API Overview
Steve walks through Storage API, which is an AWS Amplify module that provides an abstraction over a well-very configed S3 bucket that Mobile Hub.
Trapper Keeper React Application Review
Steve introduces the next course demontration application, Trapper Keeper. Trapper Keeper is an application for keeping track of images in an S3 bucket.
Upload Images in React with Amplify
Steve demonstrates how to upload assets to an S3 bucket using the AWS Amplify's Storage API.
Display Storage API Files in React
Steve walks through how to display images from an S3 bucket with the Storage API.
Creating an S3 Image Component
Since image URLs must be fetched asynchronously, Steve rebuilds a component found in AWS Amplify library to asynchronously loading images found on S3.
Adding Auth to Make Images Private
Steve reviews an approach to use authentication within the application for users to upload their own, private images.
AppSync
AppSync Overview
Steve introduces AppSync, AWS's real-time GraphQL service that was announced in November of 2017 and released to a broad audience in April of 2018.
GraphQL Overview
Steve covers the basics of GraphQL and the requisite knowledge for working with AppSync.
Creating a Schema & Database
Steve tours the AppSync console, creates a simple schema, and automatically provisions databases based on that schema.
GraphQL Queries
After creating a DynamoDB table from a GraphQL type, Steve demonstrates writing and testing GraphQL queries.
Adding AppSync to React
Steve revisits Grudge Bin to build on top of AWS AppSync to add the feature of being notified when a new "grudge" is added to the application.
Creating Items with GraphQL in React
Steve implements the features for creating a grudge and listing all the grudges from GraphQL.
Real-Time GraphQL Subscriptions
After showing how to push new grudges through adding subscription functionality to the Grudges demo application, Steve reviews GraphQL Resolvers as the place to customize control over how to format data before it goes into the database.
Other AWS Services
Wrapping up the course, Steve takes questions from students and reviews services used in the course as well as other services provided by AWS that make front-end development easier.