Learn Angularfire, Asp-net and Cloudflare

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

Build a Serverless API with Cloudflare Workers

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

Introduction to Cloudflare Workers

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! 

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

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

AngularJS is an open-source JavaScript framework, maintained by Google, that assists with running single-page applications. Its goal is to augment web-based applications with model–view–controller (MVC) capability, in an effort to make both development and testing easier.

angularjs

Firebase provides a real-time syncing backend for your AngularJS applications in very few lines of code. In this lesson, you'll learn how to get started integrating it into your app.

Get Started with Firebase and AngularFire

ASP.NET is an open source web framework for building modern web apps and services with .NET. ASP.NET creates websites based on HTML5, CSS, and JavaScript that are simple, fast, and can scale to millions of users.

asp-net

If you want to improve a REST API beyond GET/POST&PUT and DELETE the next step would be adding the push functionality to send new data into your web applications. With ASP.NET Core and SignalR you can add this functionality with ease and keep your application up to date without letting the clients reloading their page manually.

[signalr npm](https://www.npmjs.com/package/@aspnet/signalr), [signalr Core](https://www.nuget.org/packages/Microsoft.AspNetCore.SignalR.Core/)

[archived] Expose Values for Real-time Consumption with SignalR in ASP.NET Core

ASP.NET Core SignalR can push events from the server into your Client Application. In this video we will build a client side Todo app with Angular which consumes events from a ASP.NET Core SignalR backend to see how we can consume and synchronize data between our client side Angular Applications.

Consume ASP.NET Core SignalR values in an Angular Application

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

Providing real time information to your Javascript apps with [ASP.NET Core SignalR](https://www.npmjs.com/package/@microsoft/signalr). With ASP.NET Core and SignalR you can add real time functionality with ease and keep your application up to date without letting the clients reloading their page manually.

Expose Values for Real-time Consumption with SignalR in ASP.NET Core

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.

Search

Search Results