Serving Dynamic HTML via API Gateway Example

This example illustrates how to hookup an API Gateway endpoint to a Lambda function to render HTML on a GET request.

Use-cases

Landing pages for marketing activities
Single use dynamic webpages

How it works

Instead of returning the default json from a request, you can display custom dynamic HTML by setting the Content-Type header to text/html.

const response = {
  statusCode: 200,
  headers: {
    "Content-Type": "text/html",
  },
  body: html,
};
// callback will send HTML back
callback(null, response);

Deploy

In order to deploy the endpoint simply run

serverless deploy

The expected result should be similar to:

Deploying serve-dynamic-html-via-http to stage dev (us-east-1)

✔ Service deployed to stack serve-dynamic-html-via-http-dev (113s)

endpoint: GET - https://XXXXXXXXXXX.execute-api.us-east-1.amazonaws.com/landing-page
functions:
  landingPage: serve-dynamic-html-via-http-dev-landingPage (466 B)

Usage

You can now send an HTTP request directly to the endpoint using a tool like curl

curl https://XXXXXXXXXXX.execute-api.us-east-1.amazonaws.com/dev/landing-page?name=Nik%20Graf

The expected result should be similar to:

<html>
  <style>
    h1 { color: #73757d; }
  </style>
  <body>
    <h1>Landing Page</h1>
    <p>Hey Nik Graf!</p>
  </body>
</html>%

Of course you can visit the URL in your browser and this is how it should look like:

Screenshot without a name

To greet a specific person, provide the query parameter with the name of that person e.g. ?name=Nik%20Graf. The response should now contain the provided name:

Screenshot with a name

Scaling