Skip to content
Merged
Show file tree
Hide file tree
Changes from 3 commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,7 @@ spotlight:
author_bio_source: LinkedIn
---

import { TabItem, Tabs } from "~/components";
import { TabItem, Tabs, PackageManagers } from "~/components";

In this tutorial, you will put together a Cloudflare Worker that creates and serves a sitemap using data from [Sanity.io](https://www.sanity.io), a headless CMS.

Expand All @@ -44,25 +44,7 @@ While you can create Workers in the Cloudflare dashboard, it is a best practice

Create a new Worker project using [C3](/pages/get-started/c3/) (`create-cloudflare` CLI):

<Tabs> <TabItem label="pnpm">

```sh
pnpm create cloudflare@latest
```

</TabItem> <TabItem label="npm">

```sh
npm create cloudflare@latest
```

</TabItem> <TabItem label="yarn">

```sh
yarn create cloudflare@latest
```

</TabItem> </Tabs>
<PackageManagers type="create" pkg="cloudflare@latest" />

In this tutorial, the Worker will be named `cms-sitemap`.

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -22,7 +22,7 @@ sidebar:
order: 2
---

import { Render, TabItem, Tabs } from "~/components";
import { Render, TabItem, Tabs, PackageManagers } from "~/components";

E-commerce and media sites often work on increasing the average transaction value to boost profitability. One of the strategies to increase the average transaction value is "cross-selling," which involves recommending related products. Cloudflare offers a range of products designed to build mechanisms for retrieving data related to the products users are viewing or requesting. In this tutorial, you will experience developing functionalities necessary for cross-selling by creating APIs for related product searches and product recommendations.

Expand Down Expand Up @@ -61,25 +61,11 @@ First, let's create a Cloudflare Workers project.
To efficiently create and manage multiple APIs, let's use [`Hono`](https://hono.dev). Hono is an open-source application framework released by a Cloudflare Developer Advocate. It is lightweight and allows for the creation of multiple API paths, as well as efficient request and response handling.
Open your command line interface (CLI) and run the following command:

<Tabs> <TabItem label="npm">

```sh
npm create cloudflare@latest cross-sell-api -- --framework hono
```

</TabItem> <TabItem label="yarn">

```sh
yarn create cloudflare@latest cross-sell-api -- --framework hono
```

</TabItem> <TabItem label="pnpm">

```sh
pnpm create cloudflare@latest cross-sell-api -- --framework hono
```

</TabItem> </Tabs>
<PackageManagers
type="create"
pkg="cloudflare@latest"
args={"cross-sell-api --framework=hono"}
/>

If this is your first time running the `C3` command, you will be asked whether you want to install it. Confirm that the package name for installation is `create-cloudflare` and answer `y`.

Expand Down Expand Up @@ -210,8 +196,6 @@ index_name = "stripe-products"

Additionally, let's add the configuration to use Workers AI in `wrangler.toml`.



<WranglerConfig>

```toml null {9,10}
Expand Down
2 changes: 1 addition & 1 deletion src/content/docs/pages/get-started/c3.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -73,7 +73,7 @@ npm create cloudflare@latest [--] [<DIRECTORY>] [OPTIONS] [-- <NESTED ARGS...>]
</TabItem> <TabItem label="yarn">

```sh
yarn create cloudflare@latest [--] [<DIRECTORY>] [OPTIONS] [-- <NESTED ARGS...>]
yarn create cloudflare [--] [<DIRECTORY>] [OPTIONS] [-- <NESTED ARGS...>]
```

</TabItem> <TabItem label="pnpm">
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -22,7 +22,7 @@ sidebar:
order: 2
---

import { Render, TabItem, Tabs } from "~/components";
import { Render, TabItem, Tabs, PackageManagers } from "~/components";

This tutorial shows how you can build a more secure payment form using Turnstile. You can learn how to block bot access on the checkout page and trigger additional authentication flows by integrating Turnstile with Stripe.

Expand All @@ -49,25 +49,11 @@ To efficiently create and manage multiple APIs, let's use [`Hono`](https://hono.

Open your command line interface (CLI) and run the following command:

<Tabs> <TabItem label="npm">

```sh
npm create cloudflare@latest secure-payment-form -- --framework hono
```

</TabItem> <TabItem label="yarn">

```sh
yarn create cloudflare@latest secure-payment-form -- --framework hono
```

</TabItem> <TabItem label="pnpm">

```sh
pnpm create cloudflare@latest secure-payment-form -- --framework hono
```

</TabItem> </Tabs>
<PackageManagers
type="create"
pkg="cloudflare@latest"
args={"secure-payment-form --framework=hono"}
/>

If this is your first time running the `C3` command, you will be asked whether you want to install it. Confirm that the package name for installation is `create-cloudflare` and answer `y`.

Expand Down
18 changes: 2 additions & 16 deletions src/content/partials/workers/c3-run-command-no-directory.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -2,20 +2,6 @@
{}
---

import { TabItem, Tabs } from "~/components";
import { PackageManagers } from "~/components";

<Tabs> <TabItem label="npm">

```sh
npm create cloudflare@latest
```

</TabItem>

<TabItem label="yarn">

```sh
yarn create cloudflare@latest
```

</TabItem> </Tabs>
<PackageManagers type="create" pkg="cloudflare@latest" />
Original file line number Diff line number Diff line change
Expand Up @@ -40,7 +40,7 @@ npm create cloudflare@latest [<DIRECTORY>] -- --type=pre-existing
</TabItem> <TabItem label="yarn">

```sh
yarn create cloudflare@latest [<DIRECTORY>] --type=pre-existing
yarn create cloudflare [<DIRECTORY>] --type=pre-existing
```

</TabItem> <TabItem label="pnpm">
Expand Down
Loading