Skip to content

Commit 2932121

Browse files
nikgrafnikgraf
authored
Merge pull request serverless#18 from serverless/node-serve-html
add simple dynamic html example
2 parents 47d68a0 + edef3bb commit 2932121

File tree

4 files changed

+141
-1
lines changed

4 files changed

+141
-1
lines changed

‎aws-node-serve-dynamic-html/README.md

Lines changed: 93 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,93 @@
1+
# Serving Dynamic HTML via API Gateway Example
2+
3+
This example illustrates how to hookup an API Gateway endpoint to a Lambda function to render HTML on a `GET` request.
4+
5+
## Use-cases
6+
7+
- Landing pages for marketing activities
8+
- Single use dynamic webpages
9+
10+
## How it works
11+
12+
Instead of returning the default `json` from a request, you can display custom dynamic HTML by setting the `Content-Type` header to `text/html`.
13+
14+
```js
15+
const response = {
16+
statusCode: 200,
17+
headers: {
18+
'Content-Type': 'text/html',
19+
},
20+
body: html,
21+
};
22+
// callback will send HTML back
23+
callback(null, response);
24+
```
25+
26+
## Deploy
27+
28+
In order to deploy the you endpoint simply run
29+
30+
```bash
31+
serverless deploy
32+
```
33+
34+
The expected result should be similar to:
35+
36+
```bash
37+
Serverless: Creating Stack...
38+
Serverless: Checking Stack create progress...
39+
.....
40+
Serverless: Stack create finished...
41+
Serverless: Packaging service...
42+
Serverless: Uploading CloudFormation file to S3...
43+
Serverless: Uploading service .zip file to S3 (1.01 KB)...
44+
Serverless: Updating Stack...
45+
Serverless: Checking Stack update progress...
46+
...........................
47+
Serverless: Stack update finished...
48+
49+
Service Information
50+
service: serve-dynamic-html-via-http-endpoint
51+
stage: dev
52+
region: us-east-1
53+
api keys:
54+
None
55+
endpoints:
56+
GET - https://nzkl1kas89.execute-api.us-east-1.amazonaws.com/dev/landing-page
57+
functions:
58+
serve-dynamic-html-via-http-endpoint-dev-landingPage: arn:aws:lambda:us-east-1:377024778620:function:serve-dynamic-html-via-http-endpoint-dev-landingPage
59+
```
60+
61+
## Usage
62+
63+
You can now send an HTTP request directly to the endpoint using a tool like curl
64+
65+
```bash
66+
curl https://nzkl1kas89.execute-api.us-east-1.amazonaws.com/dev/landing-page?name=Nik%20Graf
67+
```
68+
69+
The expected result should be similar to:
70+
71+
```bash
72+
<html>
73+
<style>
74+
h1 { color: #73757d; }
75+
</style>
76+
<body>
77+
<h1>Landing Page</h1>
78+
<p>Hey Nik Graf!</p>
79+
</body>
80+
</html>%
81+
```
82+
83+
Of course you can visit the URL in your browser and this is how it should look like:
84+
85+
![Screenshot without a name](https://cloud.githubusercontent.com/assets/223045/20668061/12c6db9a-b56d-11e6-911c-8396d545471a.png)
86+
87+
To greet a specific person provide attach the query parameter with the name of that person e.g. `?name=Nik%20Graf`. The response should now contain the provided name:
88+
89+
![Screenshot with a name](https://cloud.githubusercontent.com/assets/223045/20668055/0758b4cc-b56d-11e6-80ce-3e137151311f.png)
90+
91+
## Scaling
92+
93+
By default, AWS Lambda limits the total concurrent executions across all functions within a given region to 100. The default limit is a safety limit that protects you from costs due to potential runaway or recursive functions during initial development and testing. To increase this limit above the default, follow the steps in [To request a limit increase for concurrent executions](http://docs.aws.amazon.com/lambda/latest/dg/concurrent-executions.html#increase-concurrent-executions-limit).

‎aws-node-serve-dynamic-html/handler.js

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
'use strict';
2+
3+
module.exports.landingPage = (event, context, callback) => {
4+
let dynamicHtml = '<p>Hey Unknown!</p>';
5+
// check for GET params and use if available
6+
if (event.queryStringParameters && event.queryStringParameters.name) {
7+
dynamicHtml = `<p>Hey ${event.queryStringParameters.name}!</p>`;
8+
}
9+
10+
const html = `
11+
<html>
12+
<style>
13+
h1 { color: #73757d; }
14+
</style>
15+
<body>
16+
<h1>Landing Page</h1>
17+
${dynamicHtml}
18+
</body>
19+
</html>`;
20+
21+
const response = {
22+
statusCode: 200,
23+
headers: {
24+
'Content-Type': 'text/html',
25+
},
26+
body: html,
27+
};
28+
29+
// callback is sending HTML back
30+
callback(null, response);
31+
};

‎aws-node-serve-dynamic-html/serverless.yml

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
# Serving HTML through API Gateway for AWS Lambda
2+
service: serve-dynamic-html-via-http-endpoint
3+
4+
frameworkVersion: ">=1.1.0 <2.0.0"
5+
6+
provider:
7+
name: aws
8+
runtime: nodejs4.3
9+
10+
functions:
11+
landingPage:
12+
handler: handler.landingPage
13+
events:
14+
- http:
15+
method: get
16+
path: landing-page

‎aws-node-single-page-app-via-cloudfront/README.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -83,7 +83,7 @@ Serverless: Web App Domain: dyj5gf0t6nqke.cloudfront.net
8383

8484
Visit the printed domain domain and navigate on the web site. It should automatically redirect you to HTTPS and visiting <yourURL>/about will not result in an error with the status code 404, but rather serves the `index.html` and renders the about page.
8585

86-
This is how it should look like: ![ScreenShot](https://cloud.githubusercontent.com/assets/223045/20391786/287cb310-acd5-11e6-9eaf-89f641ed9e14.png)
86+
This is how it should look like: ![Screenshot](https://cloud.githubusercontent.com/assets/223045/20391786/287cb310-acd5-11e6-9eaf-89f641ed9e14.png)
8787

8888
## Further Improvements
8989

0 commit comments

Comments
 (0)
pFad - Phonifier reborn

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.

Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.


Alternative Proxies:

Alternative Proxy

pFad Proxy

pFad v3 Proxy

pFad v4 Proxy