AWS AppSync & Amplify with React & GraphQL – Complete Guide

AWS AppSync & Amplify with React & GraphQL – Complete Guide

English | MP4 | AVC 1280×720 | AAC 44KHz 2ch | 102 lectures (11h 55m) | 3.73 GB

Deploy a Serverless GraphQL & Next JS based Javascript application in the AWS Cloud using AWS AppSync and AWS Amplify

Have you ever wondered how to create a production-ready backend API in AWS?

On top of it, what if it was all serverless and powered by GraphQL?

What if it could scale to millions of requests?

What if it was… easy!?

AWS AppSync & AWS Amplify is the BEST way to get started with deploying GraphQL based applications in the AWS Cloud, all without deploying any servers, that are infinitely scalable. Welcome to the great world of Serverless computing!

This course is fully hands-on, in which you’ll get the chance to practice and learn:

GraphQL crash-course

How to deploy GraphQL based backends in AWS

How to develop your next-gen web application using the AWS Amplify framework & AWS AppSync

You will see how you can quickly build a secure, scalable, functional, and real-time application in no time!

What you’ll learn

  • Develop a production-ready serverless backend API powered by AWS AppSync and GraphQL that scales to MILLIONS of requests
  • Deploy a fully functional blogging application using the AWS Amplify framework (with comments and likes features!)
  • Learn how to develop Real-Time Subscriptions with AWS AppSync for real-time scalable updates for your web applications
  • Learn GraphQL, and how managed GraphQL works in AWS with AWS AppSync
Table of Contents

Introduction
1 Instructor Introduction
2 What You Will Build in this Course
3 What You’ll Learn in this Course
4 Course Structure

Download Course Source Code and Resources
5 Download Course Source Code

What’s AWS AppSync and Amplify
6 What’s AppSync
7 What’s AWS Amplify CLI

Development Environment Setup
8 Installing Development Tools
9 VSCode Basics
10 Creating Your AWS Account
11 Installing and Configuring AWS Amplify CLI
12 Resources

[OPTIONAL] Getting Started with GraphQL
13 Setting up our First GraphQL Project
14 Importing Express and GraphQL
15 Install GraphQL and Express
16 Creating and Understanding Schemas
17 The RoodQuery and Running Queries on Graphical
18 The Resolve Method – Returning Data
19 Adding a Hobby Type and RootQuery
20 Adding the Post Type
21 Adding Relationships Between Types
22 Showing Users Relationships
23 User Type Relationship to Hobby
24 Posts Query
25 Hobbies Query

[OPTIONAL GraphQL] – Core Concepts – Mutations
26 Introduction to Mutations
27 Creating a User with Mutations
28 Creating a Post with Mutations
29 Creating a Hobby with Mutations
30 Adding a Post Query
31 Post and Hobby Queries

[OPTIONAL GraphQL] – Types
32 Understanding Graphical Scalar Types
33 Non Nullables Types
34 Scalar Types and Object Types

[OPTIONAL GraphQL] – Connecting to an External Database – MongoDB- Atlas
35 MongoDB vs Relational Databases
36 Creating a MongoDB Atlas Account
37 Setting up Project to Connect to MongoDB Atlas
38 Create a User Model – Mongoose Model
39 Create a Hobby and Post Models
40 Save a User & a Post
41 Save a Hobby
42 Getting Users and Hobbies and Posts
43 Cors and Adding NonNulls to Required Fields
44 Finish Adding NonNulls to Other fields

[OPTIONAL GraphQL] – More Mutations
45 Updating a User Type
46 Updating a Post
47 Updating a Hobby
48 Remove a User
49 Remove Post and Hobby

[OPTIONAL] Deploying the GraphQL Project to Heroku
50 Introduction – Publishing the API to Heroku
51 Deploying our API to Heroku Remote Server
52 The GraphQL Playground

The AppSync API Console
53 AWS AppSync API Console – Create a GraphQL API – Query and Mutations
54 AppSync API Console – Update and Delete
55 AWS AppSync API Console – Resolvers Overview
56 System Architecture Overview –
57 Final thoughts on AWS AppSync API Console

Building a Blog App with Amplify CLI, AppSync and NextJS
58 Blog App Demo
59 Creating the NextJS App
60 NextJS Hot Reload
61 Setting up Styling with TailwindCSS
62 Setting up Amplify in Project
63 Setting up our API with Amplify CLI – Amplify init
64 Setting up the AWS-Exports Config File
65 Interacting with the GraphQL AppSync API – Retrieve Posts and Showing them

NavBar and Amazon Cognito Authentication
66 Setting up the NavBar
67 Adding Authentication and Check for Signedin Users
68 Setting up the Profile and Signin Pages
69 Adding the SignOut Button
70 Adding the Root CSS colors
71 Adding Public and Private API Access – Cognito

Posting and Showing Data
72 Setting up Create Post Page – Part 1
73 Posting data from the App – Part 2
74 Dynamic ID and showing the Newly Created Post
75 Adding some Markup and Styling to Index Route
76 Creating My Posts Page
77 Adding Styling to MyPosts Page

Editing and Deleting Users and Posts
78 Delete Post
79 Update Post – Part 1
80 Editing a Post
81 What We’ve Done so Far

Adding a Post Image to Amazon S3
82 Setting up POst Image to S3 – Part 1
83 Saving Image to S3
84 Showing Image when In the Detail View
85 Showing Posts with Images in Main Page
86 CHALLENGE Show Images in MyPosts Page
87 SOLUTION Show Images in MyPosts Page
88 Updating a Post with Image
89 Section Summary

Creating Comments – Table Relationships
90 Table Relationship & Setting up and Creating Comments in Console
91 Setup Comment in Posts Details
92 Creating a Comment in the Post View and Saving to Database
93 Showing Comments in Main Page
94 Section Summary
95 Resources

Amplify Important Commands
96 Amplify Useful Commands
97 Amplify Commands (CLI)

AWS Hosting – Hosting our App in AWS Hosting
98 Preparing the App and Deploying to Amazon Hosting
99 Fixing the Create Comment Issue
100 Fixing Deployment Issues

AppSync Subscriptions
101 Implementing Subscriptions

Next Steps
102 Next Steps

Homepage