https://github.com/technicalparadox/reactvitemuicfworkerts-template
A template repository that has basic setup for React/Vite, mui/material css framework, CF worker backend in typescript. Features dynamic cors policy for backend and baseUrl for frontend to aid in local development.
https://github.com/technicalparadox/reactvitemuicfworkerts-template
cf-workers materialui react typescript vite
Last synced: 3 months ago
JSON representation
A template repository that has basic setup for React/Vite, mui/material css framework, CF worker backend in typescript. Features dynamic cors policy for backend and baseUrl for frontend to aid in local development.
- Host: GitHub
- URL: https://github.com/technicalparadox/reactvitemuicfworkerts-template
- Owner: TechnicalParadox
- Created: 2024-09-06T23:09:51.000Z (9 months ago)
- Default Branch: master
- Last Pushed: 2024-09-06T23:23:47.000Z (9 months ago)
- Last Synced: 2025-01-17T04:11:13.273Z (4 months ago)
- Topics: cf-workers, materialui, react, typescript, vite
- Language: TypeScript
- Homepage:
- Size: 70.3 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
## Vite/React, MUI/Material v6, 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 Material UI v6 toggleable 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.