Serverless Stack is an open source guide for building and deploying full-stack apps using Serverless and React on AWS. Create a note taking app from scratch using the Serverless Framework and Create React App. Follow our step-by-step tutorials with screenshots and code samples. And use our GitHub Issues if you have any questions.

Tired of reading blog posts to build your full-stack 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 deploying your app on 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?
• 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

Building a React App

• 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
  • Connect to API Gateway with IAM auth
  • 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 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

Extra Credit

• Code Splitting in Create React App

Conclusion

• Wrapping up
• Giving back
• Staying up to date

---

Tools

• Serverless ES7 Service