Bind a KV store to Cloudflare Worker

Jon Meyers
InstructorJon Meyers
Share this video with your friends

Social Share Links

Send Tweet
Published 2 years ago
Updated 2 years ago

KV Storage is a cache that Cloudflare makes available within our Workers. It replicates across multiple CDN nodes, making it a super performant way to cache data.

In this lesson, we create a new KV store using the Wrangler CLI, and bind it to our Cloudflare worker using the wrangler.toml configuration file.

Additionally, we create a preview store to use in development mode.

Code Snippets

Create a KV Store

npx wrangler kv:namespace create "ARTICLES"

Create a preview KV Store

npx wrangler kv:namespace create "ARTICLES" --preview

Bind KV to Cloudflare Worker

kv_namespaces = [
  { binding = "replace-with-your-kv-name", id = "replace-with-your-kv-production-id", preview_id = "replace-with-your-kv-preview-id" }
]

Run wrangler development server

npx wrangler dev

Resources

Instructor: [0:00] Every time a user navigates to one of our routes, we're making a request to the Supabase origin server, but each of these Cloudflare workers is running at a CDN node as close as possible to the user making that request. [0:11] To reduce the number of trips to that origin server, we need to cache this value that we get back from Supabase as close to our users as possible.

[0:18] Type npx wrangler kv:Namespace create to create a new KV store, where we can cache these values. We need to give it a name, mine's going to be articles. Once that's finished, we'll see this binding=articles and then an ID for our KV store.

[0:35] Let's copy this whole object here and open up our wrangler.toml file. We then need to create a new key for kv_namespaces, and set this equal to an array and paste that object for our new KV store.

[0:50] Now, if we run npx wrangler dev to start our development server, we get this error because we shouldn't use the same KV store in development mode as we are in production.

[1:00] We can create a KV store specifically for running in development mode by running the same command npx wrangler kv:namespace create articles and appending --preview. You'll see this has given us another configuration object.

[1:13] We actually only need the preview ID for this one, so we can copy that and then paste that into our wrangler.toml file. Now, if we run our npx wrangler dev command again, see, our development server is back up and running, but we've also attached to this KV namespace for articles.

egghead
egghead
~ 10 minutes ago

Member comments are a way for members to communicate, interact, and ask questions about a lesson.

The instructor or someone from the community might respond to your question Here are a few basic guidelines to commenting on egghead.io

Be on-Topic

Comments are for discussing a lesson. If you're having a general issue with the website functionality, please contact us at support@egghead.io.

Avoid meta-discussion

  • This was great!
  • This was horrible!
  • I didn't like this because it didn't match my skill level.
  • +1 It will likely be deleted as spam.

Code Problems?

Should be accompanied by code! Codesandbox or Stackblitz provide a way to share code and discuss it in context

Details and Context

Vague question? Vague answer. Any details and context you can provide will lure more interesting answers!

Markdown supported.
Become a member to join the discussionEnroll Today