Serverless and React on AWS

Build a full-stack production ready note taking app using Serverless and React on AWS (Lambda, IAM, S3, Cognito, API Gateway, DynamoDB, Route 53, CloudFront, Certificate Manager, Amazon CloudWatch). Follow me step-by-step open-source tutorials with screenshots and code samples. The source is taken from several websites and serverless-stack site.

Part I - The Basics

Table of Contents

• INTRODUCTION
  • What is Serverless
  • Why Create Serverless Apps?
• SET UP YOUR AWS ACCOUNT
  • Create an AWS Account
  • Create an IAM User
    • What is IAM
    • What is an ARN
  • Configure the AWS CLI
• SETTING UP THE SERVERLESS BACKEND
  • Create a DynamoDB table
  • Create an S3 bucket for file uploads
  • Create a Cognito user pool
    • Create a Cognito test user
  • Set up the Serverless Framework
    • Add support for ES6/ES7 JavaScript
• BUILDING A SERVERLESS REST API
  • Add a create note API
  • Add a get note API
  • Add a list all the notes API
  • Add an update note API
  • Add a delete note API
• DEPLOYING THE BACKEND
  • Deploy the APIs
  • Create a Cognito identity pool
    • Cognito user pool vs identity pool
  • Test the APIs
• SETTING UP A REACT APP
  • Create a new React.js app
    • Add app favicons
    • Set up custom fonts
    • Set up Bootstrap
  • Handle routes with React Router
    • Create containers
    • Adding links in the navbar
    • Handle 404s
  • Configure AWS Amplify
• BUILDING A REACT APP
  • Create a login page
    • Login with AWS Cognito
    • Add the session to the state
    • Load the state from the session
    • Clear the session on logout
    • Redirect on login and logout
    • Give feedback while logging in
  • Create a signup page
    • Create the signup form
    • Signup with AWS Cognito
  • Add the create note page
    • Call the create API
    • Upload a file to S3
  • List all the notes
    • Call the list API
  • Display a note
    • Render the note form
    • Save changes to a note
    • Delete a note
  • Set up secure pages
    • Create a route that redirects
    • Use the redirect routes
    • Redirect on login
• DEPLOYING A REACT APP ON AWS
  • Deploy the Frontend
    • Create an S3 bucket
    • Deploy to S3
    • Create a CloudFront distribution
    • Set up your domain with CloudFront
    • Set up www domain redirect
    • Set up SSL
  • Deploy updates
    • Update the app
    • Deploy again

Part II - Automation

• INTRODUCTION
  • Getting production ready
• INFRASTRUCTURE AS CODE
  • What is Infrastructure as Code?
    • Configure DynamoDB in Serverless
    • Configure S3 in Serverless
    • Configure Cognito User Pool in Serverless
    • Configure Cognito Identity Pool in Serverless
  • Use environment variables in Lambda functions
  • Deploy your serverless infrastructure
• ADDING A STRIPE BILLING API
  • Working with 3rd party APIs
    • Setup a Stripe account
    • Add a billing API
    • Load secrets from env.yml
  • Test the billing API
• ADDING UNIT TESTS
  • Unit tests in Serverless
• AUTOMATING SERVERLESS DEPLOYMENTS
  • Automating serverless deployments
    • Setting up your project on Seed
    • Configure secrets in Seed
    • Deploying through Seed
    • Set custom domains through Seed
  • Test the configured APIs
  • Monitoring deployments in Seed
• ADDING A BILLING FORM
  • Create a settings page
    • Add Stripe keys to config
    • Create a billing form
    • Connect the billing form
• AUTOMATING REACT APP DEPLOYMENTS
  • Automating React Deployments
    • Create a build script
    • Setting up your project on Netlify
    • Custom Domains in Netlify
  • Frontend workflow
• CONCLUSION
  • Futher reading

Extra Credit

• BACKEND
  • API Gateway and Lambda Logs
  • Debugging Serverless API Issues
  • Serverless environment variables
  • Stages in Serverless Framework
  • Configure multiple AWS profiles
  • Customize the Serverless IAM Policy
  • Connect to API Gateway with IAM auth
  • Serverless Node.js Starter
• FRONTEND
  • Code Splitting in Create React App
  • Environments in Create React App