Cloudflare secures and ensures the reliability of your external-facing resources such as websites, APIs, and applications. It protects your internal resources such as behind-the-firewall applications, teams, and devices. And it is your platform for developing globally-scalable applications.

cloudflare

Supabase is an open source Firebase alternative. A service to:

- Listen to database changes.
- Query your tables, including filtering, pagination, and deeply nested relationships (like GraphQL).
- Create, update, and delete rows.
- Manage your users and their permissions.
- Interact with your database using a simple UI.

Supabase is not a 1-to-1 mapping of Firebase. Most notably, Supabase uses Postgres rather than a NoSQL store. 

supabase

The “Edge” is where you write and store your code where your data is being produced. This allows for a quick and efficient data transfer, eliminating or severely reducing lag. 

Supabase is a suite of open-source tools wrapping a PostgreSQL database. It provides the building blocks of an app - database hosting, auth, file storage, real-time, and edge functions - so we can focus on what makes our app unique.

Cloudflare Workers are serverless functions that run at the Edge! In this course, we will use the Wrangler CLI tool for interfacing with your Cloudflare account and creating or publishing your Workers.

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

Combined, these three things give you the benefits of that reduced lag in a smooth and streamlined process. 

Throughout this course, Jon will teach you how to create a small blog that hits the key points of how to:

- Query Supabase from Cloudflare Workers
- Read and write KV Storage cache from Cloudflare Worker
- Cache Supabase response at the Edge with KV storage

And more! 

Artem Gromov

Cloudflare Workers are serverless functions that run at the Edge! 🔪

The Wrangler CLI is a tool for interfacing with your Cloudflare account, and creating or publishing your Workers.

In this video, we use the Wrangler CLI to log in to our Cloudflare account and authorize the `wrangler` command to make changes on our behalf.

Additionally, we create a worker and host it locally with the `npx wrangler dev` command. We then demonstrate making a GET request to our Cloudflare Worker from the browser, and confirm it is sending the correct response.

By modifying the response locally, we can see that changes are reflected any time we refresh the browser.

## Code Snippets

**Login to Cloudflare with Wrangler CLI**

```bash
npx wrangler login
```

**Create Cloudflare Worker**

```bash
npx wrangler init supabase-at-the-edge
```

**Run wrangler development server**

```bash
npx wrangler dev
```

## Resources

