Learn to model real-world scenarios in actual relational databases, understand how to manage real-time data, and leverage key functionality provided by Supabase.

Kristian Freeman

Build a Real-Time Data Syncing Chat Application with Supabase and Next.js

You will learn how to build and deploy a Serverless API with Cloudflare Workers. Enabling you to effectively manage a highly available backend for your projects. 

Build a Serverless API with Cloudflare Workers

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

 Courses from Kristian Freeman

Cloudflare Workers let you write JavaScript Service Workers that run directly in Cloudflare's 200+ edge locations around the world.

With a Cloudflare Worker, you can modify your site's HTTP requests and responses, make parallel requests, and even reply directly from the edge.

Cloudflare Workers are written against a similar API to the W3C Service Workers standard. However, while Service Workers run inside the end user's browser, Cloudflare Workers run on Cloudflare's servers. This means that Cloudflare Workers can implement trusted code (which the client cannot tamper with), and will work no matter what browser the user is running.

In this course, Kristian Freeman will teach you how to build and deploy a Serverless API with Cloudflare Workers. By learning how to build your own serverless JSON APIs, you can effectively manage a highly-available backend for your projects, without needing to learn DevOps or manage services.

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

Cloudflare Workers is a serverless application platform that enables you to create and deploy functions to Cloudflare's Edge Network.

Unlike other serverless providers that only have regional data centers, Cloudflare's Edge Network consists of hundreds of servers all over the world.

Cloudflare Workers is a powerful platform, and this course serves as a great introduction for what it can do.

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.

After this course, you'll be ready to start experimenting with your own Cloudflare Workers projects. *Need an idea?* *[Check out the suggested Portfolio Project for this course.](https://egghead.io/projects/introduction-to-cloudflare-workers)*

The Edge is one of the most exciting new topics in web development. At the front of the pack is Cloudflare, whose network boasts servers located in hundreds of cities all over the world instead of in regions like "East" or "West".

More servers in more locations mean a faster experience for your users.

But what about the data part of the equation?

If the application you're working on skews more toward "reading" rather than "writing" data, Cloudflare Workers KV is a perfect fit.

Once you create a KV namespace— the "KV" stands for "key-value"— Cloudflare keeps track of your application data. The most commonly accessed data will be propagated around the world to the various Edge servers, while less popular data will be stored in more central locations.

Kristian Freeman has produced courses that introduce how to build and deploy sites and JSON APIs powered by Cloudflare Workers.

Today, he will show you how Workers KV can be integrated into a Cloudflare Workers project through building a Todo App.

## The Project

