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

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 • file manipulation • dynamic websites backends • voice apps (Alexa) • web hook listeners • form processing • ETL workloads • CRON jobs • authentication • image resizing • CI/CD pipelines • devops automation • video transcoding • log analytics • chatbots • security audits github.com/serverless/examples

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 backend _config.js 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