@ previously UX/UI @ davidwells.io Refactor your React App into - - PowerPoint PPT Presentation

▶

Nov 13, 2023 341 likes •831 views

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

SLIDE 1

SLIDE 2

I'm @DavidWells Software Developer

previously UX/UI

davidwells.io

SLIDE 3

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

SLIDE 4

lolz jk

SLIDE 5

Serverless

SLIDE 6

React + Serverless: a match made in heaven

SLIDE 7

Life Goals

SLIDE 8

Scaling servers is... hard

SLIDE 9

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

SLIDE 10

Load balancing
Security concerns
Monitoring
Logging
follower database instances
costs...
.......

SLIDE 11

SLIDE 12

AWS Lambda

SLIDE 13

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

SLIDE 14

Code that runs on-demand inside the cloud of your choice and auth0 webtasks, oracle functions, kubernetes, & spotInst....

SLIDE 15

use cases

SLIDE 16

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
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/examples

SLIDE 17

github.com/serverless/forms-service

SLIDE 18

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

SLIDE 19

Backend

Node backend running in AWS Lambda Functions
DynamoDB noSQL for database
Authorization via API Gateway Custom Authorizer Function

github.com/serverless/forms-service

SLIDE 20

serverless backend

SLIDE 21

watch Serverless Authentication and Authorization

http://bit.ly/aws-auth

SLIDE 22

Custom Authorizer Flow

SLIDE 23

SLIDE 24

1. Create a new auth0 client

SLIDE 25

2. Make it a SPA

SLIDE 26

3. Note the Domain & Client ID values

SLIDE 27

4. Install the auth0 Authorization extension

SLIDE 28

5. setup permissions/groups/roles

SLIDE 29

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

SLIDE 30

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

SLIDE 31

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

backend config.prod.json frontend _config.js

SLIDE 32

8. Deploy Backend

Take your API endpoints and plug them into the UI

SLIDE 33

8b. Add API endpoints to frontend App

SLIDE 34

9. Deploy Frontend

SLIDE 35

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

SLIDE 36

Custom Authorizer Implementation bit.ly/auth-code see code:

SLIDE 37

Where to run

serverless.yml config file

When to run What to run

SLIDE 38

named export saveUser function is referenced in serverless.yml

handler.js file

SLIDE 39

serverless deploy in cwd framework packages & deploys code returns live API endpoints

SLIDE 40

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

Serverless Use Cases for serverless.com

github.com/serverless/site

SLIDE 41

GraphQL Backend API

SLIDE 42

UI REST Backend API serverless.com/framework/status

SLIDE 43

bit.ly/2Br7w1w

SLIDE 44

https://servers.lol/

SLIDE 45

github.com/serverless/examples

SLIDE 46

Search .serverless globally on github

SLIDE 47

  Thanks for listening! Questions? Slides: Tweet @DavidWells davidwells.io