Ever wonder how to deploy your Web App that you've built with your favorite web framework? You can use UP for that!

2. Hi, I’m Riza

3. Previous Talk
AWS Lambda is amazing
The price is awesome!
slideshare.net/rizafahmi/aws-lambda-with-claudiajs
BUT...
ClaudiaJS is great

4. What if...

5. What is UP?
WhatsApp Messenger is a freeware and
cross-pla!orm instant messaging and
Voice over IP (VoIP) service.[45] The
applica"on allows the sending of text
messages and voice calls, as well as video
calls, images and other media, documents,
and user loca"on.

6. What is UP?

7. What is UP?
Up deploys infinitely scalable
serverless apps, APIs, and sta!c
websites in seconds, so you
can get back to working on
what makes your product
unique.

8. What is UP?
Up focuses on deploying "vanilla" HTTP
servers so there's nothing new to learn,
just develop with your favorite exis"ng
frameworks such as Express, Koa,
Django, Golang net/h"p or others.

9. Supported
Language

10. Benefit of UP
Routing Local Testing
Quick Iteration
Better Logs
Feels Like Home

11. Installa!on
$ curl -sf https:
//up.apex.sh/install | sh
$ npm i -g up
OR

12. Ge"ng Started
$ npm init
$ npm install express

13. Ge"ng Started
const app = require("express")();
const { PORT = 3000 } = process.env;
app.get("/", (req, res)
=> {
res.json({ status: "OK", source:
"development" });
});
app.listen(PORT);

14. Deploying to
staging
$ up
$ up url
--open

15. Deploying to
produc!on
$ up production
$ up production url
--open

16. This is too easy

17. Next Genera!on
API with GraphQL
slideshare.net/rizafahmi/graphql-story-intro-to-graphql

18. We’ll Build The
Empire
Title: Empire Strikes Back
Characters:
• Luke Skywalker
◦ Birth Year: 19BBY
◦ Gender: male
◦ Homeworld:
▪ Name: Tatooine
▪ Climate: arid
▪ Gravity: 1 standard
▪ Population: 200000
• C-3PO
◦ Birth Year: 112BBY
◦ Gender: n/a
◦ Homeworld:
▪ Name: Tatooine
▪ Climate: arid
▪ Gravity: 1 standard
▪ Population: 200000

19. Request in REST
API
1 Film 11 Characters
11 Homeworld

20. Request in
GraphQL
{
film(id: 2) {
title
characters {
name
birthYear
gender
homeworld {
name
climate
gravity
population
}
}
}
}

21. Request in
GraphQL
{
"data": {
"film": {
"title": "The Force Awakens",
"characters": [
{
"name": "Luke Skywalker",
"birthYear": "19BBY",
"gender": "male",
"homeworld": {
"name": "Tatooine",
"climate": "arid",
"gravity": "1 standard",
"population": “200000"
}
},
...
}

22. Let’s get to work $ npm install express-graphql graphql

23. GraphQL Server
const app = require("express")();
const graphqlHTTP = require("express-graphql");
const schema = require("./schema");
const { PORT = 3000 } = process.env;
app.get("/", (req, res)
=> {
res.json({ status: "OK", source: "development" });
});
app.use(
"/graphql",
graphqlHTTP({
schema,
graphiql: true
})
);
app.listen(PORT);

24. GraphQL Types
const HomeworldType = new GraphQLObjectType({
name: "homeworld",
description: "Planet instance",
fields: ()
=> ({
name: {
type: GraphQLString,
resolve: planet
=> planet.data.name
},
climate: {
type: GraphQLString,
resolve: planet
=> planet.data.climate
},
gravity: {
type: GraphQLString,
resolve: planet
=> planet.data.gravity
},
population: {
type: GraphQLString,
resolve: planet
=> planet.data.population
}
})
});

25. GraphQL Types
const CharacterType = new GraphQLObjectType({
name: "characters",
description: "
...",
fields: ()
=> ({
name: {
type: GraphQLString,
resolve: character
=> character.data.name
},
birthYear: {
type: GraphQLString,
resolve: character
=> character.data.birth_year
},
gender: {
type: GraphQLString,
resolve: character
=> character.data.gender
},
homeworld: {
type: HomeworldType,
resolve: character
=>
axios(character.data.homeworld)
}
})
});

26. GraphQL Types
const FilmType = new GraphQLObjectType({
name: "Film",
description: "
...",
fields: ()
=> ({
title: {
type: GraphQLString,
resolve: film
=> film.data.title
},
characters: {
type: new GraphQLList(CharacterType),
resolve: character
=>
Promise.all(character.data.characters.map(char
=>
axios(char)))
}
})
});

27. GraphQL Schema
module.exports = new GraphQLSchema({
query: new GraphQLObjectType({
name: "Query",
description: "
...",
fields: ()
=> ({
film: {
type: FilmType,
args: {
id: { type: GraphQLInt }
},
resolve: (root, args)
=>
axios
.get(`https:
//swapi.co/api/films/$
{args.id}`)
.then(response
=> response)
}
})
})
});

28. GraphQL Rocks!

29. Logs
$ up logs
$ up logs ‘message = “request”’
$ up logs 'method=GET duration
> 70ms’
$ up logs 'method=GET
duration > 40ms production'

30. Logs
$ up logs | cat
$ up logs 'message = "response"'
| jq -r '.fields.ip'

31. Metrics
$ up metrics
Requests: 7 ($0.00)
Duration min: 33ms
Duration avg: 493ms
Duration max: 1940ms
Duration sum: 5.981s ($0.00)
Errors 4xx: 0
Errors 5xx: 0
Invocations: 11 ($0.00)
Errors: 0

32. Delete Deployment $ up stack delete

33. And I’m done!
github.com/rizafahmi/aws-up-node-graphql
slideshare.net/rizafahmi
riza@hack!v8.com
randomscreencast.comrandomscreencastscreencast Tentang Berbagai teknologi