You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
In this tutorial, you will learn how to ingest clickstream data to a R2 bucket using Pipelines. You will also learn how to connect the bucket to MotherDuck. You will then query the data using MotherDuck.
18
+
In this tutorial, you will learn how to ingest clickstream data from your website, using Pipelines. We'll also use Pipelines to load this data into an [R2 bucket](/r2/). You will also learn how to connect the bucket to MotherDuck. You will then query the data using MotherDuck.
19
19
20
-
For this tutorial, you will build a landing page of an e-commerce website. The page will list the products available for sale. A user can click on the view button to view the product details or click on the add to cart button to add the product to their cart. The focus of this tutorial is to show how to ingest the data to R2 and query it using MotherDuck. Hence, the landing page will be a simple HTML page with no functionality.
20
+
For this tutorial, you will build a landing page of an e-commerce website. A user can click on the view button to view the product details or click on the add to cart button to add the product to their cart.
21
+
22
+
We will use a pipeline to ingest these click events, and load into an R2 bucket. We'll then use MotherDuck to query the events.
21
23
22
24
## Prerequisites
23
25
24
-
1. Create a [R2 bucket](/r2/buckets/create-buckets/) in your Cloudflare account.
25
-
2. A [MotherDuck](https://motherduck.com/) account.
Use a Node version manager like [Volta](https://volta.sh/) or
@@ -49,7 +50,7 @@ Create a new Worker project by running the following commands:
49
50
product="workers"
50
51
params={{
51
52
category: "hello-world",
52
-
type: "Hello World Worker",
53
+
type: "Worker only",
53
54
lang: "TypeScript",
54
55
}}
55
56
/>
@@ -60,20 +61,24 @@ Navigate to the `e-commerce-pipelines` directory:
60
61
cd e-commerce-pipelines
61
62
```
62
63
63
-
## 2. Create the front-end
64
+
## 2. Create the frontend
64
65
65
66
Using Static Assets, you can serve the frontend of your application from your Worker. To use Static Assets, you need to add the required bindings to your `wrangler.toml` file.
66
67
68
+
<WranglerConfig>
69
+
67
70
```toml
68
71
[assets]
69
72
directory = "public"
70
73
```
71
74
72
-
Next, create a `public` directory and add an `index.html` file. The `index.html` file should contain the following HTML code:
75
+
</WranglerConfig>
76
+
77
+
Next, create a `public` directory in the root of your project. Add an `index.html` file to the `public` directory. The `index.html` file should contain the following HTML code:
73
78
74
79
<details>
75
80
<summary>Select to view the HTML code</summary>
76
-
```html
81
+
```html
77
82
<!DOCTYPE html>
78
83
<html>
79
84
<head>
@@ -182,7 +187,7 @@ Next, create a `public` directory and add an `index.html` file. The `index.html`
182
187
</body>
183
188
184
189
</html>
185
-
190
+
186
191
```
187
192
</details>
188
193
@@ -302,26 +307,28 @@ The `handleClick` function does the following:
302
307
- Creates a `POST` request to the `/api/clickstream` endpoint with the data.
303
308
- Logs any errors that occur.
304
309
305
-
## 4. Create a pipeline
310
+
## 4. Create an R2 bucket
311
+
We'll create a new R2 bucket to use as the sink for our pipeline. Create a new r2 bucket `clickstream-data` using the [Wrangler CLI](/workers/wrangler/):
306
312
307
-
You need to create a new pipeline and connect it to your R2 bucket.
313
+
```sh
314
+
npx wrangler r2 bucket create clickstream-data
315
+
```
316
+
317
+
## 5. Create a pipeline
318
+
You need to create a new pipeline and connect it to the R2 bucket we created in the previous step.
308
319
309
320
Create a new pipeline `clickstream-pipeline` using the [Wrangler CLI](/workers/wrangler/):
Replace `<BUCKET_NAME>` with the name of your R2 bucket.
316
-
317
326
When you run the command, you will be prompted to authorize Cloudflare Workers Pipelines to create R2 API tokens on your behalf. These tokens are required by your Pipeline. Your Pipeline uses these tokens when loading data into your bucket. You can approve the request through the browser link which will open automatically.
318
327
319
328
```output
320
-
🌀 Authorizing R2 bucket <BUCKET_NAME>
329
+
🌀 Authorizing R2 bucket clickstream-data
321
330
🌀 Creating pipeline named "clickstream-pipeline"
322
331
✅ Successfully created pipeline "clickstream-pipeline" with id <PIPELINES_ID>
0 commit comments