Cloudflare Serverless Stack Setup

This post is about setting up a serverless web application stack using cloudflare services. For this basic project I’ll implement an authentication layer, a CRUD API and a basic frontend.

Complete code can be found here

Stack

• Database: Workers KV
• Backend: CLoudflare Worker
• Frontend: ReactJS
• Platform: Cloudflare/Serverless

Setup Auth0 and Cloudflare

Using official docs

React Frontend

Create React app

npx create-react-app sz-ui --template redux

Do cleanup

Follow Steps

Install MUI

• Instructions
• Setup theme

Routing

npm install react-router-dom --save

Project Structure

├── selfzine-ui
│   ├── package-lock.json
│   ├── package.json
│   ├── public
│   └── src
└── selfzine-worker
    ├── README.md
    ├── package-lock.json
    ├── public
    ├── workers-site
    └── wrangler.toml

Worker Site Frontend

UI build output will be part of the worker site public directory.

{
  "name": "sz-ui",
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build && rm -rf ../selfzine-worker/public/ && mv build ../selfzine-worker/public/",
  },
}