Introduction to Build a Serverless API with Cloudflare Workers

Set up a New Cloudflare Workers Project with wrangler

Process Incoming Request Data Using the Request Class in Workers

Make API Requests in a Workers Function Using the Fetch API

Use Workers Secrets to Securely Store API Credentials

Transform and Return JSON Data From an API in Cloudflare Workers

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

Render Data from a Workers API Response in a React Application

Deploy a React Application Using Cloudflare Pages

Secure an API with Access-Control-Allow-Headers

Build a Serverless API with Cloudflare Workers

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.

https://app.egghead.io/api/v1/lessons/cloudflare-deploy-a-react-application-using-cloudflare-pages/subtitles

Instructor: [0:00] With our React application written, it's now time to deploy our user interface in the same way that we deployed our Workers serverless function. To do that, we're going to deploy to Cloudflare Pages, which recently launched an open beta.

[0:11] Cloudflare Workers is a place where you can deploy your serverless functions, and Cloudflare Pages is a place where you can deploy your JAMstack or static applications. That includes things like React, Gatsby, Next.js and any other tool that you've seen people talking about in the last couple of years.

[0:27] Let's use Pages to deploy our React application and to live on the edge in the same way that our Workers serverless functions do. To do this, I'll go to Get started. You can see that I need to sign in with my Cloudflare account. Once I've done that, I'll get sent to the Pages UI. You can see, of course, I already have a lot of Pages applications set up.

[0:45] If you haven't set up your Pages account yet, you'll be able to join and then login with GitHub, which is what we'll use to deploy our applications. In order to deploy our interface, we need to push it up to GitHub. Here, I've gone to github.com/new. I'm going to setup a new repository. I'll call this serverless-api-viewer, since our Workers function was called serverless-api. I'm going to skip all the stuff here and say, create repository.

[1:13] You can see that there are commands here that I can run to setup a Git project and push it. I'm going to take this code. I'm going to copy it here. I'm going to paste it in. You can see that it's created a commit. It's pushed it to github.com:signalnerve/serverless-api-viewer.

[1:28] If I come back to GitHub, you can see it's pushed my first commit, Getting Started with Create React App. It just has this README here. Now, I'm going to add the rest of the content from my project. I'll say, git add period, which says add all of the files that are in my repository. Then, I'm going to commit it using git commit -m to give it a message. I'm going to say, add content.

[1:53] Last, but not the least, I'll run git push, which is going to push that new commit up to GitHub. If I refresh my GitHub repository, you can see all of the contents of this project are now on GitHub. To add this to Pages, I'm going to Create a project. You can see I've already connected to my GitHub account.

[2:10] Though if you haven't done this, you'll be able to setup access to friends since your GitHub account or any organizations that you work with. In this case, I want to grab this first repository. It's sorted by whatever I've used most recently.

[2:23] I want to grab serverless-api-viewer and say, begin setup. All of these defaults here are fine. This will be serverless-api-viewer. The branch here is main. Down at build settings, I want to select Create React App as my Framework preset.

[2:38] This will provide the command that I need both to build the application, and then where that static output of that application is served from. I'll click save and deploy, and pages will get started deploying my application.

[2:51] Just a few minutes later, our pages deploy is completed and we now have a unique URL that we can use to look at this project in production. Serverlessapiviewer.pages.div. Let's click on that and take a look.

[3:02] Just like it looked when we ran it locally, you can see it's deployed but we now have it in a production state. In a few minutes, we've deployed our React application to Cloudflare's edge network very similar to how we deployed our Cloudflare workers serverless function.

[3:16] In addition, every time that we push a new commit to GitHub, we'll also get up-to-date deploys to our pages.div domain. You'll never have to worry about manually deploying your pages project. You'll just have the most recent version at all times.

Deploy a React Application Using Cloudflare Pages

Share this video with your friends

Course

Build a Serverless API with Cloudflare Workers