React + Serverless - Amazon Simple Storage Service (S3)

I'm @DavidWells Software Developer

@ previously UX/UI

@

davidwells.io

Refactor your React App into Angular 1 and then back to jQuery

lolz jk

Serverless

React + Serverless: a match made in heaven

Life Goals

Scaling servers is... hard

Love you Wes ❤ Check out all Wes's courses wesbos.com/courses

•

Load balancing

•

Security concerns

•

Monitoring

•

Logging

•

follower database instances

•

costs...

•

.......

AWS Lambda

Code that runs on-demand inside the cloud of your choice

- Pay per execution pricing - Never pay for idle servers - Auto scales for you - Event driven workflows - Leverage third party services

Code that runs on-demand inside the cloud of your choice

and auth0 webtasks, oracle functions, kubernetes, & spotInst....

use cases

use cases • • • • • • • •

REST APIs, Graph APIs: lambda -> API Gateway endpoint

event-driven workflows, scheduled tasks, data transforms

real-time/streaming, batch processing: kinesis -> lambda

web, mobile & IoT backends

form processing

authentication

devops automation

chatbots

github.com/serverless/examples

• • • • • •

file manipulation

voice apps (Alexa)

ETL workloads

image resizing

video transcoding

security audits

• • • • •

dynamic websites

web hook listeners

CRON jobs

CI/CD pipelines

log analytics

github.com/serverless/forms-service

Frontend •

Create React App

•

Hosted on Netlify

•

Using react router 4

•

State via Redux

•

Talks to API Gateway via axios

•

Auth via Auth0 github.com/serverless/forms-service

Backend •

Node backend running in AWS Lambda Functions

•

DynamoDB noSQL for database

•

Authorization via API Gateway Custom Authorizer Function

github.com/serverless/forms-service

serverless backend

watch Serverless Authentication and Authorization

http://bit.ly/aws-auth

Custom Authorizer Flow

1. Create a new auth0 client

2. Make it a SPA

3. Note the Domain & Client ID values

4. Install the auth0 Authorization extension

5. setup permissions/groups/roles

6. create a new auth0 Rule to add roles to JWT

6b. attach the users roles to the JWT on login via rule

7. plug in auth0 clientID & auth0 domain to frontend + backend frontend _config.js

backend config.prod.json

8. Deploy Backend

Take your API endpoints and plug them into the UI

8b. Add API endpoints to frontend App

9. Deploy Frontend

- Builds on github repo events (CI/CD flow) - Automatic Branch previews ⚡ - static site redirects via `_redirects` file 👌 - Handles proxied URLs - this gives us escape hatches for

dynamic pages/content - Super cheap - amazing support - 💕 them

Custom Authorizer Implementation

see code: bit.ly/auth-code

serverless.yml config file

Where to run What to run When to run

handler.js file

named export saveUser function is referenced in serverless.yml

serverless deploy in cwd

framework packages & deploys code

returns live API endpoints

Serverless Use Cases for serverless.com - Web forms - Custom APIs - Automatic thumbnail generation - New user welcome emails - Lead revisit notifications - Showing related content on blog - Site search (Algolia) - Content A/B testing - Doc feedback

github.com/serverless/site

GraphQL Backend API

REST Backend API

UI

serverless.com/framework/status

bit.ly/2Br7w1w

https://servers.lol/

github.com/serverless/examples

Search .serverless globally on github


 Thanks for listening! Questions? Slides:

Tweet @DavidWells davidwells.io