Return HTML

Build an HTML page inside a function and return it with the correct content-type header, without rendering it on an origin server.

Last updated

View as Markdown Agent setup

Generate a complete HTML page from a string and return it directly from a function. Use this pattern for lightweight pages, landing screens, or maintenance notices that do not need to be rendered on an origin server.

JavaScript
01 const html = `<!DOCTYPE html>
02 <body>
03 <h1>Hello World</h1>
04 <p>This markup was generated by Azion - Functions.</p>
05 </body>`
06
07 async function handleRequest(request) {
08 return new Response(html, {
09 headers: {
10 "content-type": "text/html;charset=UTF-8",
11 },
12 })
13 }
14
15 addEventListener("fetch", event => {
16 return event.respondWith(handleRequest(event.request))
17 })

How it works

The markup is stored in a template literal assigned to the html constant, so the whole page lives inside the function. When the fetch event fires, handleRequest builds a new Response with that string as the body and sets the content-type header to text/html;charset=UTF-8, which tells the browser to render the payload as a web page instead of plain text. event.respondWith() then returns the page to the client, with no request to an origin.

The content-type header is the part that matters most here. Without it, the browser has no instruction to render the body as a page, so keep it set whenever a function returns HTML.

JavaScript examples

Browse the rest of the snippets in this collection.

FetchEvent

Read the reference for the event this handler listens to, including respondWith().

Response

Check the status, headers, and body options the constructor accepts.

How Functions works

See what has to exist before a function runs on a request.

Functions limits

The ceilings a single invocation of this function runs inside, and the ones that vary by plan.

Query usage data from Functions

Read back the compute time and the invocations this function has consumed.