(2022-02-02) Open source guide to building full-stack apps using Serverless and React

Open source guide to building full-stack apps using Serverless and React (Serverless Stack) https://branchv125--serverless-stack.netlify.app/

February 2, 2022 - v7.1

Who Is This Guide For?

This guide is meant for full-stack developers or developers that would like to build full stack serverless applications

We are also catering this solely towards JavaScript developers for now

What Does This Guide Cover?

To step through the major concepts involved in building web applications, we are going to be building a simple note taking app called Scratch.

The demo app is a single page application powered by a serverless API written completely in JavaScript

address the following requirements

We’ll be using the AWS Platform to build it

We’ll be using the following set of technologies and services to build our serverless application.

• Lambda & API Gateway for our serverless API
• DynamoDB for our database
• Cognito for user authentication and securing our APIs
• S3 for hosting our app and file uploads
• CloudFront for serving out our app

The main part of the guide uses SST. But we also cover building the same app using Serverless Framework.

Introduction

What is Serverless?

Serverless computing (or serverless for short), is an execution model where the cloud provider (AWS, Azure, or Google Cloud) is responsible for executing a piece of code by dynamically allocating the resources. And only charging for the amount of resources used to run the code. The code is typically run inside stateless containers that can be triggered by a variety of events including http requests, database events, queuing services, monitoring alerts, file uploads, scheduled events (cron jobs), etc. The code that is sent to the cloud provider for execution is usually in the form of a function. Hence serverless is sometimes referred to as “Functions as a Service” or “FaaS”.

The biggest change that we are faced with while transitioning to a serverless world is that our application needs to be architectured in the form of functions. You might be used to deploying your application as a single Rails or Express monolith app. But in the serverless world you are typically required to adopt a more microservice based architecture

Your functions are typically run inside secure (almost) stateless containers

You have to effectively assume that your function is invoked in a new container every single time

Since your functions are run inside a container that is brought up on demand to respond to an event, there is some latency associated with it. This is referred to as a Cold Start

What is AWS Lambda?

The execution duration means that your Lambda function can run for a maximum of 900 seconds or 15 minutes. This means that Lambda isn’t meant for long running processes

Lambda functions need to be packaged and sent to AWS. This is usually a process of compressing the function and all its dependencies and uploading it to an S3 bucket.

To help us with this process we use the Serverless Stack Framework (SST).

The above execution model makes Lambda functions effectively stateless. This means that every time your Lambda function is triggered by an event it is invoked in a completely new environment. You don’t have access to the execution context of the previous event.

Why Create Serverless Apps?

The biggest benefit by far is that you only need to worry about your code and nothing else. The low maintenance is a result of not having any servers to manage

the ease of scaling is thanks in part to DynamoDB which gives us near infinite scale and Lambda that simply scales up to meet the demand.

Set up your AWS account

Create an AWS Account

Create an IAM User

Configure the AWS CLI

Setting up an SST app

What is SST?

Since these services run on AWS, it can be tricky to test and debug them locally. And a big part of building serverless applications, is being able to define our infrastructure as code. This means that we want our infrastructure to be created programmatically. We don’t want to have to click through the AWS Console to create our infrastructure.

To solve these issues we created the Serverless Stack Framework (SST).

What Is Infrastructure as Code

Serverless Stack Framework (SST) converts your infrastructure code into a CloudFormation template. This is a description of the infrastructure that you are trying to configure as a part of your serverless project. In our case we’ll be describing Lambda functions, API Gateway endpoints, DynamoDB tables, S3 buckets, etc

AWS CloudFormation

Problems with CloudFormation

Introducing AWS CDK

What is AWS CDK

CDK and SST

Create an SST app

Initialize a GitHub Repo

Create your AWS resources

Create a DynamoDB Table in SST

Create an S3 Bucket in SST

Building a serverless API

Review Our App Architecture

Add an API to Create a Note

Add an API to Get a Note

Add an API to List All the Notes

Add an API to Update a Note

Add an API to Delete a Note

Users and authentication

Public API Architecture

To allow users to sign up for our notes app and to secure our infrastructure, we’ll be moving to an architecture that looks something like this.

Working with secrets

Serverless unit tests

CORS in serverless

Setting up a React app

Routes in React

Adding auth to a React app

Building a React app

Securing React pages

Using Custom Domains

Automating serverless deployments

Monitoring and debugging

Conclusion

Best Practices for Building Serverless Apps

Organize a serverless app

Manage environments

Development lifecycle

Observability

Setting up a serverless app

*Setting up a serverless app *