Skip to content

A template for using React/Vite, MDUI, and CF Workers in Typescript

Notifications You must be signed in to change notification settings

TechnicalParadox/ReactViteMduiCfWorkerTs-Template

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

2 Commits
 
 
 
 
 
 

Repository files navigation

Vite/React, MDUI, Cloudflare Worker, TS Template

  1. npm install in both frontend and backend folders.
  2. Create backend/.dev.vars and set environment="development"
  3. Adjust name of backend worker in .wrangler.toml
  4. Adjust names in frontend and backend package.json
  5. Adjust domains in frontend/src/helpers/environment_detection.ts and in backend/src/index.ts to be actual site domains, development domains should work as is.
  6. In frontend, npm run dev to start vite development server
  7. In backend, npx wrangler init to start cf wroker development server
  8. You now have a basic Vite/React site with MDUI toggleable auuto/light/dark theme and Cloudflare worker integration!

Packages: Hono, Oslo, @mui/material, react, etc.

The CF worker has a Cors policy that allows requests from localhost when in development and prodDomains in production. The frontend has a baseUrl constant to automatically adjust fetches to the cloudflare worker based on local development/production environment. The frontend also has a isDev constant to detect devMode, which can be used for only console logging in devMode.