Skip to content
Merged
Show file tree
Hide file tree
Changes from 5 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
1 change: 0 additions & 1 deletion docs.json
Original file line number Diff line number Diff line change
Expand Up @@ -726,7 +726,6 @@
"group": "Support",
"pages": [
"redis/help/support",
"redis/help/prosupport",
"redis/help/sla",
"redis/help/uptime",
"redis/help/legal",
Expand Down
115 changes: 54 additions & 61 deletions redis/quickstarts/cloudflareworkers.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -5,8 +5,7 @@ title: " Cloudflare Workers"
### Database Setup

Create a Redis database using [Upstash Console](https://console.upstash.com) or
[Upstash CLI](https://github.com/upstash/cli). Select the global to minimize the
latency from all edge locations.
[Upstash CLI](https://github.com/upstash/cli).

### Project Setup

Expand All @@ -15,48 +14,65 @@ We will use **C3 (create-cloudflare-cli)** command-line tool to create our appli
<CodeGroup>

```shell npm
npm create cloudflare@latest
npm create cloudflare@latest -- upstash-redis-worker
```

```shell yarn
yarn create cloudflare@latest
yarn create cloudflare upstash-redis-worker
```

```shell pnpm
pnpm create cloudflare upstash-redis-worker
```

</CodeGroup>

This will install the `create-cloudflare` package, and lead you through setup. C3 will also install Wrangler in projects by default, which helps us testing and deploying the application.
This will create a new Cloudflare Workers project:

```text
➜ npm create cloudflare@latest
Need to install the following packages:
[email protected]
Ok to proceed? (y) y
➜ npm create cloudflare@latest -- upstash-redis-worker

> npx
> create-cloudflare upstash-redis-worker


using create-cloudflare version 2.1.0
─────────────────────────────────────────────────────────────────────────────────────────────────
👋 Welcome to create-cloudflare v2.50.8!
🧡 Let's get started.
📊 Cloudflare collects telemetry about your usage of Create-Cloudflare.

Learn more at: https://github.com/cloudflare/workers-sdk/blob/main/packages/create-cloudflare/telemetry.md
─────────────────────────────────────────────────────────────────────────────────────────────────

╭ Create an application with Cloudflare Step 1 of 3
├ In which directory do you want to create your application?
│ dir ./cloudflare_starter
│ dir ./upstash-redis-worker
├ What type of application do you want to create?
type "Hello World" Worker
├ What would you like to start with?
category Hello World example
Do you want to use TypeScript?
yes typescript
Which template would you like to use?
type Worker only
├ Copying files from "hello-world" template
├ Which language do you want to use?
│ lang TypeScript
Do you want to use TypeScript?
yes typescript
Copying template files
files copied to project directory
Retrieving current workerd compatibility date
compatibility date 2023-08-07
Updating name in `package.json`
updated `package.json`
Do you want to use git for version control?
yes git
Installing dependencies
installed via `npm install`
╰ Application created
╰ Application created

...

────────────────────────────────────────────────────────────
🎉 SUCCESS Application created successfully!
```

We will also install the **Upstash Redis SDK** to connect to Redis.
Expand Down Expand Up @@ -98,9 +114,7 @@ import { Redis } from "@upstash/redis/cloudflare";
export default {
async fetch(request, env, ctx) {
const redis = Redis.fromEnv(env);

const count = await redis.incr("counter");

return new Response(JSON.stringify({ count }));
},
};
Expand All @@ -110,45 +124,27 @@ export default {

### Configure Credentials

There are two methods for setting up the credentials for Upstash Redis client. The recommended way is to use Cloudflare Upstash Integration. Alternatively, you can add the credentials manually.

#### Using the Cloudflare Integration

Access to the [Cloudflare Dashboard](https://dash.cloudflare.com) and login with the same account that you've used while setting up the Worker application. Then, navigate to **Workers & Pages > Overview** section on the sidebar. Here, you'll find your application listed.

<Frame>
<img src="/img/cloudflare-integration/overview.png" />
</Frame>

Clicking on the application will direct you to the application details page, where you can perform the integration process. Switch to the **Settings** tab in the application details, and proceed to **Integrations** section. You will see various Worker integrations listed. To proceed, click the **Add Integration** button associated with the Upstash Redis.

<Frame>
<img src="/img/cloudflare-integration/redis-add-integration.png" />
</Frame>

On the Integration page, connect to your Upstash account. Then, select the related database from the dropdown menu. Finalize the process by pressing Save button.

<Note>
Please don't make any changes in the secret names on the **Configure secrets**
step. These credentials will be automatically picked up by
`Redis.fromEnv(env)` line in the code as `UPSTASH_REDIS_REST_URL` and
`UPSTASH_REDIS_REST_TOKEN`.
</Note>

<Frame>
<img src="/img/cloudflare-integration/redis-credentials.png" />
</Frame>

#### Setting up Manually

Navigate to [Upstash Console](https://console.upstash.com) and copy/paste your `UPSTASH_REDIS_REST_URL` and `UPSTASH_REDIS_REST_TOKEN` to your `wrangler.toml` as below.

```yaml
<CodeGroup>

```yaml wrangler.toml
[vars]
UPSTASH_REDIS_REST_URL="REPLACE_HERE"
UPSTASH_REDIS_REST_TOKEN="REPLACE_HERE"
```

```yaml wrangler.jsonc
{
"vars": {
"UPSTASH_REDIS_REST_URL": "REPLACE_HERE",
"UPSTASH_REDIS_REST_TOKEN": "REPLACE_HERE"
}
}
```

</CodeGroup>

### Test and Deploy

You can test the function locally with `npx wrangler dev`
Expand All @@ -157,13 +153,10 @@ Deploy your function to Cloudflare with `npx wrangler deploy`

The endpoint of the function will be provided to you, once the deployment is done.

### Repo
## Repositories

Javascript:
[https://github.com/upstash/upstash-redis/tree/main/examples/cloudflare-workers](https://github.com/upstash/upstash-redis/tree/main/examples/cloudflare-workers)

Typescript:
[https://github.com/upstash/upstash-redis/tree/main/examples/cloudflare-workers-with-typescript](https://github.com/upstash/upstash-redis/tree/main/examples/cloudflare-workers-with-typescript)

Wrangler 1:
[https://github.com/upstash/upstash-redis/tree/main/examples/cloudflare-workers-with-wrangler-1](https://github.com/upstash/upstash-redis/tree/main/examples/cloudflare-workers-with-wrangler-1)