🚀 Project Overview
I recently built Divines Code, a modern Single Page Application (SPA) for a digital agency.
The goal was to use the latest React ecosystem while deploying globally at the edge using Cloudflare Workers.
This post breaks down the tech stack, architecture, and deployment approach.
🧰 Tech Stack
React 19 (experimental)
Vite 6
TypeScript
Tailwind CSS v4
React Router DOM v7
Cloudflare Workers (Wrangler)
🏗️ Architecture
The app is a client-side rendered SPA.
Vite builds the app into a static dist/ folder
A Cloudflare Worker serves static assets
If a route isn’t found, the Worker falls back to index.html
React Router handles routing on the client
This allows fast edge delivery without a traditional server.
🧭 Routing Strategy
Uses HashRouter for compatibility with static hosting
Routes include:
/ Home
/about
/services
/work
/contact
A ScrollToTop component resets scroll on navigation
⚡ Performance Optimizations
Pages are lazy-loaded using React.lazy and Suspense
Custom loading spinner improves UX
Tailwind CSS keeps styles lightweight and consistent
☁️ Cloudflare Worker Setup
The Worker:
Serves assets from ./dist
Handles SPA fallback routing
Adds security headers:
X-Content-Type-Options
X-Frame-Options
Controls caching via Cache-Control
This keeps the app fast and secure at the edge.
📁 Project Structure
components/ reusable UI components
pages/ route-based pages
src/worker.ts Cloudflare Worker entry
App.tsx routing setup
🧠 Final Thoughts
This setup turned out to be:
⚡ Fast
🌍 Globally distributed
🧼 Clean to maintain
If you’re experimenting with React 19 or deploying SPAs on Cloudflare Workers, I’d love to hear your experience.
Top comments (0)