Full stack serverless : modern application development with React, AWS, and GraphQL

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 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 Cloud computing is typically associated with backend development and DevOps. But with the rise of serverless technologies and a new generation of services and frameworks, frontend and mobile developers can build robust applications with production-ready features such as authentication and authorization, API gateways, chatbots, augmented reality scenes, and more. This hands-on guide shows you how.Nader Dabit, developer advocate at Amazon Web Services, guides you through the process of building full stack applications using React, AWS, GraphQL, and AWS Amplify. You'll learn how to create and incorporate services into your client applications while learning general best practices, deployment strategies, rich media management, and continuous integration and delivery along the way.Learn how to build serverless applications that solve real problemsUnderstand what is (and isn't) possible when using these technologiesCreate a GraphQL API that interacts with DynamoDB and a NoSQL databaseExamine how authentication works—and learn the difference between authentication and authorizationGet an in-depth view of how serverless functions work and why they're importantBuild full stack applications on AWS and create offline apps with Amplify DataStore