![todo-app-screenshot](https://res.cloudinary.com/dg3gyk0gu/image/upload/v1639014074/course-resources/Build-data-driven-applications-on-the-edge-with-Workers-and-Workers-KV/CleanShot_2021-12-08_at_16.46.39_2x.png)

Before you groan about a bland Todo App, think about it this way: 

The Todo App is the perfect example of the CRUD operations. Cloudflare KV has its own nuances for reading and writing data through a concept called Binding that is easier to grok when you understand the larger example as a whole.

As the course progresses, Kristian shares examples of how you can store more complex key-values, along with data operations like editing and filtering.

One of the coolest features that Cloudflare KV allows for is user-specific data that is tied to the IP address the request originates from. In other words, you'll be able to share your deployed Todo app with anyone around the world, and they will only see their personal items.

## **Gain these Skills**

- Manipulating data using Cloudflare Workers KV
- Make data unique to each user without logging in
- Effectively store lightweight data in Cloudflare Workers KV
- Setting up a key-value store and connected projects
- Reading and writing to a serverless key-value store
- Storing complex values in a Cloudflare KV store

## **Prerequisites**

You'll need to have a basic understanding of what Cloudflare Workers is recommended but not necessary. This course is relatively beginner-friendly into the world of Workers KV that you can get by with no knowledge on Cloudflare Workers. 

But if you want to get the most out of this course, we would recommend taking [Introduction to Cloudflare Workers](https://egghead.io/courses/introduction-to-cloudflare-workers-5aa3) to get a better understanding of how Workers KV comes into play. 

## **What's Next? (You might also like these resources:)**

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](https://egghead.io/courses/introduction-to-cloudflare-workers-5aa3) 

Learn how to build your own serverless APIs so you can manage a highly available backend for your projects. No Learning DevOps or managing services necessary. →  [Build a Serverless API with Cloudflare Workers](https://egghead.io/courses/build-a-serverless-api-with-cloudflare-workers-d67ca551)

Using Cloudflare Pages and Cloudflare Workers, it's easy to create dynamic front ends that you can deploy in just seconds from GitHub. → [Deploy Dynamic Frontend Applications with Cloudflare Pages](https://egghead.io/courses/deploy-dynamic-frontend-applications-with-cloudflare-pages-6aaa00a1)

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

JavaScript® (often shortened to JS) is a lightweight, interpreted, object-oriented language with first-class functions, most known as the scripting language for Web pages, but used in many non-browser environments as well such as node.js or Apache CouchDB. It is a prototype-based, multi-paradigm scripting language that is dynamic, and supports object-oriented, imperative, and functional programming styles.

javascript

Object.assign is a powerful JavaScript method that allows you to merge any number of JavaScript objects together.

Merge JavaScript Objects with Object.assign

To deploy a Cloudflare Workers serverless function, you'll need to sign up for a free Cloudflare Workers account at [workers.cloudflare.com](http://workers.cloudflare.com/), and select your unique workers.dev subdomain to deploy your functions to.

Create a Cloudflare Workers Account

Using NPM, you can install Cloudflare Workers' CLI (command-line interface), Wrangler, by typing `npm install -g @cloudflare/wrangler` into your command line. Wrangler allows you to generate and publish Cloudflare Workers projects. We'll also use the `wrangler login` command which will give you a link to authorize Wrangler. This will set up an API token specifically for your Wrangler installation that will allow you to publish and read all the Workers and Workers KV information that you need.

Install and Configure the Cloudflare Workers CLI Wrangler

Wranglers generate command, `wrangler generate`, allows you to create new Cloudflare Workers projects. Using the URL parameter, you can also generate new projects based on Cloudflare's starter templates, or open-source projects created by other developers, but for now, you will just use the default. To do this you'll only need to give it a name, for example, `wrangler generate my-worker`,  this will create a new project called my-worker. 

Generate New Cloudflare Workers Projects with Wrangler's generate Command

We'll take a look at the default code in `index.js` in a Workers project. We'll take a second to understand how it works before building the rest of our project. 

First will see what our Worker looks like in an actual browser by running `wrangler preview`. In a terminal, and we'll check out how Serverless functions in Cloudflare Workers listen for HTTPS requests via the "fetch" event and respond to them by creating and returning a new Response.

Write Your First Cloudflare Workers Serverless Function

Using `wrangler whoami` in a terminal we'll grab our account id so we can paste our id into the double quotes of `account_id = ""`  inside of `wrangler.toml` file. Using the `wrangler dev` command we can look at our Workers serverless function and test it before deploying it. Once we're ready to deploy, we can use the `wrangler publish` command to deploy it to our unique workers.dev subdomain.

Preview and Publish Your Cloudflare Workers Project

By updating the response body and setting a corresponding Content-Type header, we can render HTML pages from directly inside of our Cloudflare Workers function.

We will update our Cloudflare Worker to return a call to a template function that we define. That template function returns a string of HTML that we will render in the browser.

Render HTML Pages with Cloudflare Workers

Up until now, we've been rendering plain responses, not based on any information coming in with a request. The request.cf object sent with every incoming HTTP request to a Workers function has a ton of interesting information, including the regionality of the request, and which Cloudflare data center is responding to the request. Using this information, we'll render a dynamic HTML page based on where the user visiting our site is in the world.

Render Cloudflare Region Data for a Request Using request.cf

Deploying to your unique workers.dev subdomain is a great way to test your serverless functions before they're ready to go to production. Once you are ready to deploy to production, you can use Wrangler's environment feature to deploy to your zone, or Cloudflare-managed domain, by providing the "-e" (environment) flag when publishing.

You can check this worker out [here](https://hello-world-worker.signalnerve.com/).

Deploy to a Custom Domain with Cloudflare Wrangler Environments

The `Access-Control-Allow-Headers` response header is used in response to a preflight request which includes the `Access-Control-Request-Headers` to indicate which HTTP headers can be used during the actual request. 

In this lesson, we'll secure our API by building an allowlist of origins that can access our API, and update the CORS functionality in our code to adopt that allowlist when handling requests.

Secure an API with Access-Control-Allow-Headers

Cloudflare Pages is a JAMstack platform for frontend developers to collaborate and deploy websites. Cloudflare Pages is currently in open beta. 

In this lesson, we'll publish our frontend UI using Cloudflare Pages, Cloudflare's static site deployment tool.

Deploy a React Application Using Cloudflare Pages

In this lesson, we'll complete our React interface by taking the data from our Workers API and using it to render a collection of images, based on a search query.

Render Data from a Workers API Response in a React Application

CORS (Cross-Origin Resource Sharing) is a constraint of browser-based applications that provides extra security for APIs and servers. In this lesson, we'll set appropriate CORS headers for our Workers API, so that our frontend application is able to access it.

Add CORS Headers to a Third Party API Response in a Workers API

In this lesson, we'll parse the incoming data from Unsplash's API and transform it for our frontend client. Because Cloudflare Workers is serving as "middleware" - in-between the Unsplash API and our frontend client we'll build shortly - we can use it to format or simplify data coming through it that our client doesn't care about. We'll also use the Response class to return a JSON response from our API. JSON responses need to be formatted in a specific way to be able to be parsed by clients, so we'll look at the various pieces of a Response (body and headers) and how they work together to represent a JSON response.

Transform and Return JSON Data From an API in Cloudflare Workers

In this lesson, we'll use Workers Secrets to store our API credentials for Unsplash, an image API. This will allow us to safely deploy our application and publish it on GitHub without revealing any private keys or API tokens.

Use Workers Secrets to Securely Store API Credentials

In this lesson, we'll use the fetch API to make requests inside of our Workers function to other servers and websites online. We'll learn about the different parameters and options that the fetch API takes to configure your requests and the data you can send along with it.

In this course, we'll use the Unsplash API to learn how to make API requests from Cloudflare Workers. If you haven't already created an account, you can do so at [https://unsplash.com/developers](https://unsplash.com/developers).

Make API Requests in a Workers Function Using the Fetch API

In this lesson, we'll explore the Request class in Workers, and how it can be used to handle incoming data sent to an API. We'll also use a command-line tool to simulate how our API will be used by browsers.

Process Incoming Request Data Using the Request Class in Workers

In this lesson, we'll install Wrangler, the Workers command-line tool. We'll then create a new Cloudflare Workers project using Wrangler, configure it, and then publish it.

Kristian Freeman

Build a Real-Time Data Syncing Chat Application with Supabase and Next.js

Featured Courses

Build a Serverless API with Cloudflare Workers

Introduction to Cloudflare Workers

Search Results

Build a Serverless API with Cloudflare Workers

Introduction to Cloudflare Workers

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

Merge JavaScript Objects with Object.assign

Create a Cloudflare Workers Account

Install and Configure the Cloudflare Workers CLI Wrangler

Generate New Cloudflare Workers Projects with Wrangler's generate Command

Write Your First Cloudflare Workers Serverless Function

Preview and Publish Your Cloudflare Workers Project

Render HTML Pages with Cloudflare Workers

Render Cloudflare Region Data for a Request Using request.cf

Deploy to a Custom Domain with Cloudflare Wrangler Environments

Secure an API with Access-Control-Allow-Headers

Deploy a React Application Using Cloudflare Pages

Render Data from a Workers API Response in a React Application

Add CORS Headers to a Third Party API Response in a Workers API

Transform and Return JSON Data From an API in Cloudflare Workers

Use Workers Secrets to Securely Store API Credentials

Make API Requests in a Workers Function Using the Fetch API

Process Incoming Request Data Using the Request Class in Workers

Set up a New Cloudflare Workers Project with wrangler