Early Hints test page
""" class Default(WorkerEntrypoint): async def fetch(self, request): if re.search("test.css", request.url): headers = {"content-type": "text/css"} return Response(CSS, headers=headers) else: headers = {"content-type": "text/html","link": "; rel=preload; as=style"} return Response(HTML, headers=headers) ``` Explain Code TypeScript ``` import { Hono } from "hono"; const app = new Hono(); const CSS = "body { color: red; }"; const HTML = `Early Hints test page
`; // Serve CSS file app.get("/test.css", (c) => { return c.body(CSS, { headers: { "content-type": "text/css", }, }); }); // Serve HTML with early hints app.get("*", (c) => { return c.html(HTML, { headers: { link: "; rel=preload; as=style", }, }); }); export default app; ``` Explain Code ```json {"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"item":{"@id":"/directory/","name":"Directory"}},{"@type":"ListItem","position":2,"item":{"@id":"/workers/","name":"Workers"}},{"@type":"ListItem","position":3,"item":{"@id":"/workers/examples/","name":"Examples"}},{"@type":"ListItem","position":4,"item":{"@id":"/workers/examples/103-early-hints/","name":"103 Early Hints"}}]} ``` --- --- title: A/B testing with same-URL direct access description: Set up an A/B test by controlling what response is served based on cookies. This version supports passing the request through to test and control on the origin, bypassing random assignment. image: https://developers.cloudflare.com/dev-products-preview.png --- [Skip to content](#%5Ftop) ### Tags [ JavaScript ](https://developers.cloudflare.com/search/?tags=JavaScript)[ TypeScript ](https://developers.cloudflare.com/search/?tags=TypeScript)[ Python ](https://developers.cloudflare.com/search/?tags=Python) Was this helpful? YesNo [ Edit page ](https://github.com/cloudflare/cloudflare-docs/edit/production/src/content/docs/workers/examples/ab-testing.mdx) [ Report issue ](https://github.com/cloudflare/cloudflare-docs/issues/new/choose) Copy page # A/B testing with same-URL direct access **Last reviewed:** over 5 years ago Set up an A/B test by controlling what response is served based on cookies. This version supports passing the request through to test and control on the origin, bypassing random assignment. * [ JavaScript ](#tab-panel-7349) * [ TypeScript ](#tab-panel-7350) * [ Python ](#tab-panel-7351) * [ Hono ](#tab-panel-7352) JavaScript ``` const NAME = "myExampleWorkersABTest"; export default { async fetch(req) { const url = new URL(req.url); // Enable Passthrough to allow direct access to control and test routes. if (url.pathname.startsWith("/control") || url.pathname.startsWith("/test")) return fetch(req); // Determine which group this requester is in. const cookie = req.headers.get("cookie"); if (cookie && cookie.includes(`${NAME}=control`)) { url.pathname = "/control" + url.pathname; } else if (cookie && cookie.includes(`${NAME}=test`)) { url.pathname = "/test" + url.pathname; } else { // If there is no cookie, this is a new client. Choose a group and set the cookie. const group = Math.random() < 0.5 ? "test" : "control"; // 50/50 split if (group === "control") { url.pathname = "/control" + url.pathname; } else { url.pathname = "/test" + url.pathname; } // Reconstruct response to avoid immutability let res = await fetch(url); res = new Response(res.body, res); // Set cookie to enable persistent A/B sessions. res.headers.append("Set-Cookie", `${NAME}=${group}; path=/`); return res; } return fetch(url); }, }; ``` Explain Code TypeScript ``` const NAME = "myExampleWorkersABTest"; export default { async fetch(req): PromiseAPI GET without CORS Proxy
Shows TypeError: Failed to fetch since CORS is misconfiguredWaiting
API GET with CORS Proxy
Waiting
API POST with CORS Proxy + Preflight
Waiting
`;
async function handleRequest(request) {
const url = new URL(request.url);
let apiUrl = url.searchParams.get("apiurl");
if (apiUrl == null) {
apiUrl = API_URL;
}
// Rewrite request to point to API URL. This also makes the request mutable
// so you can add the correct Origin header to make the API server think
// that this request is not cross-site.
request = new Request(apiUrl, request);
request.headers.set("Origin", new URL(apiUrl).origin);
let response = await fetch(request);
// Recreate the response so you can modify the headers
response = new Response(response.body, response);
// Set CORS headers
response.headers.set("Access-Control-Allow-Origin", url.origin);
// Append to/Add Vary header so browser will cache response correctly
response.headers.append("Vary", "Origin");
return response;
}
async function handleOptions(request) {
if (
request.headers.get("Origin") !== null &&
request.headers.get("Access-Control-Request-Method") !== null &&
request.headers.get("Access-Control-Request-Headers") !== null
) {
// Handle CORS preflight requests.
return new Response(null, {
headers: {
...corsHeaders,
"Access-Control-Allow-Headers": request.headers.get(
"Access-Control-Request-Headers",
),
},
});
} else {
// Handle standard OPTIONS request.
return new Response(null, {
headers: {
Allow: "GET, HEAD, POST, OPTIONS",
},
});
}
}
const url = new URL(request.url);
if (url.pathname.startsWith(PROXY_ENDPOINT)) {
if (request.method === "OPTIONS") {
// Handle CORS preflight requests
return handleOptions(request);
} else if (
request.method === "GET" ||
request.method === "HEAD" ||
request.method === "POST"
) {
// Handle requests to the API server
return handleRequest(request);
} else {
return new Response(null, {
status: 405,
statusText: "Method Not Allowed",
});
}
} else {
return rawHtmlResponse(DEMO_PAGE);
}
},
};
```
Explain Code
TypeScript
```
export default {
async fetch(request): PromiseAPI GET without CORS Proxy
Shows TypeError: Failed to fetch since CORS is misconfiguredWaiting
API GET with CORS Proxy
Waiting
API POST with CORS Proxy + Preflight
Waiting
`;
async function handleRequest(request) {
const url = new URL(request.url);
let apiUrl = url.searchParams.get("apiurl");
if (apiUrl == null) {
apiUrl = API_URL;
}
// Rewrite request to point to API URL. This also makes the request mutable
// so you can add the correct Origin header to make the API server think
// that this request is not cross-site.
request = new Request(apiUrl, request);
request.headers.set("Origin", new URL(apiUrl).origin);
let response = await fetch(request);
// Recreate the response so you can modify the headers
response = new Response(response.body, response);
// Set CORS headers
response.headers.set("Access-Control-Allow-Origin", url.origin);
// Append to/Add Vary header so browser will cache response correctly
response.headers.append("Vary", "Origin");
return response;
}
async function handleOptions(request) {
if (
request.headers.get("Origin") !== null &&
request.headers.get("Access-Control-Request-Method") !== null &&
request.headers.get("Access-Control-Request-Headers") !== null
) {
// Handle CORS preflight requests.
return new Response(null, {
headers: {
...corsHeaders,
"Access-Control-Allow-Headers": request.headers.get(
"Access-Control-Request-Headers",
),
},
});
} else {
// Handle standard OPTIONS request.
return new Response(null, {
headers: {
Allow: "GET, HEAD, POST, OPTIONS",
},
});
}
}
const url = new URL(request.url);
if (url.pathname.startsWith(PROXY_ENDPOINT)) {
if (request.method === "OPTIONS") {
// Handle CORS preflight requests
return handleOptions(request);
} else if (
request.method === "GET" ||
request.method === "HEAD" ||
request.method === "POST"
) {
// Handle requests to the API server
return handleRequest(request);
} else {
return new Response(null, {
status: 405,
statusText: "Method Not Allowed",
});
}
} else {
return rawHtmlResponse(DEMO_PAGE);
}
},
} satisfies ExportedHandler;
```
Explain Code
TypeScript
```
import { Hono } from "hono";
import { cors } from "hono/cors";
// The URL for the remote third party API you want to fetch from
// but does not implement CORS
const API_URL = "https://examples.cloudflareworkers.com/demos/demoapi";
// The endpoint you want the CORS reverse proxy to be on
const PROXY_ENDPOINT = "/corsproxy/";
const app = new Hono();
// Demo page handler
app.get("*", async (c) => {
// Only handle non-proxy requests with this handler
if (c.req.path.startsWith(PROXY_ENDPOINT)) {
return next();
}
// Create the demo page HTML
const DEMO_PAGE = `
API GET without CORS Proxy
Shows TypeError: Failed to fetch since CORS is misconfiguredWaiting
API GET with CORS Proxy
Waiting
API POST with CORS Proxy + Preflight
Waiting
`;
return c.html(DEMO_PAGE);
});
// CORS proxy routes
app.on(["GET", "HEAD", "POST", "OPTIONS"], PROXY_ENDPOINT + "*", async (c) => {
const url = new URL(c.req.url);
// Handle OPTIONS preflight requests
if (c.req.method === "OPTIONS") {
const origin = c.req.header("Origin");
const requestMethod = c.req.header("Access-Control-Request-Method");
const requestHeaders = c.req.header("Access-Control-Request-Headers");
if (origin && requestMethod && requestHeaders) {
// Handle CORS preflight requests
return new Response(null, {
headers: {
"Access-Control-Allow-Origin": "*",
"Access-Control-Allow-Methods": "GET,HEAD,POST,OPTIONS",
"Access-Control-Max-Age": "86400",
"Access-Control-Allow-Headers": requestHeaders,
},
});
} else {
// Handle standard OPTIONS request
return new Response(null, {
headers: {
Allow: "GET, HEAD, POST, OPTIONS",
},
});
}
}
// Handle actual requests
let apiUrl = url.searchParams.get("apiurl") || API_URL;
// Rewrite request to point to API URL
const modifiedRequest = new Request(apiUrl, c.req.raw);
modifiedRequest.headers.set("Origin", new URL(apiUrl).origin);
let response = await fetch(modifiedRequest);
// Recreate the response so we can modify the headers
response = new Response(response.body, response);
// Set CORS headers
response.headers.set("Access-Control-Allow-Origin", url.origin);
// Append to/Add Vary header so browser will cache response correctly
response.headers.append("Vary", "Origin");
return response;
});
// Handle method not allowed for proxy endpoint
app.all(PROXY_ENDPOINT + "*", (c) => {
return new Response(null, {
status: 405,
statusText: "Method Not Allowed",
});
});
export default app;
```
Explain Code
Python
```
from workers import WorkerEntrypoint
from pyodide.ffi import to_js as _to_js
from js import Response, URL, fetch, Object, Request
def to_js(x):
return _to_js(x, dict_converter=Object.fromEntries)
class Default(WorkerEntrypoint):
async def fetch(self, request):
cors_headers = {
"Access-Control-Allow-Origin": "*",
"Access-Control-Allow-Methods": "GET,HEAD,POST,OPTIONS",
"Access-Control-Max-Age": "86400",
}
api_url = "https://examples.cloudflareworkers.com/demos/demoapi"
proxy_endpoint = "/corsproxy/"
def raw_html_response(html):
return Response.new(html, headers=to_js({"content-type": "text/html;charset=UTF-8"}))
demo_page = f'''
API GET without CORS Proxy
Shows TypeError: Failed to fetch since CORS is misconfiguredWaiting
API GET with CORS Proxy
Waiting
API POST with CORS Proxy + Preflight
Waiting
'''
async def handle_request(request):
url = URL.new(request.url)
api_url2 = url.searchParams["apiurl"]
if not api_url2:
api_url2 = api_url
request = Request.new(api_url2, request)
request.headers["Origin"] = (URL.new(api_url2)).origin
print(request.headers)
response = await fetch(request)
response = Response.new(response.body, response)
response.headers["Access-Control-Allow-Origin"] = url.origin
response.headers["Vary"] = "Origin"
return response
async def handle_options(request):
if "Origin" in request.headers and "Access-Control-Request-Method" in request.headers and "Access-Control-Request-Headers" in request.headers:
return Response.new(None, headers=to_js({
**cors_headers,
"Access-Control-Allow-Headers": request.headers["Access-Control-Request-Headers"]
}))
return Response.new(None, headers=to_js({"Allow": "GET, HEAD, POST, OPTIONS"}))
url = URL.new(request.url)
if url.pathname.startswith(proxy_endpoint):
if request.method == "OPTIONS":
return handle_options(request)
if request.method in ("GET", "HEAD", "POST"):
return handle_request(request)
return Response.new(None, status=405, statusText="Method Not Allowed")
return raw_html_response(demo_page)
```
Explain Code
```
use std::{borrow::Cow, collections::HashMap};
use worker::*;
fn raw_html_response(html: &str) -> ResultAPI GET without CORS Proxy
Shows TypeError: Failed to fetch since CORS is misconfiguredWaiting
API GET with CORS Proxy
Waiting
API POST with CORS Proxy + Preflight
Waiting
"#
);
if req.url()?.path().starts_with(proxy_endpoint) {
match req.method() {
Method::Options => return handle_options(req, &cors_headers),
Method::Get | Method::Head | Method::Post => return handle_request(req, api_url).await,
_ => return Response::error("Method Not Allowed", 405),
}
}
raw_html_response(&demo_page)
}
```
Explain Code
```json
{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"item":{"@id":"/directory/","name":"Directory"}},{"@type":"ListItem","position":2,"item":{"@id":"/workers/","name":"Workers"}},{"@type":"ListItem","position":3,"item":{"@id":"/workers/examples/","name":"Examples"}},{"@type":"ListItem","position":4,"item":{"@id":"/workers/examples/cors-header-proxy/","name":"CORS header proxy"}}]}
```
---
---
title: Country code redirect
description: Redirect a response based on the country code in the header of a visitor.
image: https://developers.cloudflare.com/dev-products-preview.png
---
[Skip to content](#%5Ftop)
### Tags
[ Redirects ](https://developers.cloudflare.com/search/?tags=Redirects)[ Geolocation ](https://developers.cloudflare.com/search/?tags=Geolocation)[ JavaScript ](https://developers.cloudflare.com/search/?tags=JavaScript)[ TypeScript ](https://developers.cloudflare.com/search/?tags=TypeScript)[ Python ](https://developers.cloudflare.com/search/?tags=Python)
Was this helpful?
YesNo
[ Edit page ](https://github.com/cloudflare/cloudflare-docs/edit/production/src/content/docs/workers/examples/country-code-redirect.mdx) [ Report issue ](https://github.com/cloudflare/cloudflare-docs/issues/new/choose)
Copy page
# Country code redirect
**Last reviewed:** over 5 years ago
Redirect a response based on the country code in the header of a visitor.
If you want to get started quickly, click on the button below.
[](https://deploy.workers.cloudflare.com/?url=https://github.com/cloudflare/docs-examples/tree/main/workers/country-code-redirect)
This creates a repository in your GitHub account and deploys the application to Cloudflare Workers.
* [ JavaScript ](#tab-panel-7420)
* [ TypeScript ](#tab-panel-7421)
* [ Python ](#tab-panel-7422)
* [ Hono ](#tab-panel-7423)
JavaScript
```
export default {
async fetch(request) {
/**
* A map of the URLs to redirect to
* @param {Object} countryMap
*/
const countryMap = {
US: "https://example.com/us",
EU: "https://example.com/eu",
};
// Use the cf object to obtain the country of the request
// more on the cf object: https://developers.cloudflare.com/workers/runtime-apis/request#incomingrequestcfproperties
const country = request.cf.country;
if (country != null && country in countryMap) {
const url = countryMap[country];
// Remove this logging statement from your final output.
console.log(
`Based on ${country}-based request, your user would go to ${url}.`,
);
return Response.redirect(url);
} else {
return fetch("https://example.com", request);
}
},
};
```
Explain Code
TypeScript
```
export default {
async fetch(request): PromiseWeather 🌦
"; const latitude = request.cf.latitude; const longitude = request.cf.longitude; endpoint += `${latitude};${longitude}/?token=${token}`; const init = { headers: { "content-type": "application/json;charset=UTF-8", }, }; const response = await fetch(endpoint, init); const content = await response.json(); html_content += `This is a demo using Workers geolocation data.
`; html_content += `You are located at: ${latitude},${longitude}.`; html_content += `Based off sensor data from ${content.data.city.url}">${content.data.city.name}:
`; html_content += `The AQI level is: ${content.data.aqi}.
`; html_content += `The N02 level is: ${content.data.iaqi.no2?.v}.
`; html_content += `The O3 level is: ${content.data.iaqi.o3?.v}.
`; html_content += `The temperature is: ${content.data.iaqi.t?.v}°C.
`; let html = `
${html_content}
`;
return new Response(html, {
headers: {
"content-type": "text/html;charset=UTF-8",
},
});
},
};
```
Explain Code
TypeScript
```
export default {
async fetch(request): PromiseWeather 🌦
"; const latitude = request.cf.latitude; const longitude = request.cf.longitude; endpoint += `${latitude};${longitude}/?token=${token}`; const init = { headers: { "content-type": "application/json;charset=UTF-8", }, }; const response = await fetch(endpoint, init); const content = await response.json(); html_content += `This is a demo using Workers geolocation data.
`; html_content += `You are located at: ${latitude},${longitude}.`; html_content += `Based off sensor data from ${content.data.city.url}">${content.data.city.name}:
`; html_content += `The AQI level is: ${content.data.aqi}.
`; html_content += `The N02 level is: ${content.data.iaqi.no2?.v}.
`; html_content += `The O3 level is: ${content.data.iaqi.o3?.v}.
`; html_content += `The temperature is: ${content.data.iaqi.t?.v}°C.
`; let html = `
${html_content}
`;
return new Response(html, {
headers: {
"content-type": "text/html;charset=UTF-8",
},
});
},
} satisfies ExportedHandler;
```
Explain Code
TypeScript
```
import { Hono } from 'hono';
import { html } from 'hono/html';
type Bindings = {};
interface WeatherApiResponse {
data: {
aqi: number;
city: {
name: string;
url: string;
};
iaqi: {
no2?: { v: number };
o3?: { v: number };
t?: { v: number };
};
};
}
const app = new Hono<{ Bindings: Bindings }>();
app.get('*', async (c) => {
// Get API endpoint
let endpoint = "https://api.waqi.info/feed/geo:";
const token = ""; // Use a token from https://aqicn.org/api/
// Define styles
const html_style = `body{padding:6em; font-family: sans-serif;} h1{color:#f6821f}`;
// Get geolocation from Cloudflare request
const req = c.req.raw;
const latitude = req.cf?.latitude;
const longitude = req.cf?.longitude;
// Create complete API endpoint with coordinates
endpoint += `${latitude};${longitude}/?token=${token}`;
// Fetch weather data
const init = {
headers: {
"content-type": "application/json;charset=UTF-8",
},
};
const response = await fetch(endpoint, init);
const content = await response.json() as WeatherApiResponse;
// Build HTML content
const weatherContent = html`
Weather 🌦
This is a demo using Workers geolocation data.
You are located at: ${latitude},${longitude}.
Based off sensor data from ${content.data.city.url}">${content.data.city.name}:
The AQI level is: ${content.data.aqi}.
The N02 level is: ${content.data.iaqi.no2?.v}.
The O3 level is: ${content.data.iaqi.o3?.v}.
The temperature is: ${content.data.iaqi.t?.v}°C.
`; // Complete HTML document const htmlDocument = html`
${weatherContent}
`;
// Return HTML response
return c.html(htmlDocument);
});
export default app;
```
Explain Code
Python
```
from workers import WorkerEntrypoint, Response, fetch
class Default(WorkerEntrypoint):
async def fetch(self, request):
endpoint = "https://api.waqi.info/feed/geo:"
token = "" # Use a token from https://aqicn.org/api/
html_style = "body{padding:6em; font-family: sans-serif;} h1{color:#f6821f}"
html_content = "Weather 🌦
" latitude = request.cf.latitude longitude = request.cf.longitude endpoint += f"{latitude};{longitude}/?token={token}" response = await fetch(endpoint) content = await response.json() html_content += "This is a demo using Workers geolocation data.
" html_content += f"You are located at: {latitude},{longitude}." html_content += f"Based off sensor data from {content['data']['city']['name']}:
" html_content += f"The AQI level is: {content['data']['aqi']}.
" html_content += f"The N02 level is: {content['data']['iaqi']['no2']['v']}.
" html_content += f"The O3 level is: {content['data']['iaqi']['o3']['v']}.
" html_content += f"The temperature is: {content['data']['iaqi']['t']['v']}°C.
" html = f"""
{html_content}
"""
headers = {"content-type": "text/html;charset=UTF-8"}
return Response(html, headers=headers)
```
Explain Code
```json
{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"item":{"@id":"/directory/","name":"Directory"}},{"@type":"ListItem","position":2,"item":{"@id":"/workers/","name":"Workers"}},{"@type":"ListItem","position":3,"item":{"@id":"/workers/examples/","name":"Examples"}},{"@type":"ListItem","position":4,"item":{"@id":"/workers/examples/geolocation-app-weather/","name":"Geolocation: Weather application"}}]}
```
---
---
title: Geolocation: Custom Styling
description: Personalize website styling based on localized user time.
image: https://developers.cloudflare.com/dev-products-preview.png
---
[Skip to content](#%5Ftop)
### Tags
[ Geolocation ](https://developers.cloudflare.com/search/?tags=Geolocation)[ JavaScript ](https://developers.cloudflare.com/search/?tags=JavaScript)[ TypeScript ](https://developers.cloudflare.com/search/?tags=TypeScript)
Was this helpful?
YesNo
[ Edit page ](https://github.com/cloudflare/cloudflare-docs/edit/production/src/content/docs/workers/examples/geolocation-custom-styling.mdx) [ Report issue ](https://github.com/cloudflare/cloudflare-docs/issues/new/choose)
Copy page
# Geolocation: Custom Styling
**Last reviewed:** about 4 years ago
Personalize website styling based on localized user time.
If you want to get started quickly, click on the button below.
[](https://deploy.workers.cloudflare.com/?url=https://github.com/cloudflare/docs-examples/tree/main/workers/geolocation-custom-styling)
This creates a repository in your GitHub account and deploys the application to Cloudflare Workers.
* [ JavaScript ](#tab-panel-7456)
* [ TypeScript ](#tab-panel-7457)
* [ Hono ](#tab-panel-7458)
JavaScript
```
export default {
async fetch(request) {
let grads = [
[
{ color: "00000c", position: 0 },
{ color: "00000c", position: 0 },
],
[
{ color: "020111", position: 85 },
{ color: "191621", position: 100 },
],
[
{ color: "020111", position: 60 },
{ color: "20202c", position: 100 },
],
[
{ color: "020111", position: 10 },
{ color: "3a3a52", position: 100 },
],
[
{ color: "20202c", position: 0 },
{ color: "515175", position: 100 },
],
[
{ color: "40405c", position: 0 },
{ color: "6f71aa", position: 80 },
{ color: "8a76ab", position: 100 },
],
[
{ color: "4a4969", position: 0 },
{ color: "7072ab", position: 50 },
{ color: "cd82a0", position: 100 },
],
[
{ color: "757abf", position: 0 },
{ color: "8583be", position: 60 },
{ color: "eab0d1", position: 100 },
],
[
{ color: "82addb", position: 0 },
{ color: "ebb2b1", position: 100 },
],
[
{ color: "94c5f8", position: 1 },
{ color: "a6e6ff", position: 70 },
{ color: "b1b5ea", position: 100 },
],
[
{ color: "b7eaff", position: 0 },
{ color: "94dfff", position: 100 },
],
[
{ color: "9be2fe", position: 0 },
{ color: "67d1fb", position: 100 },
],
[
{ color: "90dffe", position: 0 },
{ color: "38a3d1", position: 100 },
],
[
{ color: "57c1eb", position: 0 },
{ color: "246fa8", position: 100 },
],
[
{ color: "2d91c2", position: 0 },
{ color: "1e528e", position: 100 },
],
[
{ color: "2473ab", position: 0 },
{ color: "1e528e", position: 70 },
{ color: "5b7983", position: 100 },
],
[
{ color: "1e528e", position: 0 },
{ color: "265889", position: 50 },
{ color: "9da671", position: 100 },
],
[
{ color: "1e528e", position: 0 },
{ color: "728a7c", position: 50 },
{ color: "e9ce5d", position: 100 },
],
[
{ color: "154277", position: 0 },
{ color: "576e71", position: 30 },
{ color: "e1c45e", position: 70 },
{ color: "b26339", position: 100 },
],
[
{ color: "163C52", position: 0 },
{ color: "4F4F47", position: 30 },
{ color: "C5752D", position: 60 },
{ color: "B7490F", position: 80 },
{ color: "2F1107", position: 100 },
],
[
{ color: "071B26", position: 0 },
{ color: "071B26", position: 30 },
{ color: "8A3B12", position: 80 },
{ color: "240E03", position: 100 },
],
[
{ color: "010A10", position: 30 },
{ color: "59230B", position: 80 },
{ color: "2F1107", position: 100 },
],
[
{ color: "090401", position: 50 },
{ color: "4B1D06", position: 100 },
],
[
{ color: "00000c", position: 80 },
{ color: "150800", position: 100 },
],
];
async function toCSSGradient(hour) {
let css = "linear-gradient(to bottom,";
const data = grads[hour];
const len = data.length;
for (let i = 0; i < len; i++) {
const item = data[i];
css += ` #${item.color} ${item.position}%`;
if (i < len - 1) css += ",";
}
return css + ")";
}
let html_content = "";
let html_style = `
html{width:100vw; height:100vh;}
body{padding:0; margin:0 !important;height:100%;}
#container {
display: flex;
flex-direction:column;
align-items: center;
justify-content: center;
height: 100%;
color:white;
font-family:sans-serif;
}`;
const timezone = request.cf.timezone;
console.log(timezone);
let localized_date = new Date(
new Date().toLocaleString("en-US", { timeZone: timezone }),
);
let hour = localized_date.getHours();
let minutes = localized_date.getMinutes();
html_content += "" + hour + ":" + minutes + "
"; html_content += "" + timezone + "
${html_content}
`;
return new Response(html, {
headers: { "content-type": "text/html;charset=UTF-8" },
});
},
};
```
Explain Code
TypeScript
```
export default {
async fetch(request): Promise" + hour + ":" + minutes + "
"; html_content += "" + timezone + "
${html_content}
`;
return new Response(html, {
headers: { "content-type": "text/html;charset=UTF-8" },
});
},
} satisfies ExportedHandler;
```
Explain Code
TypeScript
```
import { Hono } from 'hono';
type Bindings = {};
type ColorStop = { color: string; position: number };
const app = new Hono<{ Bindings: Bindings }>();
// Gradient configurations for each hour of the day (0-23)
const grads: ColorStop[][] = [
[
{ color: "00000c", position: 0 },
{ color: "00000c", position: 0 },
],
[
{ color: "020111", position: 85 },
{ color: "191621", position: 100 },
],
[
{ color: "020111", position: 60 },
{ color: "20202c", position: 100 },
],
[
{ color: "020111", position: 10 },
{ color: "3a3a52", position: 100 },
],
[
{ color: "20202c", position: 0 },
{ color: "515175", position: 100 },
],
[
{ color: "40405c", position: 0 },
{ color: "6f71aa", position: 80 },
{ color: "8a76ab", position: 100 },
],
[
{ color: "4a4969", position: 0 },
{ color: "7072ab", position: 50 },
{ color: "cd82a0", position: 100 },
],
[
{ color: "757abf", position: 0 },
{ color: "8583be", position: 60 },
{ color: "eab0d1", position: 100 },
],
[
{ color: "82addb", position: 0 },
{ color: "ebb2b1", position: 100 },
],
[
{ color: "94c5f8", position: 1 },
{ color: "a6e6ff", position: 70 },
{ color: "b1b5ea", position: 100 },
],
[
{ color: "b7eaff", position: 0 },
{ color: "94dfff", position: 100 },
],
[
{ color: "9be2fe", position: 0 },
{ color: "67d1fb", position: 100 },
],
[
{ color: "90dffe", position: 0 },
{ color: "38a3d1", position: 100 },
],
[
{ color: "57c1eb", position: 0 },
{ color: "246fa8", position: 100 },
],
[
{ color: "2d91c2", position: 0 },
{ color: "1e528e", position: 100 },
],
[
{ color: "2473ab", position: 0 },
{ color: "1e528e", position: 70 },
{ color: "5b7983", position: 100 },
],
[
{ color: "1e528e", position: 0 },
{ color: "265889", position: 50 },
{ color: "9da671", position: 100 },
],
[
{ color: "1e528e", position: 0 },
{ color: "728a7c", position: 50 },
{ color: "e9ce5d", position: 100 },
],
[
{ color: "154277", position: 0 },
{ color: "576e71", position: 30 },
{ color: "e1c45e", position: 70 },
{ color: "b26339", position: 100 },
],
[
{ color: "163C52", position: 0 },
{ color: "4F4F47", position: 30 },
{ color: "C5752D", position: 60 },
{ color: "B7490F", position: 80 },
{ color: "2F1107", position: 100 },
],
[
{ color: "071B26", position: 0 },
{ color: "071B26", position: 30 },
{ color: "8A3B12", position: 80 },
{ color: "240E03", position: 100 },
],
[
{ color: "010A10", position: 30 },
{ color: "59230B", position: 80 },
{ color: "2F1107", position: 100 },
],
[
{ color: "090401", position: 50 },
{ color: "4B1D06", position: 100 },
],
[
{ color: "00000c", position: 80 },
{ color: "150800", position: 100 },
],
];
// Convert hour to CSS gradient
async function toCSSGradient(hour: number): Promise${hour}:${minutes}
`; html_content += `${timezone}
${html_content}
`;
return c.html(html);
});
export default app;
```
Explain Code
```json
{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"item":{"@id":"/directory/","name":"Directory"}},{"@type":"ListItem","position":2,"item":{"@id":"/workers/","name":"Workers"}},{"@type":"ListItem","position":3,"item":{"@id":"/workers/examples/","name":"Examples"}},{"@type":"ListItem","position":4,"item":{"@id":"/workers/examples/geolocation-custom-styling/","name":"Geolocation: Custom Styling"}}]}
```
---
---
title: Geolocation: Hello World
description: Get all geolocation data fields and display them in HTML.
image: https://developers.cloudflare.com/dev-products-preview.png
---
[Skip to content](#%5Ftop)
### Tags
[ Geolocation ](https://developers.cloudflare.com/search/?tags=Geolocation)[ JavaScript ](https://developers.cloudflare.com/search/?tags=JavaScript)[ TypeScript ](https://developers.cloudflare.com/search/?tags=TypeScript)[ Python ](https://developers.cloudflare.com/search/?tags=Python)
Was this helpful?
YesNo
[ Edit page ](https://github.com/cloudflare/cloudflare-docs/edit/production/src/content/docs/workers/examples/geolocation-hello-world.mdx) [ Report issue ](https://github.com/cloudflare/cloudflare-docs/issues/new/choose)
Copy page
# Geolocation: Hello World
**Last reviewed:** about 4 years ago
Get all geolocation data fields and display them in HTML.
If you want to get started quickly, click on the button below.
[](https://deploy.workers.cloudflare.com/?url=https://github.com/cloudflare/docs-examples/tree/main/workers/geolocation-hello-world)
This creates a repository in your GitHub account and deploys the application to Cloudflare Workers.
* [ JavaScript ](#tab-panel-7459)
* [ TypeScript ](#tab-panel-7460)
* [ Python ](#tab-panel-7461)
* [ Hono ](#tab-panel-7462)
JavaScript
```
export default {
async fetch(request) {
let html_content = "";
let html_style =
"body{padding:6em; font-family: sans-serif;} h1{color:#f6821f;}";
html_content += "Colo: " + request.cf.colo + "
"; html_content += "Country: " + request.cf.country + "
"; html_content += "City: " + request.cf.city + "
"; html_content += "Continent: " + request.cf.continent + "
"; html_content += "Latitude: " + request.cf.latitude + "
"; html_content += "Longitude: " + request.cf.longitude + "
"; html_content += "PostalCode: " + request.cf.postalCode + "
"; html_content += "MetroCode: " + request.cf.metroCode + "
"; html_content += "Region: " + request.cf.region + "
"; html_content += "RegionCode: " + request.cf.regionCode + "
"; html_content += "Timezone: " + request.cf.timezone + "
"; let html = `Geolocation: Hello World!
You now have access to geolocation data about where your user is visiting from.
${html_content} `; return new Response(html, { headers: { "content-type": "text/html;charset=UTF-8", }, }); }, }; ``` Explain Code TypeScript ``` export default { async fetch(request): PromiseColo: " + request.cf.colo + "
"; html_content += "Country: " + request.cf.country + "
"; html_content += "City: " + request.cf.city + "
"; html_content += "Continent: " + request.cf.continent + "
"; html_content += "Latitude: " + request.cf.latitude + "
"; html_content += "Longitude: " + request.cf.longitude + "
"; html_content += "PostalCode: " + request.cf.postalCode + "
"; html_content += "MetroCode: " + request.cf.metroCode + "
"; html_content += "Region: " + request.cf.region + "
"; html_content += "RegionCode: " + request.cf.regionCode + "
"; html_content += "Timezone: " + request.cf.timezone + "
"; let html = `Geolocation: Hello World!
You now have access to geolocation data about where your user is visiting from.
${html_content} `; return new Response(html, { headers: { "content-type": "text/html;charset=UTF-8", }, }); }, } satisfies ExportedHandler; ``` Explain Code Python ``` from workers import WorkerEntrypoint, Response class Default(WorkerEntrypoint): async def fetch(self, request): html_content = "" html_style = "body{padding:6em font-family: sans-serif;} h1{color:#f6821f;}" html_content += "Colo: " + request.cf.colo + "
" html_content += "Country: " + request.cf.country + "
" html_content += "City: " + request.cf.city + "
" html_content += "Continent: " + request.cf.continent + "
" html_content += "Latitude: " + request.cf.latitude + "
" html_content += "Longitude: " + request.cf.longitude + "
" html_content += "PostalCode: " + request.cf.postalCode + "
" html_content += "Region: " + request.cf.region + "
" html_content += "RegionCode: " + request.cf.regionCode + "
" html_content += "Timezone: " + request.cf.timezone + "
" html = f"""Geolocation: Hello World!
You now have access to geolocation data about where your user is visiting from.
{html_content} """ headers = {"content-type": "text/html;charset=UTF-8"} return Response(html, headers=headers) ``` Explain Code TypeScript ``` import { Hono } from "hono"; import { html } from "hono/html"; // Define the RequestWithCf interface to add Cloudflare-specific properties interface RequestWithCf extends Request { cf: { // Cloudflare-specific properties for geolocation colo: string; country: string; city: string; continent: string; latitude: string; longitude: string; postalCode: string; metroCode: string; region: string; regionCode: string; timezone: string; // Add other CF properties as needed }; } const app = new Hono(); app.get("*", (c) => { // Cast the raw request to include Cloudflare-specific properties const request = c.req.raw; // Define styles const html_style = "body{padding:6em; font-family: sans-serif;} h1{color:#f6821f;}"; // Create content with geolocation data let html_content = html`Colo: ${request.cf.colo}
Country: ${request.cf.country}
City: ${request.cf.city}
Continent: ${request.cf.continent}
Latitude: ${request.cf.latitude}
Longitude: ${request.cf.longitude}
PostalCode: ${request.cf.postalCode}
MetroCode: ${request.cf.metroCode}
Region: ${request.cf.region}
RegionCode: ${request.cf.regionCode}
Timezone: ${request.cf.timezone}
`; // Compose the full HTML const htmlContent = html`Geolocation: Hello World!
You now have access to geolocation data about where your user is visiting from.
${html_content} `; // Return the HTML response return c.html(htmlContent); }); export default app; ``` Explain Code ```json {"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"item":{"@id":"/directory/","name":"Directory"}},{"@type":"ListItem","position":2,"item":{"@id":"/workers/","name":"Workers"}},{"@type":"ListItem","position":3,"item":{"@id":"/workers/examples/","name":"Examples"}},{"@type":"ListItem","position":4,"item":{"@id":"/workers/examples/geolocation-hello-world/","name":"Geolocation: Hello World"}}]} ``` --- --- title: Hot-link protection description: Block other websites from linking to your content. This is useful for protecting images. image: https://developers.cloudflare.com/dev-products-preview.png --- [Skip to content](#%5Ftop) ### Tags [ Security ](https://developers.cloudflare.com/search/?tags=Security)[ Headers ](https://developers.cloudflare.com/search/?tags=Headers)[ JavaScript ](https://developers.cloudflare.com/search/?tags=JavaScript)[ TypeScript ](https://developers.cloudflare.com/search/?tags=TypeScript)[ Python ](https://developers.cloudflare.com/search/?tags=Python) Was this helpful? YesNo [ Edit page ](https://github.com/cloudflare/cloudflare-docs/edit/production/src/content/docs/workers/examples/hot-link-protection.mdx) [ Report issue ](https://github.com/cloudflare/cloudflare-docs/issues/new/choose) Copy page # Hot-link protection **Last reviewed:** over 5 years ago Block other websites from linking to your content. This is useful for protecting images. If you want to get started quickly, click on the button below. [](https://deploy.workers.cloudflare.com/?url=https://github.com/cloudflare/docs-examples/tree/main/workers/hot-link-protection) This creates a repository in your GitHub account and deploys the application to Cloudflare Workers. * [ JavaScript ](#tab-panel-7463) * [ TypeScript ](#tab-panel-7464) * [ Python ](#tab-panel-7465) * [ Hono ](#tab-panel-7466) JavaScript ``` export default { async fetch(request) { const HOMEPAGE_URL = "https://tutorial.cloudflareworkers.com/"; const PROTECTED_TYPE = "image/"; // Fetch the original request const response = await fetch(request); // If it's an image, engage hotlink protection based on the // Referer header. const referer = request.headers.get("Referer"); const contentType = response.headers.get("Content-Type") || ""; if (referer && contentType.startsWith(PROTECTED_TYPE)) { // If the hostnames don't match, it's a hotlink if (new URL(referer).hostname !== new URL(request.url).hostname) { // Redirect the user to your website return Response.redirect(HOMEPAGE_URL, 302); } } // Everything is fine, return the response normally. return response; }, }; ``` Explain Code TypeScript ``` export default { async fetch(request): PromiseHello World
This markup was generated by a Cloudflare Worker.
`; return new Response(html, { headers: { "content-type": "text/html;charset=UTF-8", }, }); }, }; ``` [Run Worker in Playground](https://workers.cloudflare.com/playground#LYVwNgLglgDghgJwgegGYHsHALQBM4RwDcABAEbogB2+CAngLzbPYZb6HbW5QDGU2AAwA2AMyDBARkEAmAJzCArAA4AXCxZtgHOFxp8BI8VNkKVAWABQAYXRUIAU3vYAIlADOMdO6jQ7qki08AmISKjhgBwYAIigaBwAPADoAK3do0lQoMCcIqNj45LToq1t7JwhsABU6GAcAuBgYMD4CKDtkFLgANzh3XgRYCABqYHRccAcrK0SvJBJcB1Q4cAgSAG9LEhI+uipeQIcIXgALAAoEBwBHEAd3CABKDa3tkl47e5ITiGAwEgYSAADAA8AEIXAB5axVACaAAUAKJfH5gAB8L22wIouDo6Ner2BJ0kqIAEg4wGB0CQAOqYMC4YHIIl4-EkYEwVFVE4eEjARAAaxAMBIAHc+iQAOZOBwIAgOXDkOg7EjWSkgXCoMCIBw0zD8mVJRkcjFs5DY3GAoiWE2XCAgBBUMIOEUkABKdy8VHcDjO31+ABpnqyvg44IsEO4Aptg9tou9ys4ILUHNEAtFHAkUH6wERTohvRAGABVKoAMWwymi-pN2wAvtX8bWHla69Xa0QrBpmFodHoePwhGIJNJ5EplKU7I5nG5PN5fO0qAEgjpSOFIjFIoQdBlAtlcuvomRKWQSjZJxVqsmGk0Wrw2h00nZppZ1tE+XEAPpjCY5VMFRZFOktadl2PYhH2BiDsYI5mMozBWEAA) TypeScript ``` export default { async fetch(request): PromiseHello World
This markup was generated by a Cloudflare Worker.
`; return new Response(html, { headers: { "content-type": "text/html;charset=UTF-8", }, }); }, } satisfies ExportedHandler; ``` Explain Code Python ``` from workers import WorkerEntrypoint, Response class Default(WorkerEntrypoint): async def fetch(self, request): html = """Hello World
This markup was generated by a Cloudflare Worker.
""" headers = {"content-type": "text/html;charset=UTF-8"} return Response(html, headers=headers) ``` Explain Code ``` use worker::*; #[event(fetch)] async fn fetch(_req: Request, _env: Env, _ctx: Context) -> ResultHello World
This markup was generated by a Cloudflare Worker.
"#; Response::from_html(html) } ``` Explain Code TypeScript ``` import { Hono } from "hono"; import { html } from "hono/html"; const app = new Hono(); app.get("*", (c) => { const doc = html`Hello World
This markup was generated by a Cloudflare Worker with Hono.
`; return c.html(doc); }); export default app; ``` Explain Code ```json {"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"item":{"@id":"/directory/","name":"Directory"}},{"@type":"ListItem","position":2,"item":{"@id":"/workers/","name":"Workers"}},{"@type":"ListItem","position":3,"item":{"@id":"/workers/examples/","name":"Examples"}},{"@type":"ListItem","position":4,"item":{"@id":"/workers/examples/return-html/","name":"Return small HTML page"}}]} ``` --- --- title: Return JSON description: Return JSON directly from a Worker script, useful for building APIs and middleware. image: https://developers.cloudflare.com/dev-products-preview.png --- [Skip to content](#%5Ftop) ### Tags [ JSON ](https://developers.cloudflare.com/search/?tags=JSON)[ JavaScript ](https://developers.cloudflare.com/search/?tags=JavaScript)[ TypeScript ](https://developers.cloudflare.com/search/?tags=TypeScript)[ Python ](https://developers.cloudflare.com/search/?tags=Python)[ Rust ](https://developers.cloudflare.com/search/?tags=Rust) Was this helpful? YesNo [ Edit page ](https://github.com/cloudflare/cloudflare-docs/edit/production/src/content/docs/workers/examples/return-json.mdx) [ Report issue ](https://github.com/cloudflare/cloudflare-docs/issues/new/choose) Copy page # Return JSON **Last reviewed:** over 2 years ago Return JSON directly from a Worker script, useful for building APIs and middleware. If you want to get started quickly, click on the button below. [](https://deploy.workers.cloudflare.com/?url=https://github.com/cloudflare/docs-examples/tree/main/workers/return-json) This creates a repository in your GitHub account and deploys the application to Cloudflare Workers. * [ JavaScript ](#tab-panel-7519) * [ TypeScript ](#tab-panel-7520) * [ Python ](#tab-panel-7521) * [ Rust ](#tab-panel-7522) * [ Hono ](#tab-panel-7523) JavaScript ``` export default { async fetch(request) { const data = { hello: "world", }; return Response.json(data); }, }; ``` [Run Worker in Playground](https://workers.cloudflare.com/playground#LYVwNgLglgDghgJwgegGYHsHALQBM4RwDcABAEbogB2+CAngLzbPYZb6HbW5QDGU2AAwBOAKwA2ACzDhAJkkAOAMxKAXCxZtgHOFxp8BIidLmKVAWABQAYXRUIAU3vYAIlADOMdO6jQ7qki08AmISKjhgBwYAIigaBwAPADoAK3do0lQoMCcIqNj45LToq1t7JwhsABU6GAcAuBgYMD4CKDtkFLgANzh3XgRYCABqYHRccAcrK0SvJBJcB1Q4cAgSAG9LEhI+uipeQIcIXgALAAoEBwBHEAd3CABKDa3tkl47e4WQkgZn19eTg4wGB0AFogB3TBgXDRAA0L22AF8iJYESRLhAQAgqCQAEp3LxUdwOVLuOxnHQPFFI+HIqwaZhaHR6Hj8IRiKQyeTKJSlOyOZxuTzeXztKgBII6UjhSIxSKEHQZQLZXKy6JkEFkEo2fkVaq1eo7JotXhtDppOzTSzraLAOBxAD6YwmOWiqgKiyK6UR9IZTJCLIM7OMXLMSmYViAA) TypeScript ``` export default { async fetch(request): PromiseTodos
`; async fetch (request, env, ctx) { // previous code return new Response(html, { headers: { 'Content-Type': 'text/html' } }); } ``` Explain Code You have a static HTML site being rendered and you can begin populating it with data. In the body, add a `div` tag with an `id` of `todos`: JavaScript ``` const html = `Todos
`; ``` Explain Code Add a ` `; ``` Explain Code Your static page can take in `window.todos` and render HTML based on it, but you have not actually passed in any data from KV. To do this, you will need to make a few changes. First, your `html` variable will change to a function. The function will take in a `todos` argument, which will populate the `window.todos` variable in the above code sample: JavaScript ``` const html = (todos) => ` `; ``` Explain Code This code updates the cache. Remember that the KV cache is eventually consistent — even if you were to update your Worker to read from the cache and return it, you have no guarantees it will actually be up to date. Instead, update the list of todos locally, by taking your original code for rendering the todo list, making it a reusable function called `populateTodos`, and calling it when the page loads and when the cache request has finished: JavaScript ``` const html = (todos) => ` `; ``` Explain Code With the client-side code in place, deploying the new version of the function should put all these pieces together. The result is an actual dynamic todo list. ## 5\. Update todos from the application UI For the final piece of your todo list, you need to be able to update todos — specifically, marking them as completed. Luckily, a great deal of the infrastructure for this work is already in place. You can update the todo list data in the cache, as evidenced by your `createTodo` function. Performing updates on a todo is more of a client-side task than a Worker-side one. To start, the `populateTodos` function can be updated to generate a `div` for each todo. In addition, move the name of the todo into a child element of that `div`: JavaScript ``` const html = (todos) => ` `; ``` Explain Code You have designed the client-side part of this code to handle an array of todos and render a list of HTML elements. There is a number of things that you have been doing that you have not quite had a use for yet – specifically, the inclusion of IDs and updating the todo's completed state. These things work well together to actually support updating todos in the application UI. To start, it would be useful to attach the ID of each todo in the HTML. By doing this, you can then refer to the element later in order to correspond it to the todo in the JavaScript part of your code. Data attributes and the corresponding `dataset` method in JavaScript are a perfect way to implement this. When you generate your `div` element for each todo, you can attach a data attribute called todo to each `div`: JavaScript ``` const html = (todos) => ` `; ``` Explain Code Inside your HTML, each `div` for a todo now has an attached data attribute, which looks like: ``` ``` You can now generate a checkbox for each todo element. This checkbox will default to unchecked for new todos but you can mark it as checked as the element is rendered in the window: JavaScript ``` const html = (todos) => ` `; ``` Explain Code The checkbox is set up to correctly reflect the value of completed on each todo but it does not yet update when you actually check the box. To do this, attach the `completeTodo` function as an event listener on the `click` event. Inside the function, inspect the checkbox element, find its parent (the todo `div`), and use its `todo` data attribute to find the corresponding todo in the data array. You can toggle the completed status, update its properties, and rerender the UI: JavaScript ``` const html = (todos) => ` `; ``` Explain Code The final result of your code is a system that checks the `todos` variable, updates your Cloudflare KV cache with that value, and then does a re-render of the UI based on the data it has locally. ## 6\. Conclusion and next steps By completing this tutorial, you have built a static HTML, CSS, and JavaScript application that is transparently powered by Workers and Workers KV, which take full advantage of Cloudflare's global network. If you would like to keep improving on your project, you can implement a better design (you can refer to a live version available at [todos.signalnerve.workers.dev ↗](https://todos.signalnerve.workers.dev/)), or make additional improvements to security and speed. You may also want to add user-specific caching. Right now, the cache key is always `data` – this means that any visitor to the site will share the same todo list with other visitors. Within your Worker, you could use values from the client request to create and maintain user-specific lists. For example, you may generate a cache key based on the requesting IP: JavaScript ``` export default { async fetch(request, env, ctx) { const defaultData = { todos: [ { id: 1, name: "Finish the Cloudflare Workers blog post", completed: false, }, ], }; const setCache = (key, data) => env.TODOS.put(key, data); const getCache = (key) => env.TODOS.get(key); const ip = request.headers.get("CF-Connecting-IP"); const myKey = `data-${ip}`; if (request.method === "PUT") { const body = await request.text(); try { JSON.parse(body); await setCache(myKey, body); return new Response(body, { status: 200 }); } catch (err) { return new Response(err, { status: 500 }); } } let data; const cache = await getCache(); if (!cache) { await setCache(myKey, JSON.stringify(defaultData)); data = defaultData; } else { data = JSON.parse(cache); } const body = html(JSON.stringify(data.todos).replace(/ `Todos
Click the below button to generate a new QR code. This will make a request to your Worker.
Generated QR Code Image
QR Generator
Click the below button to generate a new QR code. This will make a request to your Worker.
Generated QR Code Image
` tags using the `cheerio` library:
Add this code above the `export default` block in your `index.js` file:
JavaScript
```
async function read_website_content(url) {
console.log("reading website content");
const response = await fetch(url);
const body = await response.text();
let cheerioBody = cheerio.load(body);
const resp = {
website_body: cheerioBody("p").text(),
url: url,
};
return JSON.stringify(resp);
}
```
Explain Code
In this function, you take the URL that you received from OpenAI and use JavaScript's [Fetch API ↗](https://developer.mozilla.org/en-US/docs/Web/API/Fetch%5FAPI/Using%5FFetch) to pull the content of the website and extract the paragraph text. Now we need to determine when to call this function.
## 4\. Process the Assistant's Messages
Next, we need to process the response from the OpenAI API to check if it includes any function calls. If a function call is present, you should execute the corresponding function in your Worker. Note that the assistant may request multiple function calls.
Modify the fetch method within the `export default` block as follows:
JavaScript
```
// ... your previous code ...
if (assistantMessage.tool_calls) {
for (const toolCall of assistantMessage.tool_calls) {
if (toolCall.function.name === "read_website_content") {
const url = JSON.parse(toolCall.function.arguments).url;
const websiteContent = await read_website_content(url);
messages.push({
role: "tool",
tool_call_id: toolCall.id,
name: toolCall.function.name,
content: websiteContent,
});
}
}
const secondChatCompletion = await openai.chat.completions.create({
model: "gpt-4o-mini",
messages: messages,
});
return new Response(secondChatCompletion.choices[0].message.content);
} else {
// this is your existing return statement
return new Response(assistantMessage.content);
}
```
Explain Code
Check if the assistant message contains any function calls by checking for the `tool_calls` property. Because the AI model can call multiple functions by default, you need to loop through any potential function calls and add them to the `messages` array. Each `read_website_content` call will invoke the `read_website_content` function you defined earlier and pass the URL generated by OpenAI as an argument. \`
The `secondChatCompletion` is needed to provide a response informed by the data you retrieved from each function call. Now, the last step is to deploy your Worker.
Test your code by running `npx wrangler dev` and open the provided url in your browser. This will now show you OpenAI’s response using real-time information from the retrieved web data.
## 5\. Deploy your Worker application
To deploy your application, run the `npx wrangler deploy` command to deploy your Worker application:
Terminal window
```
npx wrangler deploy
```
You can now preview your Worker at ` Hello from Workers Hello from Workers Hello from Workers Hello from Workers