@@ -85,7 +85,7 @@ export default {
8585 * Application source directory
8686 * @default ' app'
8787 */
88- appDirectory: ' src/ app' ,
88+ appDirectory: ' app' ,
8989
9090 /**
9191 * Base URL path
@@ -346,7 +346,24 @@ export default defineConfig({
346346});
347347` ` `
348348
349- 2. **Create Worker Entry** (` server/ app .ts ` ):
349+ 2. **Configure Wrangler** (` wrangler .toml ` ):
350+ ` ` ` toml
351+ workers_dev = true
352+ name = " my-react-router-worker"
353+ compatibility_date = " 2024-11-18"
354+ main = " ./build/server/static/js/app.js"
355+ assets = { directory = " ./build/client/" }
356+
357+ [vars]
358+ VALUE_FROM_CLOUDFLARE = " Hello from Cloudflare"
359+
360+ # Optional build configuration
361+ # [build]
362+ # command = " npm run build"
363+ # watch_dir = " app"
364+ ` ` `
365+
366+ 3. **Create Worker Entry** (` server/ app .ts ` ):
350367` ` ` ts
351368import { createRequestHandler } from ' react-router' ;
352369
@@ -382,27 +399,9 @@ export default {
382399} satisfies ExportedHandler< CloudflareEnvironment> ;
383400` ` `
384401
385- 3. **Configure Wrangler** (` wrangler .toml ` ):
386- ` ` ` toml
387- workers_dev = true
388- name = " my-react-router-worker"
389- compatibility_date = " 2024-11-18"
390- main = " ./build/server/static/js/app.js"
391- assets = { directory = " ./build/client/" }
392-
393- [vars]
394- VALUE_FROM_CLOUDFLARE = " Hello from Cloudflare"
395- ` ` `
396-
397- 4. **Update Package Scripts** (` package .json ` ):
402+ 4. **Update Package Dependencies**:
398403` ` ` json
399404{
400- " scripts" : {
401- " build" : " rsbuild build" ,
402- " deploy" : " npm run build && wrangler deploy" ,
403- " dev" : " rsbuild dev" ,
404- " start" : " wrangler dev"
405- },
406405 " dependencies" : {
407406 " @react-router/node" : " ^7.1.3" ,
408407 " @react-router/serve" : " ^7.1.3" ,
@@ -417,6 +416,45 @@ VALUE_FROM_CLOUDFLARE = "Hello from Cloudflare"
417416}
418417` ` `
419418
419+ 5. **Setup Deployment Scripts** (` package .json ` ):
420+ ` ` ` json
421+ {
422+ " scripts" : {
423+ " build" : " rsbuild build" ,
424+ " deploy" : " npm run build && wrangler deploy" ,
425+ " dev" : " rsbuild dev" ,
426+ " start" : " wrangler dev"
427+ }
428+ }
429+ ` ` `
430+
431+ ### Key Configuration Notes:
432+
433+ - The ` workers_dev = true ` setting enables deployment to workers.dev subdomain
434+ - ` main` points to your Worker's entry point in the build output
435+ - ` assets` directory specifies where your static client files are located
436+ - Environment variables can be set in the ` [vars]` section
437+ - The ` compatibility_date` should be kept up to date
438+ - TypeScript types are provided via ` @cloudflare/ workers- types`
439+ - Development can be done locally using ` wrangler dev`
440+ - Deployment is handled through ` wrangler deploy`
441+
442+ ### Development Workflow:
443+
444+ 1. Local Development:
445+ ` ` ` bash
446+ # Start local development server
447+ npm run dev
448+ # or
449+ npm start
450+ ` ` `
451+
452+ 2. Production Deployment:
453+ ` ` ` bash
454+ # Build and deploy
455+ npm run deploy
456+ ` ` `
457+
420458## Development
421459
422460The plugin automatically:
0 commit comments