Rapid Development on AWS: React, Node.js & GraphQL
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
IntroductionAfter 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 RoleSteve walks through setting up your AWS account with a subuser to work with Amazon MobileHub.
Mobile Hub & Amplify
AWS Mobile Hub, Amplify, and AppSync OverviewSteve 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 ReviewSteve 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 SetupSteve leverages AWS Mobile Hub to configure a backend authentication service.
Adding Authentication to ReactSteve uses AWS Amplify to add a login page.
AWS Console SettingsAfter 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 ReactSteve wraps the Application component with Amplify's withAuthenticator component.
Adding a Database with Mobile HubTo 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 HubSteve uses the cloud-api feature within AWS Mobile Hub CLI to create an API.
Saving React State to the Cloud APISteve implements the ability to get all of the "grudges" from the database as well as creating a new "grudge."
Publishing Your ApplicationSteve demonstrates how to publish the new application onto the web.
API and Auth ModulesSteve reviews a few Auth and API methods provided by AWS Amplify.
Storage API OverviewSteve 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 ReviewSteve 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 AmplifySteve demonstrates how to upload assets to an S3 bucket using the AWS Amplify's Storage API.
Display Storage API Files in ReactSteve walks through how to display images from an S3 bucket with the Storage API.
Creating an S3 Image ComponentSince 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 PrivateSteve reviews an approach to use authentication within the application for users to upload their own, private images.
AppSync OverviewSteve 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 OverviewSteve covers the basics of GraphQL and the requisite knowledge for working with AppSync.
Creating a Schema & DatabaseSteve tours the AppSync console, creates a simple schema, and automatically provisions databases based on that schema.
GraphQL QueriesAfter creating a DynamoDB table from a GraphQL type, Steve demonstrates writing and testing GraphQL queries.
Adding AppSync to ReactSteve 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 ReactSteve implements the features for creating a grudge and listing all the grudges from GraphQL.
Real-Time GraphQL SubscriptionsAfter 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 ServicesWrapping 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.