Serverless and React

Serverless and React
(It's Just Sleight Of Hand)
Photo by Alex Block
Marina Miranovich
@obnoxious_mari

Nice to meet you!
3
Solution Architect in

Agenda
Part 1. Exposition
Part 2. Main story
Part 3. Resolution
4

Services I used
S3 Assets storage
IAM Manages access rights
API Gateway URL for the site
CloudFormation Deployment
AWS Lambda
6

7
Important!
I highly encourage you to attempt all demos yourself at home.*
And it’s
free!
7

https://github.com/Marina-Miranovich/lambda-react
http://bit.ly/react-lambda
11

How it works?
http://foo.com GET foo.com/
Lambda renders
the page
API Gateway
triggers Lambda
GET bundle.js
S3: Bundle.js,
main.css, fonst,
etc.
User
Browser
13

lambda-react
├── README.md
├── config
├── package.json
├── public
├── scripts
├── serverless.yml
├── src
└── yarn.lock
Project structure
config
package.json
serverless.yml
src
14

Project structure
lambda-react
├── README.md
├── config
├── public
├── scripts
├── src
└── yarn.lock
config
├── env.js
├── jest
├── paths.js
├── polyfills.js
├── webpack.config.dev.js
├── webpack.config.lambda.js
├── webpack.config.prod.js
└── webpackDevServer.config.js
webpack.config.lambda.js
15

Lambda Webpack config
1 module.exports = {
2 entry: slsw.lib.entries,
3 target: 'node',
4 module: {
5 loaders: [
6 { test: /.js$/, loaders: ['babel-loader'], include: path.resolve(__dirname, '../src'), exclude:
/node_modules/ },
7 { test: /.css$/, loaders: ['node-style-loader','css-loader?importLoaders=1'], exclude: /node_modules/ },
8 { test: [/.png$/, /.jpg$/], loader: 'url-loader', options: { limit: 10000, mimetype: 'image/png' } }
9 ],
10 },
11 output: {
12 libraryTarget: 'commonjs',
13 path: path.join(__dirname, '../.webpack'),
14 filename: '[name].js',
15 },
16 };
target: 'node',
entry: slsw.lib.entries,
libraryTarget: 'commonjs',
16

Project structure
lambda-react
├── README.md
├── config
├── public
├── scripts
├── src
└── yarn.lock
config
package.json
serverless.yml
src
17

package.json
1 {
2 "name": "lambda-react-demo",
3 "version": "1.0.0",
4 "scripts": {
5 "start": "node scripts/start.js",
6 "build": "node scripts/build.js",
7 "lambda": "sls offline --port 8000 start",
8 "deploy:lambda": "sls deploy"
9 },
10 "dependencies": {
...
"lambda": "sls offline --port 8000 start"
"deploy:lambda": "sls deploy"
18

Project structure
lambda-react
├── README.md
├── config
├── public
├── scripts
├── src
└── yarn.lock
19

serverless.yml
1 service:
2 name: lambda-react-demo
3 plugins:
4 - serverless-webpack
5 - serverless-offline
6 provider:
7 name: aws
8 runtime: nodejs6.10
9 functions:
10 renderPage:
11 handler: src/lambda/handler.renderPage
12 events:
13 - http:
14 method: GET
15 path: /
16 custom:
17 webpack: "./config/webpack.config.lambda.js"
handler: src/lambda/handler.renderPage
webpack: "./config/webpack.config.lambda.js"20

Project structure
lambda-react
├── README.md
├── config
├── public
├── scripts
├── src
└── yarn.lock
config
package.json
serverless.yml
src
21

Project structure
lambda-react
├── README.md
├── config
├── public
├── scripts
├── src
└── yarn.lock
src
├── actions
├── apis
├── components
├── index.css
├── index.js
├── lambda
├── reducers
└── sagas
lambda
22

Project structure
lambda-react
├── README.md
├── config
├── public
├── scripts
├── src
│ ├── actions
│ ├── apis
│ ├── components
│ ├── index.css
│ ├── index.js
│ ├── lambda
│ ├── reducers
│ └── sagas
└── yarn.lock
lambda
├── handler.js
└── renderer.jsrenderer.js
handler.js
23

Lambda handler src/lambda/handler.js
1 import render from './renderer';
2
3 const createResponse = (html) => {
4 return {
5 statusCode: 200,
6 headers: {
7 "Content-Type": "text/html; charset=utf-8"
8 },
9 body: html
10 };
11 };
12
13 export const renderPage = (event, context, cb) => {
14 render()
15 .then((html) => cb(null, createResponse(html)))
16 .catch(e => cb(e));
17 };
14 render()
16 .catch(e => cb(e));.catch(e => cb(e));
createResponse(html)
24

2
4 return {
5 statusCode: 200,
6 headers: {
8 },
9 body: html
10 };
11 };
12
14 render()
17 };
statusCode: 200,
"Content-Type": "text/html; charset=utf-8"
25

2
4 return {
5 statusCode: 200,
6 headers: {
8 },
9 body: html
10 };
11 };
12
14 render()
17 };
14 render()
render()
26

Project structure
lambda-react
├── README.md
├── config
├── public
├── scripts
├── src
│ ├── actions
│ ├── apis
│ ├── components
│ ├── index.css
│ ├── index.js
│ ├── lambda
│ ├── reducers
│ └── sagas
└── yarn.lock
lambda
├── handler.js
└── renderer.jsrenderer.js
handler.js
27

Inside src/lambda/renderer.js
1. Isomorphic application
2828

2. Error handling
2929

Error handling src/lambda/renderer.js
1 const render = () => {
2 return new Promise((resolve, reject) => {
30

2. Error handling
3. Local environment vs. AWS
3131

JS Bundle src/lambda/renderer.js
const bundleUrl = process.env.NODE_ENV === 'AWS' ?
AWS_URL : LOCAL_URL;
...
<script type="text/javascript" src="${bundleUrl}"></script>
32

JS Bundle serverless.yml
...
1 functions:
2 renderPage:
3 handler: src/lambda/handler.renderPage
4 environment:
5 NODE_ENV: "AWS"
...
NODE_ENV: "AWS"
33

Serverless: advantages and pitfalls
35

Serverless: advantages and pitfalls
https://serverless.com/blog/when-why-not-use-serverless/35

What else you can do with
cloud functions?
37
Anything
you’d
like*
36 * If it’s within cloud functions limitations

What else you can do with cloud functions?
HTTP
services
IoT Chat Bots
Image/Video
conversions
Machine
Learning
Batch Jobs
37

If not AWS
then what?
39
Google
Azure
IBM
Twillio
38

Open Source!
• Iron functions
• Fnproject
• Openfaas
• Apache OpenWhisk
• Kubeless
• Fission
• Funktion
4039

Thank you!
@obnoxious_mariMarina-Miranovich obnoxious_marie

Serverless and React

More Related Content

What's hot (20)

Similar to Serverless and React (20)

Recently uploaded (20)

Serverless and React