- [Cloudflare Wrangler docs](https://developers.cloudflare.com/workers/wrangler/get-started/)

Create a Cloudflare Worker with the Wrangler CLI

[Supabase](https://app.supabase.com/) is a suite of open-source tools wrapping a PostgreSQL database. It provides the building blocks of an app - database hosting, auth, file storage, realtime and edge functions - so we can focus on the thing that makes our app unique.

In this video, we sign up for a free Supabase account, create a basic schema for a blog, and populate it with test data.

## Code Snippets

**Create the table**

```sql
create table if not exists articles (
  id uuid default uuid_generate_v4() primary key,
  created_at timestamp with time zone default timezone('utc'::text, now()) not null,
  title text not null,
  content text not null,
  is_published bool default false not null
);
```

**Insert test data**

```sql
insert into articles(title, content)
values
	('First blog', 'This is my very first blog'),
	('Second blog', 'I am really enjoying writing blogs'),
	('Third blog', 'Okay, this is getting hard to maintain');
```

## Resources

- [Create a Supabase project](https://app.supabase.com/)
- [Supabase docs](https://supabase.com/docs)

Create a Supabase project

Supabase JS is an NPM package which provides a simple interface from JavaScript to our Supabase project. It allows us to query and mutate data using its Object Relational Mapping (ORM) syntax, and subscribe to realtime events.

In this video, we install the Supabase JS package and create a new client using our project's URL and Anon Key. These can be found in the Supabase dashboard for our project, under `Settings > API`.

We store these values as secrets in our Cloudflare account, and use them to instantiate a new Supabase client.

Additionally, we write a query to select all of our articles from our Supabase instance, and send them back as the response from our Cloudflare Worker.

In order to send a JSON response, we first stringify the object we get back from Supabase, and then set a `Content-Type` header to notify the browser that this will be a type of `application/json`.

## Code Snippets

**Install Supabase JS**

```bash
npm i @supabase/supabase-js
```

**Create a Cloudflare secret**

```bash
npx wrangler secret put NAME
```

**Add a secret for SUPABASE_URL**

```bash
npx wrangler secret put SUPABASE_URL
```

**Run wrangler development server**

```bash
npx wrangler dev
```

**Add a secret for SUPABASE_ANON_KEY**

```bash
npx wrangler secret put SUPABASE_ANON_KEY
```

**Query data from Supabase**

```javascript
const { data } = await supabase.from("articles").select("*");
```

**Send JSON response**

```javascript
return new Response(JSON.stringify(data), {
  headers: {
    "Content-Type": "application/json",
  },
});
```

## Resources

- [Selecting data with Supabase JS](https://supabase.com/docs/reference/javascript/select)
- [Introducing Secrets and Environment Variables to Cloudflare Workers](https://blog.cloudflare.com/workers-secrets-environment/)
- [Cloudflare docs for sending JSON responses](https://developers.cloudflare.com/workers/examples/return-json/)

Query Supabase from Cloudflare Worker

Itty Router is a tiny router package that has a similar API to Express. In this video, we install Itty Router and the Extras packages.

Additionally, we refactor our existing worker to use the router, and declare a dynamic route to fetch a single article.

To handle paths and articles that don't exist, we add a catch all route that returns a 404 status.

Lastly, we use the `json` helper to automatically stringify JSON objects and set the `Content-Type` header for `application/json`.

## Code Snippets

**Install Itty Router and extras**

```bash
npm i itty-router itty-router-extras
```

**Run wrangler development server**

```bash
npx wrangler dev
```

**GET route for all articles**

```javascript
router.get(
  "/articles",
  async (request, { SUPABASE_URL, SUPABASE_ANON_KEY }) => {
    const supabase = createClient(SUPABASE_URL, SUPABASE_ANON_KEY);

    const { data } = await supabase.from("articles").select("*");
    return json(data);
  }
);
```

**GET route for one article**

```javascript
router.get(
  "/articles/:id",
  async (request, { SUPABASE_URL, SUPABASE_ANON_KEY }) => {
    const supabase = createClient(SUPABASE_URL, SUPABASE_ANON_KEY);
    const { id } = request.params;

    const { data } = await supabase
      .from("articles")
      .select("*")
      .match({ id })
      .single();

    if (!data) {
      return status(404, "Not found");
    }

    return json(data);
  }
);
```

**Catch all route for 404**

```javascript
router.all("*", () => status(404, "Not found"));
```

## Resources

- [Itty Router repo](https://github.com/kwhitley/itty-router)
- [Itty Router Extras repo](https://github.com/kwhitley/itty-router-extras)

Proxy Supabase requests with Cloudflare Workers and Itty Router

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**

```bash
npx wrangler kv:namespace create "ARTICLES"
```

**Create a preview KV Store**

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

**Bind KV to Cloudflare Worker**

```toml
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**

```bash
npx wrangler dev
```

## Resources

- [How KV works](https://developers.cloudflare.com/workers/learning/how-kv-works/)
- [KV Storage docs](https://developers.cloudflare.com/workers/runtime-apis/kv/)

Bind a KV store to Cloudflare Worker

KV Storage is a read-optimized, eventually consistent cache that can be accessed from Cloudflare Workers. The interface for reading and writing is similar to `localStorage` in the browser.

In this lesson, we create a `read-kv` route for reading from the KV store. This automatically gets passed any KV stores that have been bound to the Cloudflare Worker. Initially, the store is empty, so returns the value `null`.

Additionally, we create a `write-kv` route to populate the store with test data.

To reduce the overhead of stringifying and parsing JSON objects, we create two helper functions to easily read and write values to any KV store.

Lastly, we publish a production version of our Cloudflare Worker, to confirm that writing these value locally - to our preview store - does not affect our production store.

## Code Snippets

**readFrom helper function**

```javascript
export const readFrom = async (cache, path) => {
  const data = await cache.get(path);
  return JSON.parse(data);
};
```

**writeTo helper function**

```javascript
export const writeTo = async (cache, path, data) => {
  await cache.put(path, JSON.stringify(data));
};
```

**Read KV route**

```javascript
router.get("/read-kv", async (request, { ARTICLES }) => {
  const articles = await readFrom(ARTICLES, "/articles");
  return json(articles);
});
```

**Write KV route**

```javascript
router.get("/write-kv", async (request, { ARTICLES }) => {
  const articles = [{ title: "test3" }, { title: "test4" }];
  await writeTo(ARTICLES, "/articles", articles);

  return json(articles);
});
```

**Publish Cloudflare Worker**

```bash
npx wrangler publish
```

**Run wrangler development server**

```bash
npx wrangler dev
```

## Resources

- [Wrangler CLI docs](https://developers.cloudflare.com/workers/wrangler/commands/)
- [KV Storage docs](https://developers.cloudflare.com/workers/runtime-apis/kv/)

Read and write KV Storage cache from Cloudflare Worker

KV Storage allows us to cache a value as close as possible to our Cloudflare Worker. The first time a user navigates to a route, we don't have the data in the cache, so we need to make a request to the Supabase origin server.

This server could be on the other side of the world and take a long time to respond. Therefore, if we cache the response we get back for a particular route, there is no need to make an additional request to the origin.

In this lesson, we implement cache-aware routes for fetching many articles or a single article. This first checks whether we have the cached value, and sends it back immediately if we do. If not, it will make a request for fresh data from Supabase, and cache the response for the next visitor.

Additionally, we simulate what a slow request might be like, as we might not experience this with super fast computers geographically close to our hosting servers.

## Code Snippets

**Cache-aware many articles route**

```javascript
router.get(
  "/articles",
  async (request, { SUPABASE_URL, SUPABASE_ANON_KEY, ARTICLES }) => {
    const cachedArticles = await readFrom(ARTICLES, "/articles");

    if (cachedArticles) {
      console.log("sending the cache");
      return json(cachedArticles);
    }

    console.log("fetching fresh articles");

    const supabase = createClient(SUPABASE_URL, SUPABASE_ANON_KEY);

    const { data } = await supabase.from("articles").select("*");
    await writeTo(ARTICLES, "/articles", data);
    return json(data);
  }
);
```

**Cache-aware one article route**

```javascript
router.get(
  "/articles/:id",
  async (request, { SUPABASE_URL, SUPABASE_ANON_KEY, ARTICLES }) => {
    const { id } = request.params;
    const cachedArticle = await readFrom(ARTICLES, `/articles/${id}`);

    if (cachedArticle) {
      console.log("sending the cache");
      return json(cachedArticle);
    }

    console.log("fetching fresh article");

    const supabase = createClient(SUPABASE_URL, SUPABASE_ANON_KEY);

    const { data } = await supabase
      .from("articles")
      .select("*")
      .match({ id })
      .single();

    await writeTo(ARTICLES, `/articles/${id}`, data);

    return json(data);
  }
);
```

**Simulate 3 second delay**

```javascript
const data = await new Promise((resolve) => {
  setTimeout(async () => {
    const { data } = await supabase.from("articles").select("*");
    resolve(data);
  }, 3000);
});
```

**Delete key from KV Store**

```bash
npx wrangler kv:key delete --binding=ARTICLES '/articles' --preview
```

**Run wrangler development server**

```bash
npx wrangler dev
```

## Resources

- [Supabase.js docs](https://github.com/supabase/supabase-js)
- [Wrangler CLI docs](https://developers.cloudflare.com/workers/wrangler/commands/)
- [KV Storage docs](https://developers.cloudflare.com/workers/runtime-apis/kv/)

Cache Supabase response at the Edge with KV storage

Cache Busting or Invalidation, is the process of clearing stale data from a cache. After the first request, the response data from Supabase is cached in our KV store, and never fetched again. This means if data in the database changes, our KV store will never be updated.

In this lesson, we create a `revalidate` route, which fetches fresh data from Supabase and updates the cache.

## Code Snippets

**Revalidate cache for articles route**

```javascript
router.get(
  "/revalidate",
  async (request, { SUPABASE_URL, SUPABASE_ANON_KEY, ARTICLES }) => {
    const supabase = createClient(SUPABASE_URL, SUPABASE_ANON_KEY);
    const { data: articles } = await supabase.from("articles").select("*");
    await writeTo(ARTICLES, "/articles", articles);
    return json({ received: true });
  }
);
```

**Run wrangler development server**

```bash
npx wrangler dev
```

## Resources

- [Supabase.js docs](https://github.com/supabase/supabase-js)
- [Wrangler CLI docs](https://developers.cloudflare.com/workers/wrangler/commands/)
- [KV Storage docs](https://developers.cloudflare.com/workers/runtime-apis/kv/)

Cache-busting with Cloudflare KV stores and Supabase

Handling revalidation of a particular article requires us to pass through an ID as part of the request's body. Therefore, we need to change this from a GET request to a POST request and use the `withContent` middleware to parse the request's body into a JSON object.

Additionally, we fetch data for this specific article from Supabase, using its ID, and update the cache for that path.

We can no longer test this using a browser, as it can only send GET requests. Therefore, we use a VS Code extension called Thunder Client to make the POST request and pass along the article's ID in the request's body.

## Code Snippets

**Update Revalidate route for single article**

```javascript
router.post(
  "/revalidate",
  withContent,
  async (request, { SUPABASE_URL, SUPABASE_ANON_KEY, ARTICLES }) => {
    const { id } = request.content;
    const supabase = createClient(SUPABASE_URL, SUPABASE_ANON_KEY);

    const { data: article } = await supabase
      .from("articles")
      .select("*")
      .match({ id })
      .single();
    await writeTo(ARTICLES, `/articles/${id}`, article);

    const { data: articles } = await supabase.from("articles").select("*");
    await writeTo(ARTICLES, "/articles", articles);

    return json({ received: true });
  }
);
```

**Run wrangler development server**

```bash
npx wrangler dev
```

## Resources

- [Supabase.js docs](https://github.com/supabase/supabase-js)
- [Wrangler CLI docs](https://developers.cloudflare.com/workers/wrangler/commands/)
- [KV Storage docs](https://developers.cloudflare.com/workers/runtime-apis/kv/)
- [Thunder Client VS Code extension](https://marketplace.visualstudio.com/items?itemName=rangav.vscode-thunder-client)

Revalidate stale data by ID

Supabase Function Hooks allow us to subscribe to change events in the database - such as `insert`, `update` and `delete` - and make a HTTP request with the changed data.

In this lesson, we refactor our `revalidate` route to handle inserts, updates and deletes.

Additionally, we create a Function Hook to subscribe to all change events on the `articles` table, and automatically send a POST request to the `revalidate` route of our Cloudflare Worker.

This automatically refreshes the KV store anytime a value is changed in the database, and decouples the revalidation of our cache, from our user requesting data. This means, theoretically, users should never have to wait for a request to the Supabase origin server, as the cache is automatically populated, updated and cleared to remain in sync with the database.

## Code Snippets

**Update Revalidate route to handle insert, update and delete**

```javascript
router.post(
  "/revalidate",
  withContent,
  async (request, { SUPABASE_URL, SUPABASE_ANON_KEY, ARTICLES }) => {
    const { type, record, old_record } = request.content;
    const supabase = createClient(SUPABASE_URL, SUPABASE_ANON_KEY);

    if (type === "INSERT" || type === "UPDATE") {
      await writeTo(ARTICLES, `/articles/${record.id}`, record);
    }

    if (type === "DELETE") {
      await ARTICLES.delete(`/articles/${old_record.id}`);
    }

    const { data: articles } = await supabase.from("articles").select("*");
    await writeTo(ARTICLES, "/articles", articles);

    return json({ received: true });
  }
);
```

**Run wrangler development server**

```bash
npx wrangler dev
```

**Publish Cloudflare Worker with Wrangler CLI**

```bash
npx wrangler publish
```

## Resources

- [Supabase Functions blog](https://supabase.com/blog/2021/07/30/supabase-functions-updates#function-hooks-alpha)
- [Supabase.js docs](https://github.com/supabase/supabase-js)
- [Wrangler CLI docs](https://developers.cloudflare.com/workers/wrangler/commands/)
- [KV Storage docs](https://developers.cloudflare.com/workers/runtime-apis/kv/)

Automatically revalidate KV Store cache on change with Database Webhooks in Supabase

The `waitUntil` function allows us to continue performing work in our Cloudflare Worker, after a response has been sent back to the client.

In this lesson, we modify the `revalidate` route to send a response immediately, and then continue on to fetch new data and refresh our KV store.

Finally, we use the Thunder Client extension to simulate a POST request to the `revalidate` route, and confirm that this receives a response before the cache is updated.

## Code Snippets

**Update Revalidate route to respond immediately**

```javascript
router.post(
  "/revalidate",
  withContent,
  async (request, { SUPABASE_URL, SUPABASE_ANON_KEY, ARTICLES }, context) => {
    const updateCache = async () => {
      const { type, record, old_record } = request.content;
      const supabase = createClient(SUPABASE_URL, SUPABASE_ANON_KEY);

      if (type === "INSERT" || type === "UPDATE") {
        await writeTo(ARTICLES, `/articles/${record.id}`, record);
      }

      if (type === "DELETE") {
        await ARTICLES.delete(`/articles/${old_record.id}`);
      }

      const { data: articles } = await supabase.from("articles").select("*");
      await writeTo(ARTICLES, "/articles", articles);
      console.log("updated cache");
    };

    context.waitUntil(updateCache());

    console.log("sending response");

    return json({ received: true });
  }
);
```

**Run wrangler development server**

```bash
npx wrangler dev
```

## Resources

- [Cloudflare waitUntil docs](https://developers.cloudflare.com/workers/runtime-apis/scheduled-event/)
- [Supabase.js docs](https://github.com/supabase/supabase-js)
- [Wrangler CLI docs](https://developers.cloudflare.com/workers/wrangler/commands/)
- [KV Storage docs](https://developers.cloudflare.com/workers/runtime-apis/kv/)
- [Thunder Client VS Code extension](https://marketplace.visualstudio.com/items?itemName=rangav.vscode-thunder-client)

Use waitUntil to perform work after Cloudflare Worker returns response

Follow along with Kristian Freeman as you build a localization engine that renders data based on the Edge location nearest to the application's user.

Introduction to Cloudflare Workers

Learn how to read and write data that's stored on Cloudflare's global cloud network with Workers KV.

Build Data-Driven Applications on the Edge with Workers and Workers KV

You'll build a static app with authentication that is backed by a database, change the structure of that database without compromising data, and take payments for subscriptions.

Cache Supabase data at the Edge with Cloudflare Workers and KV Storage

Jon Meyers

Free Community Resource

You might also like these resources:

Introduction to Cloudflare Workers

Build Data-Driven Applications on the Edge with Workers and Workers KV

Build a SaaS product with Next.js, Supabase and Stripe

Credits

Free Community Resource

Course Content

You might also like these resources:

Introduction to Cloudflare Workers

Build Data-Driven Applications on the Edge with Workers and Workers KV

Build a SaaS product with Next.js, Supabase and Stripe