Serverless Stack is a free comprehensive guide to creating full-stack serverless React.js applications. Create a note taking app from scratch using React.js, AWS Lambda, API Gateway, DynamoDB, and Cognito. Follow our step-by-step backend Serverless tutorial & frontend React.js tutorial.

Tired of reading multiple blog posts to create your serverless app?

Our comprehensive tutorials include

• Step-by-step instructions with screenshots for setting up your AWS services
• Build a REST API backend with our Serverless tutorial
• Easy to understand explanations for creating a single-page application with our React.js tutorial
• Over 50 tutorials that take you all the way from creating your AWS account to setting up your app with your own domain
• Complete code samples hosted on GitHub for both the backend and frontend
• Up to date info thanks to contributions from the community
• Chat and comments on GitHub to answer your questions
• And it’s all free!

Here is what folks are saying about us

• I just completed your tutorial on the Serverless stack, and it was fantastic. It was carefully thought out, well-written, and incredibly thorough. You guys rock!

  ‒ Chris Deery, Architect at QuickBase

• This is the best and most comprehensive fullstack serverless tutorial available. Take the time to go through every step, you will learn a ton!

  ‒ Marcus Molchany, Engineer at Fullscreen

• A really comprehensive yet simple tutorial on creating serverless React apps. Covers key concepts in a way that even beginners can easily follow.

  ‒ Zhiyan Feng, Full-Stack Engineer at Shyft

Table of Contents

Introduction

• Who is this guide for?
• What does this guide cover?
• How to get help?
• 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 Backend

• Create a DynamoDB table
• Create an S3 bucket for file uploads
• Create a Cognito user pool
  • Create a Cognito test user
• Create a Cognito identity pool
  • Cognito user pool vs identity pool
• Set up the Serverless Framework
  • Add support for ES6/ES7 JavaScript

Building the Backend

• 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

Setting up the Frontend

• 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

Building the Frontend

• Create a login page
  • Login with AWS Cognito
  • Add the user token 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
  • Clear AWS Credentials Cache
• 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 the Frontend

• 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

Extra Credit

• Code Splitting in Create React App

Conclusion

• Wrapping up
• Giving back

---

Tools

• Serverless ES7 Service