https://github.com/technicalparadox/reactvitemduicfworkerts-template
A template for using React/Vite, MDUI, and CF Workers in Typescript
https://github.com/technicalparadox/reactvitemduicfworkerts-template
cloudflare material-you mdui react serverless typescript vite workers
Last synced: about 2 months ago
JSON representation
A template for using React/Vite, MDUI, and CF Workers in Typescript
- Host: GitHub
- URL: https://github.com/technicalparadox/reactvitemduicfworkerts-template
- Owner: TechnicalParadox
- Created: 2024-09-08T22:32:26.000Z (9 months ago)
- Default Branch: main
- Last Pushed: 2024-09-08T22:37:06.000Z (9 months ago)
- Last Synced: 2025-03-30T20:18:06.744Z (about 2 months ago)
- Topics: cloudflare, material-you, mdui, react, serverless, typescript, vite, workers
- Language: TypeScript
- Homepage:
- Size: 64.5 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
## Vite/React, MDUI, Cloudflare Worker, TS Template
0. `npm install` in both frontend and backend folders.
1. Create `backend/.dev.vars` and set `environment="development"`
2. Adjust name of backend worker in .wrangler.toml
3. Adjust names in frontend and backend package.json
4. 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.
5. In frontend, `npm run dev` to start vite development server
6. In backend, `npx wrangler init` to start cf wroker development server
7. 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.