Skip to content

Commit e1e26ac

Browse files
kathaylToriLindsay
kathayl
and
ToriLindsay
authored
Update get-started.mdx (#25111)
* Update get-started.mdx major update to get started page * Create example-workers-binding-screenshots-from-web.mdx make existing example into partial * Update screenshots.mdx replace example with partial * Needed to import Render component * Update src/content/docs/browser-rendering/get-started.mdx Co-authored-by: ToriLindsay <[email protected]> * Update src/content/docs/browser-rendering/get-started.mdx Co-authored-by: ToriLindsay <[email protected]> * Update src/content/docs/browser-rendering/get-started.mdx Co-authored-by: ToriLindsay <[email protected]> * Update src/content/docs/browser-rendering/get-started.mdx Co-authored-by: ToriLindsay <[email protected]> * Update get-started.mdx fix additional ```bash * Update screenshots.mdx trying to diagnose problem. remove extra ``` bash? * Fixing components * Update src/content/partials/browser-rendering/example-workers-binding-screenshots-from-web.mdx Co-authored-by: ToriLindsay <[email protected]> * Update src/content/partials/browser-rendering/example-workers-binding-screenshots-from-web.mdx Co-authored-by: ToriLindsay <[email protected]> * Update src/content/partials/browser-rendering/example-workers-binding-screenshots-from-web.mdx Co-authored-by: ToriLindsay <[email protected]> * Update src/content/partials/browser-rendering/example-workers-binding-screenshots-from-web.mdx Co-authored-by: ToriLindsay <[email protected]> * Update src/content/partials/browser-rendering/example-workers-binding-screenshots-from-web.mdx Co-authored-by: ToriLindsay <[email protected]> * Update example-workers-binding-screenshots-from-web.mdx update wording + header levels * Update get-started.mdx change header levels * Update get-started.mdx retry header fix part 1 * Update example-workers-binding-screenshots-from-web.mdx fix header levels part 2 --------- Co-authored-by: ToriLindsay <[email protected]>
1 parent 6dea482 commit e1e26ac

File tree

3 files changed

+220
-168
lines changed

3 files changed

+220
-168
lines changed

‎src/content/docs/browser-rendering/get-started.mdx‎

Lines changed: 49 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -4,8 +4,54 @@ title: Get started
44
sidebar:
55
order: 2
66
---
7+
import { Render } from "~/components";
78

8-
Browser rendering can be used in two ways:
9+
Cloudflare Browser Rendering allows you to programmatically control a headless browser, enabling you to do things like take screenshots, generate PDFs, and perform automated browser tasks.
910

10-
- [Workers Bindings](/browser-rendering/workers-bindings/) for complex scripts.
11-
- [REST API](/browser-rendering/rest-api/) for simple actions.
11+
There are two ways to use Browser Rendering:
12+
- [REST API](/browser-rendering/rest-api/) for simple, one-off actions, like taking a screenshot, fetching HTML, or generating a PDF.
13+
- [Workers Bindings](/browser-rendering/workers-bindings/) for more complex, multi-step browser automation using [Puppeteer](/browser-rendering/platform/puppeteer/) and [Playwright](/browser-rendering/platform/playwright/).
14+
15+
This guide will help you choose the right path for your needs and get you started with your first Browser Rendering project.
16+
17+
## REST API
18+
19+
The REST API is best for situations where you have an existing application and want to perform simple, stateless browser actions.
20+
21+
### Prerequisites
22+
- Sign up for a [Cloudflare account](https://dash.cloudflare.com/sign-up/workers-and-pages).
23+
- Create a [Cloudflare API Token](/fundamentals/api/get-started/create-token/) with `Browser Rendering - Edit` permissions.
24+
25+
### Example: Take a screenshot of the Cloudflare homepage
26+
27+
<Render
28+
file="example-screenshot-from-url"
29+
product="browser-rendering"
30+
/>
31+
32+
The REST API can also be used to:
33+
34+
- [Fetch HTML](/browser-rendering/rest-api/content-endpoint/)
35+
- [Generate a PDF](/browser-rendering/rest-api/pdf-endpoint/)
36+
- [and more...](/browser-rendering/rest-api/)
37+
38+
## Workers Bindings
39+
40+
Workers Bindings are best for situations where you need to build more complex, multi-step browser automation workflows. You can use familiar tools like [Puppeteer](/browser-rendering/platform/puppeteer/) and [Playwright](/browser-rendering/platform/playwright/).
41+
42+
### Prerequisites
43+
<Render file="prereqs" product="workers" />
44+
45+
### Example: Navigate to a URL, take a screenshot, and store in KV
46+
47+
<Render
48+
file="example-workers-binding-screenshots-from-web"
49+
product="browser-rendering"
50+
/>
51+
52+
## Next Steps
53+
If you have any feature requests or notice any bugs, share your feedback directly with the Cloudflare team by joining the [Cloudflare Developers community on Discord](https://discord.cloudflare.com/).
54+
55+
- Check out all the [REST API endpoints](/browser-rendering/rest-api/)
56+
- Try out the [Playwright MCP](/browser-rendering/platform/playwright-mcp/)
57+
- Learn more about Browser Rendering [limits](/browser-rendering/platform/limits/) and [pricing](/browser-rendering/platform/pricing/).

‎src/content/docs/browser-rendering/workers-bindings/screenshots.mdx‎

Lines changed: 2 additions & 165 deletions
Original file line numberDiff line numberDiff line change
@@ -17,174 +17,11 @@ By following this guide, you will create a Worker that uses the Browser Renderin
1717

1818
<Render file="prereqs" product="workers" />
1919

20-
## 1. Create a Worker project
21-
22-
[Cloudflare Workers](/workers/) provides a serverless execution environment that allows you to create new applications or augment existing ones without configuring or maintaining infrastructure. Your Worker application is a container to interact with a headless browser to do actions, such as taking screenshots.
23-
24-
Create a new Worker project named `browser-worker` by running:
25-
26-
<PackageManagers
27-
type="create"
28-
pkg="cloudflare@latest"
29-
args={"browser-worker"}
30-
/>
31-
3220
<Render
33-
file="c3-post-run-steps"
34-
product="workers"
35-
params={{
36-
category: "hello-world",
37-
type: "Worker only",
38-
lang: "JavaScript / TypeScript",
39-
}}
21+
file="example-workers-binding-screenshots-from-web"
22+
product="browser-rendering"
4023
/>
4124

42-
## 2. Install Puppeteer
43-
44-
In your `browser-worker` directory, install Cloudflare’s [fork of Puppeteer](/browser-rendering/platform/puppeteer/):
45-
46-
<PackageManagers pkg="@cloudflare/puppeteer" dev />
47-
48-
## 3. Create a KV namespace
49-
50-
Browser Rendering can be used with other developer products. You might need a [relational database](/d1/), an [R2 bucket](/r2/) to archive your crawled pages and assets, a [Durable Object](/durable-objects/) to keep your browser instance alive and share it with multiple requests, or [Queues](/queues/) to handle your jobs asynchronous.
51-
52-
For the purpose of this guide, you are going to use a [KV store](/kv/concepts/kv-namespaces/) to cache your screenshots.
53-
54-
Create two namespaces, one for production, and one for development.
55-
56-
```sh
57-
npx wrangler kv namespace create BROWSER_KV_DEMO
58-
npx wrangler kv namespace create BROWSER_KV_DEMO --preview
59-
```
60-
61-
Take note of the IDs for the next step.
62-
63-
## 4. Configure the Wrangler configuration file
64-
65-
Configure your `browser-worker` project's [Wrangler configuration file](/workers/wrangler/configuration/) by adding a browser [binding](/workers/runtime-apis/bindings/) and a [Node.js compatibility flag](/workers/configuration/compatibility-flags/#nodejs-compatibility-flag). Bindings allow your Workers to interact with resources on the Cloudflare developer platform. Your browser `binding` name is set by you, this guide uses the name `MYBROWSER`. Browser bindings allow for communication between a Worker and a headless browser which allows you to do actions such as taking a screenshot, generating a PDF and more.
66-
67-
Update your [Wrangler configuration file](/workers/wrangler/configuration/) with the Browser Rendering API binding and the KV namespaces you created:
68-
69-
<WranglerConfig>
70-
71-
```toml title="wrangler.toml"
72-
name = "browser-worker"
73-
main = "src/index.js"
74-
compatibility_date = "2023-03-14"
75-
compatibility_flags = [ "nodejs_compat" ]
76-
77-
browser = { binding = "MYBROWSER" }
78-
kv_namespaces = [
79-
{ binding = "BROWSER_KV_DEMO", id = "22cf855786094a88a6906f8edac425cd", preview_id = "e1f8b68b68d24381b57071445f96e623" }
80-
]
81-
```
82-
83-
</WranglerConfig>
84-
85-
## 5. Code
86-
87-
<Tabs> <TabItem label="JavaScript" icon="seti:javascript">
88-
Update `src/index.js` with your Worker code:
89-
90-
```js
91-
import puppeteer from "@cloudflare/puppeteer";
92-
93-
export default {
94-
async fetch(request, env) {
95-
const { searchParams } = new URL(request.url);
96-
let url = searchParams.get("url");
97-
let img;
98-
if (url) {
99-
url = new URL(url).toString(); // normalize
100-
img = await env.BROWSER_KV_DEMO.get(url, { type: "arrayBuffer" });
101-
if (img === null) {
102-
const browser = await puppeteer.launch(env.MYBROWSER);
103-
const page = await browser.newPage();
104-
await page.goto(url);
105-
img = await page.screenshot();
106-
await env.BROWSER_KV_DEMO.put(url, img, {
107-
expirationTtl: 60 * 60 * 24,
108-
});
109-
await browser.close();
110-
}
111-
return new Response(img, {
112-
headers: {
113-
"content-type": "image/jpeg",
114-
},
115-
});
116-
} else {
117-
return new Response("Please add an ?url=https://example.com/ parameter");
118-
}
119-
},
120-
};
121-
```
122-
123-
</TabItem> <TabItem label="TypeScript" icon="seti:typescript">
124-
Update `src/index.ts` with your Worker code:
125-
126-
```ts
127-
import puppeteer from "@cloudflare/puppeteer";
128-
129-
interface Env {
130-
MYBROWSER: Fetcher;
131-
BROWSER_KV_DEMO: KVNamespace;
132-
}
133-
134-
export default {
135-
async fetch(request, env): Promise<Response> {
136-
const { searchParams } = new URL(request.url);
137-
let url = searchParams.get("url");
138-
let img: Buffer;
139-
if (url) {
140-
url = new URL(url).toString(); // normalize
141-
img = await env.BROWSER_KV_DEMO.get(url, { type: "arrayBuffer" });
142-
if (img === null) {
143-
const browser = await puppeteer.launch(env.MYBROWSER);
144-
const page = await browser.newPage();
145-
await page.goto(url);
146-
img = (await page.screenshot()) as Buffer;
147-
await env.BROWSER_KV_DEMO.put(url, img, {
148-
expirationTtl: 60 * 60 * 24,
149-
});
150-
await browser.close();
151-
}
152-
return new Response(img, {
153-
headers: {
154-
"content-type": "image/jpeg",
155-
},
156-
});
157-
} else {
158-
return new Response("Please add an ?url=https://example.com/ parameter");
159-
}
160-
},
161-
} satisfies ExportedHandler<Env>;
162-
```
163-
164-
</TabItem> </Tabs>
165-
166-
This Worker instantiates a browser using Puppeteer, opens a new page, navigates to what you put in the `"url"` parameter, takes a screenshot of the page, stores the screenshot in KV, closes the browser, and responds with the JPEG image of the screenshot.
167-
168-
If your Worker is running in production, it will store the screenshot to the production KV namespace. If you are running `wrangler dev`, it will store the screenshot to the dev KV namespace.
169-
170-
If the same `"url"` is requested again, it will use the cached version in KV instead, unless it expired.
171-
172-
## 6. Test
173-
174-
Run `npx wrangler dev` to test your Worker locally. You can also use [remote bindings](/workers/development-testing/#remote-bindings) to test against a remote browser.
175-
176-
To test taking your first screenshot, go to the following URL:
177-
178-
`<LOCAL_HOST_URL>/?url=https://example.com`
179-
180-
## 7. Deploy
181-
182-
Run `npx wrangler deploy` to deploy your Worker to the Cloudflare global network.
183-
184-
To take your first screenshot, go to the following URL:
185-
186-
`<YOUR_WORKER>.<YOUR_SUBDOMAIN>.workers.dev/?url=https://example.com`
187-
18825
## Related resources
18926

19027
- Other [Puppeteer examples](https://github.com/cloudflare/puppeteer/tree/main/examples)

0 commit comments

Comments
 (0)