With a new generation of services and frameworks, frontend and mobile developers can use their existing skill set to build full stack applications by leveraging the cloud. Developers can build robust applications with production-ready features such as authentication, APIs, data layers, machine learning, chatbots, and AR scenes more easily than ever by taking advantage of these new serverless and cloud technologies. This practical guide explains how.
Nader Dabit, developer advocate at Amazon Web Services, shows developers how to build full stack applications using React, AWS, GraphQL, and the Amplify Framework. You’ll learn how to create and incorporate services into your client applications while exploring general best practices, deployment strategies, continuous integration and delivery, and rich media management along the way.
• Learn how to build applications that solve real problems
• Understand what is (and is not) possible when using these technologies
• Examine how authentication works—and learn the difference between authentication and authorization
• Discover how serverless functions work and why they’re important
• Use GraphQL in your application—and learn why it’s important
• Learn how to build full stack applications on AWS
Author(s): Nader Dabit
Edition: 1
Publisher: O'Reilly Media
Year: 2020
Language: English
Commentary: Vector PDF
Pages: 184
City: Sebastopol, CA
Tags: Amazon Web Services; Web Applications; Deployment; GraphQL; React; Serverless Applications; AWS Simple Storage Service; Full-Stack Development; AWS Amplify CLI; Amazon Cognito; AWS AppSync
Copyright
Table of Contents
Preface
Why I Wrote This Book
Who This Book Is For
How This Book Is Organized
Conventions Used in This Book
Using Code Examples
O’Reilly Online Learning
How to Contact Us
Acknowledgments
Chapter 1. Full Stack Development in the Era of Serverless Computing
Modern Serverless Philosophy
Characteristics of a Serverless Application
Benefits of a Serverless Architecture
Different Implementations of Serverless
Introduction to AWS
About AWS
Full Stack Serverless on AWS
Amplify CLI
Introduction to the AWS Amplify CLI
Installing and Configuring the Amplify CLI
Initializing Your First Amplify Project
Creating and Deploying Your First Service
Deleting the Resources
Summary
Chapter 2. Getting Started with AWS Amplify
Creating and Deploying a Serverless Function
Creating the React Application and Installing the Dependencies
Creating a New Serverless Function with the Amplify CLI
Walking Through the Code
Creating the /coins Route
Adding the API
Creating a New API
Deploying the API and the Lambda Function
Interacting with the New API
Configuring the Client App to Work with Amplify
The Amplify Client API Category
Calling the API and Rendering the Data in React
Updating the Function to Call Another API
Installing Axios
Updating the Function
Updating the Client App
Summary
Chapter 3. Creating Your First App
Introduction to GraphQL
What Is GraphQL?
What Makes Up a GraphQL API?
GraphQL Operations
Creating the GraphQL API
Viewing and Interacting with the GraphQL API
Building the React Application
Listing Notes (GraphQL Query)
Creating Notes (GraphQL Mutation)
Deleting Notes (GraphQL Mutation)
Updating Notes (GraphQL Mutation)
Real-Time Data (GraphQL Subscriptions)
Summary
Chapter 4. Introduction to Authentication
Introduction to Amazon Cognito
How Amazon Cognito Works
Amazon Cognito Integration with AWS Amplify
Creating the React App and Adding Amplify
Client Authentication Overview
Building the App
Creating the File and Folder Structure
Creating the First Component
Public Component
Nav Component
Protected Component
Router Component
Profile Component
Styling the UI Components
Configuring the App
Testing the App
Summary
Chapter 5. Custom Authentication Strategies
Creating the protectedRoute Hook
Creating the Form
SignIn Component
SignUp Component
ConfirmSignUp Component
ForgotPassword Component
ForgotPasswordSubmit Component
Completing Form.js
updateForm Helper Function
renderForm Function
Form Type Toggles
Updating the Profile Component
Testing the App
Summary
Chapter 6. Serverless Functions In-Depth: Part 1
Event Sources and Data Structure
API Gateway Event
Amazon S3 Event
Amazon Cognito Event
IAM Permissions and Trigger Configuration
Creating the Base Project
Adding a Post-Confirmation Lambda Trigger
Dynamic Image Resizing with AWS Lambda and Amazon S3
Adding the Custom Logic for Resizing the Image
Uploading Images from the React Application
Summary
Chapter 7. Serverless Functions In-Depth: Part 2
What We’ll Build
Getting Started
Adding Authentication and Group Privileges
Adding the Database
Adding the API
Creating the Frontend
Container Component
checkUser Function
Nav Component
Profile Component
Router Component
Admin Component
Main Component
Testing It Out
Summary
Chapter 8. AWS AppSync In-Depth
Building Skills for GraphQL, AppSync API, and React Router
Relationships Between GraphQL Types
Multiple Authentication Types
Authorization
Custom Data Access Patterns Using GSIs
Starting to Build the App
Creating the Amplify App and Adding the Features
Building the Backend
Authentication
The AppSync API
Deploying the Services
Building the Frontend
Container
Footer
Nav
Admin
Router
Performance
Home
Summary
Chapter 9. Building Offline Apps with Amplify DataStore
About Amplify DataStore
Amplify DataStore Overview
Amplify DataStore Operations
DataStore Predicates
Building an Offline and Real-Time App with Amplify DataStore
Creating the Base Project
Creating the API
Writing the Client-Side Code
Testing the Offline Functionality
Testing the Real-Time Functionality
Summary
Chapter 10. Working with Images and Storage
Using Amazon S3
Creating the Base Project
Adding Authentication
Creating the API
Writing the Client-Side Code
Summary
Chapter 11. Hosting: Deploying Your Application to the Amplify Console with CI and CD
CLI-Based Deployments
Git-Based Deployments
Creating the GitHub Repository
Git-Based CI/CD
Access Control
Custom Domains
Summary
Index
About the Author
Colophon
