{"_id":"@10xsai/cloudflare-router-nx-plugin","name":"@10xsai/cloudflare-router-nx-plugin","dist-tags":{"latest":"1.0.0"},"versions":{"1.0.0":{"name":"@10xsai/cloudflare-router-nx-plugin","version":"1.0.0","description":"Nx plugin for creating React Router apps with Cloudflare setup","main":"dist/index.js","types":"dist/index.d.ts","type":"commonjs","scripts":{"build":"tsc && npm run copy-files","copy-files":"cp -r src/generators/app/files dist/generators/app/ && cp generators.json dist/ && cp executors.json dist/","prepare":"npm run build","test":"node test-plugin.js","prepublishOnly":"npm run build && npm test","version":"npm run build","postversion":"git push && git push --tags"},"keywords":["nx","plugin","react","router","cloudflare","workers","pages","nx-plugin","react-router","cloudflare-pages","cloudflare-workers"],"author":{"name":"Sai Krishna Gottipalli","url":"10xsai"},"license":"MIT","repository":{"type":"git","url":"git+https://github.com/10xsai/cloudflare-router-nx-plugin.git"},"homepage":"https://github.com/10xsai/cloudflare-router-nx-plugin#readme","bugs":{"url":"https://github.com/10xsai/cloudflare-router-nx-plugin/issues"},"engines":{"node":">=18.0.0"},"peerDependencies":{"@nx/devkit":">=17.0.0","nx":">=17.0.0"},"dependencies":{"@nx/devkit":"^20.2.9","@nx/js":"^20.2.9","@nx/react":"^20.2.9","@nx/vite":"^20.2.9","@nx/workspace":"^20.2.9"},"devDependencies":{"@types/node":"^20.0.0","typescript":"^5.8.3","nx":"^20.2.9"},"nx":{"targets":{"build":{"executor":"@nx/js:tsc","outputs":["{options.outputPath}"],"options":{"outputPath":"dist","main":"src/index.ts","tsConfig":"tsconfig.json"}}}},"generators":"./generators.json","executors":"./executors.json","_id":"@10xsai/cloudflare-router-nx-plugin@1.0.0","_nodeVersion":"22.16.0","_npmVersion":"10.9.2","dist":{"integrity":"sha512-g1sVPciy962VkfsnBhEii++nAZcxH3ppnfdd3JXgSOUoVkfquCsB3wyfA2i3Zgb1aj4ZoV0/aGk9iH/6Fe2Bqg==","shasum":"7096a9729f62150f4981dea6a28b0d7841adc5d0","tarball":"https://registry.npmjs.org/@10xsai/cloudflare-router-nx-plugin/-/cloudflare-router-nx-plugin-1.0.0.tgz","fileCount":53,"unpackedSize":68659,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEUCIQD199AXP8oaZRUlALr4XRzxt9kZ6tds2iQcELJ79SnOmwIgY936pjKpToJvouK5UViptzJRfxfUqHgjVCjfVnyF1ts="}]},"_npmUser":{"name":"10xsai","email":"10xsai.official@gmail.com","actor":{"name":"10xsai","email":"10xsai.official@gmail.com","type":"user"}},"directories":{},"maintainers":[{"name":"10xsai","email":"10xsai.official@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/cloudflare-router-nx-plugin_1.0.0_1750314209382_0.38871784674642385"},"_hasShrinkwrap":false}},"time":{"created":"2025-06-19T06:23:29.299Z","1.0.0":"2025-06-19T06:23:29.593Z","modified":"2025-06-19T06:23:29.928Z"},"maintainers":[{"name":"10xsai","email":"10xsai.official@gmail.com"}],"description":"Nx plugin for creating React Router apps with Cloudflare setup","homepage":"https://github.com/10xsai/cloudflare-router-nx-plugin#readme","keywords":["nx","plugin","react","router","cloudflare","workers","pages","nx-plugin","react-router","cloudflare-pages","cloudflare-workers"],"repository":{"type":"git","url":"git+https://github.com/10xsai/cloudflare-router-nx-plugin.git"},"author":{"name":"Sai Krishna Gottipalli","url":"10xsai"},"bugs":{"url":"https://github.com/10xsai/cloudflare-router-nx-plugin/issues"},"license":"MIT","readme":"# @cloudflare-router/nx-plugin\n\nAn Nx plugin for creating React Router v7 applications optimized for Cloudflare Workers deployment. This plugin automates the setup of React Router v7 apps with full-stack capabilities, server-side rendering, and seamless Cloudflare Workers integration.\n\n## Features\n\n- 🚀 **React Router v7** - Latest framework mode with file-based routing\n- ⚛️ **React 19** - Latest React version with modern features\n- ☁️ **Cloudflare Workers Integration** - Optimized for edge deployment with official Cloudflare Vite plugin\n- 🎯 **Type-Safe Routes** - Automatic TypeScript type generation for routes\n- ⚡ **Server-Side Rendering** - Built-in SSR support\n- 🎨 **Styling Options** - Choose between Tailwind CSS v4 or vanilla CSS\n- 🛠️ **Development Tools** - Hot module replacement and optimized dev experience\n- 📦 **Production Ready** - Optimized builds with code splitting\n- 🔧 **Nx Integration** - Full integration with Nx workspace and tooling\n- 🔍 **ESLint Setup** - Pre-configured ESLint with Nx and React rules\n- 📝 **TypeScript Project References** - Optimized TypeScript configuration with project references\n- ⚙️ **Modern Vite Setup** - Latest Vite plugins and optimizations\n\n## Installation\n\n```bash\nnpm install @cloudflare-router/nx-plugin --save-dev\n# or\npnpm add @cloudflare-router/nx-plugin --save-dev\n# or\nyarn add @cloudflare-router/nx-plugin --dev\n```\n\n## Usage\n\n### Generate a new React Router v7 app\n\n```bash\n# Interactive mode (recommended)\nnx generate @cloudflare-router/nx-plugin:app\n\n# With specific options\nnx generate @cloudflare-router/nx-plugin:app my-app \\\n  --style=tailwind \\\n  --directory=apps\n```\n\n### Available Options\n\n| Option | Type | Default | Description |\n|--------|------|---------|-------------|\n| `name` | string | - | The name of the application |\n| `directory` | string | - | The directory where the app will be created |\n| `style` | `css` \\| `tailwind` | `tailwind` | Styling approach |\n| `skipTests` | boolean | false | Skip creating test files |\n| `skipPackageJson` | boolean | false | Don't modify package.json |\n| `tags` | string | - | Tags for linting |\n\n### Commands\n\nOnce your app is generated, you can use these commands:\n\n```bash\n# Start development server\nnx dev my-app\n\n# Build for production\nnx build my-app\n\n# Type checking\nnx typecheck my-app\n\n# Generate TypeScript types for routes\nnx typegen my-app\n\n# Lint code\nnx lint my-app\n\n# Lint and fix issues\nnx lint my-app --fix\n\n# Deploy to Cloudflare Workers (production)\nnx deploy my-app\n\n# Deploy to staging environment\nnx deploy my-app --environment staging\n```\n\n## Generated Project Structure\n\n```\nmy-app/\n├── app/                          # React Router v7 app directory\n│   ├── root.tsx                  # Root layout component\n│   ├── routes/                   # File-based routes\n│   │   ├── _index.tsx           # Home page (/)\n│   │   └── about.tsx            # About page (/about)\n│   ├── tailwind.css             # Tailwind CSS (if selected)\n│   └── root.css                 # Root CSS (if CSS selected)\n├── public/                       # Static assets\n│   ├── logo-light.png\n│   └── logo-dark.png\n├── build/                        # Build output (generated)\n│   ├── client/                   # Client-side assets\n│   └── server/                   # Server-side code\n├── package.json                  # Dependencies and scripts\n├── react-router.config.ts        # React Router configuration\n├── tsconfig.json                 # Main TypeScript configuration\n├── tsconfig.app.json             # App-specific TypeScript config\n├── tsconfig.node.json            # Node.js TypeScript config\n├── tsconfig.cloudflare.json      # Cloudflare-specific TypeScript config\n├── vite.config.ts               # Vite configuration with Cloudflare plugin\n├── wrangler.jsonc               # Cloudflare configuration\n├── eslint.config.mjs            # ESLint configuration\n├── tailwind.config.js           # Tailwind config (if selected)\n└── postcss.config.js            # PostCSS config (if Tailwind)\n```\n\n## Modern Stack\n\nThe generated project uses the latest versions of:\n\n### Core Dependencies\n- **React 19.1.0** - Latest React with concurrent features and modern APIs\n- **React Router 7.5.3** - Modern framework mode with file-based routing\n- **TypeScript 5.8.3** - Latest TypeScript with enhanced type checking\n- **Vite 6.3.3** - Fast build tool with modern optimizations\n\n### Cloudflare Integration\n- **@cloudflare/vite-plugin 1.0.12** - Official Cloudflare Vite integration\n- **Wrangler 4.13.2** - Latest Cloudflare CLI for deployment\n- **@cloudflare/workers-types** - TypeScript definitions for Workers APIs\n\n### Styling (when Tailwind is selected)\n- **Tailwind CSS 4.1.4** - Latest utility-first CSS framework\n- **@tailwindcss/vite 4.1.4** - Modern Tailwind Vite integration\n\n## Modern Vite Configuration\n\nThe generated project uses a modern Vite setup with:\n\n### Vite Plugins\n- **`@cloudflare/vite-plugin`** - Official Cloudflare integration for seamless deployment\n- **`@react-router/dev/vite`** - React Router v7 development and build support\n- **`@tailwindcss/vite`** - Modern Tailwind CSS integration (when selected)\n- **`vite-tsconfig-paths`** - TypeScript path mapping support\n\n### Build Optimizations\n- **Nx cache integration** - Leverages Nx's build cache for faster builds\n- **CommonJS compatibility** - Handles mixed ES modules and CommonJS\n- **SSR optimization** - Configured for server-side rendering\n- **Cloudflare Workers compatibility** - External conditions for edge runtime\n\n### Development Experience\n- **Hot module replacement** - Fast development iteration\n- **TypeScript integration** - Full TypeScript support with path mapping\n- **Environment-specific configs** - Development and preview server settings\n\nExample Vite configuration:\n\n```typescript\nimport { defineConfig } from 'vite';\nimport { cloudflare } from '@cloudflare/vite-plugin';\nimport { reactRouter } from '@react-router/dev/vite';\nimport tailwindcss from '@tailwindcss/vite';\nimport tsconfigPaths from 'vite-tsconfig-paths';\n\nexport default defineConfig(() => ({\n  plugins: [\n    cloudflare({ viteEnvironment: { name: \"ssr\" } }),\n    tailwindcss(),\n    !process.env.VITEST && reactRouter(),\n    tsconfigPaths(),\n  ],\n  build: {\n    outDir: './dist',\n    emptyOutDir: true,\n    reportCompressedSize: true,\n    commonjsOptions: {\n      transformMixedEsModules: true,\n    },\n  },\n  ssr: {\n    resolve: {\n      externalConditions: [\"workerd\", \"worker\"],\n    },\n  },\n}));\n```\n\n## React Router v7 Features\n\nThis plugin generates apps using React Router v7's framework mode, which includes:\n\n### File-Based Routing\nRoutes are automatically generated based on your file structure in `app/routes/`:\n\n- `app/routes/_index.tsx` → `/` (home page)\n- `app/routes/about.tsx` → `/about`\n- `app/routes/products.$id.tsx` → `/products/:id`\n- `app/routes/blog._index.tsx` → `/blog`\n- `app/routes/blog.$slug.tsx` → `/blog/:slug`\n\n### Route Modules\nEach route can export:\n\n```typescript\nimport type { MetaFunction, LoaderFunction } from \"react-router\";\n\n// Page metadata\nexport const meta: MetaFunction = () => {\n  return [\n    { title: \"My Page\" },\n    { name: \"description\", content: \"Page description\" }\n  ];\n};\n\n// Server-side data loading\nexport const loader: LoaderFunction = async ({ params }) => {\n  return { data: await fetchData(params.id) };\n};\n\n// The page component\nexport default function MyPage() {\n  const { data } = useLoaderData();\n  return <div>{data.title}</div>;\n}\n```\n\n### Type Safety\nRoutes automatically generate TypeScript types for:\n- Route parameters\n- Loader data\n- Action data\n- Meta functions\n\n## TypeScript Configuration\n\nThe generated project uses TypeScript project references for optimal build performance and type checking:\n\n### Configuration Files\n\n- **`tsconfig.json`** - Main configuration with project references\n- **`tsconfig.app.json`** - App-specific configuration for React Router code\n- **`tsconfig.node.json`** - Node.js configuration for build tools (Vite, etc.)\n- **`tsconfig.cloudflare.json`** - Cloudflare-specific configuration for deployment\n\n### Project References Structure\n\n```json\n{\n  \"references\": [\n    { \"path\": \"./tsconfig.app.json\" },\n    { \"path\": \"./tsconfig.node.json\" },\n    { \"path\": \"./tsconfig.cloudflare.json\" }\n  ]\n}\n```\n\nThis structure provides:\n- **Faster builds** - Only rebuild changed projects\n- **Better IDE performance** - Improved IntelliSense and error checking\n- **Isolated configurations** - Different settings for different parts of your app\n- **Cloudflare optimization** - Specific settings for edge runtime compatibility\n\n## Code Quality\n\n### ESLint Configuration\n\nThe generated project includes a pre-configured ESLint setup that extends:\n- **Base workspace config** - Inherits from your workspace ESLint configuration\n- **Nx React rules** - Nx-specific React linting rules\n- **Flat config format** - Modern ESLint flat configuration\n\nThe ESLint configuration (`eslint.config.mjs`) includes:\n\n```javascript\nimport nx from \"@nx/eslint-plugin\";\nimport baseConfig from \"../../../eslint.config.mjs\";\n\nexport default [\n    ...baseConfig,\n    ...nx.configs[\"flat/react\"],\n    {\n        files: [\n            \"**/*.ts\",\n            \"**/*.tsx\",\n            \"**/*.js\",\n            \"**/*.jsx\"\n        ],\n        // Override or add rules here\n        rules: {}\n    }\n];\n```\n\n### Available Lint Commands\n\n```bash\n# Lint the project\nnx lint my-app\n\n# Lint and automatically fix issues\nnx lint my-app --fix\n\n# Run lint from package.json scripts\nnpm run lint\nnpm run lint:fix\n```\n\n## Cloudflare Workers Deployment\n\n### Cloudflare Setup\n\n1. **Install Wrangler CLI** (if not already installed):\n   ```bash\n   npm install -g wrangler\n   ```\n\n2. **Authenticate with Cloudflare**:\n   ```bash\n   wrangler auth login\n   ```\n\n3. **Configure your deployment** in `wrangler.jsonc`:\n   - Update the `name` field with your project name\n   - Set your `account_id`\n   - Configure any required bindings (KV, D1, R2, etc.)\n\n### Deploy to Production\n\n```bash\n# Build and deploy to production\nnx build my-app\nnx deploy my-app\n```\n\n### Deploy to Staging\n\n```bash\n# Deploy to staging environment\nnx deploy my-app --environment staging\n```\n\nThe plugin automatically configures:\n- **Wrangler CLI** setup with JSON configuration\n- **Environment variables** management\n- **Build outputs** optimized for Workers\n- **Compatibility settings** for Cloudflare runtime\n- **Official Cloudflare Vite plugin** for seamless integration\n\n### Environment Configuration\n\nConfigure your deployment in `wrangler.jsonc`:\n\n```jsonc\n{\n  \"$schema\": \"node_modules/wrangler/config-schema.json\",\n  \"name\": \"my-app\",\n  \"compatibility_date\": \"2024-12-18\",\n  \"compatibility_flags\": [\"nodejs_compat\"],\n  \"workers_dev\": true,\n  \n  // Development variables\n  \"vars\": {\n    \"NODE_ENV\": \"development\"\n  },\n  \n  // Environment-specific configurations\n  \"env\": {\n    \"staging\": {\n      \"name\": \"my-app-staging\",\n      \"vars\": {\n        \"ENVIRONMENT\": \"staging\",\n        \"NODE_ENV\": \"production\"\n      }\n    },\n    \"production\": {\n      \"name\": \"my-app-production\",\n      \"vars\": {\n        \"ENVIRONMENT\": \"production\",\n        \"NODE_ENV\": \"production\"\n      }\n    }\n  }\n}\n```\n\n## Development Workflow\n\n1. **Generate the app**:\n   ```bash\n   nx generate @cloudflare-router/nx-plugin:app my-app\n   ```\n\n2. **Start development**:\n   ```bash\n   nx dev my-app\n   ```\n\n3. **Add routes** by creating files in `app/routes/`\n\n4. **Build and test**:\n   ```bash\n   nx build my-app\n   nx typecheck my-app\n   nx lint my-app\n   ```\n\n5. **Deploy to Cloudflare Workers**:\n   ```bash\n   # Production deployment\n   nx deploy my-app\n   \n   # Staging deployment\n   nx deploy my-app --environment staging\n   ```\n\n## Customization\n\n### Adding Database Support\n\nFor Cloudflare D1 database support, add to your `wrangler.jsonc`:\n\n```jsonc\n{\n  \"d1_databases\": [\n    {\n      \"binding\": \"DB\",\n      \"database_name\": \"my-database\",\n      \"database_id\": \"your-database-id\",\n      \"preview_database_id\": \"your-preview-database-id\"\n    }\n  ]\n}\n```\n\n### Adding KV Storage\n\nFor Cloudflare KV storage:\n\n```jsonc\n{\n  \"kv_namespaces\": [\n    {\n      \"binding\": \"MY_KV\",\n      \"id\": \"your-kv-namespace-id\",\n      \"preview_id\": \"your-preview-kv-namespace-id\"\n    }\n  ]\n}\n```\n\n### Adding R2 Storage\n\nFor Cloudflare R2 object storage:\n\n```jsonc\n{\n  \"r2_buckets\": [\n    {\n      \"binding\": \"MY_BUCKET\",\n      \"bucket_name\": \"my-bucket\",\n      \"preview_bucket_name\": \"my-bucket-preview\"\n    }\n  ]\n}\n```\n\n### Custom Styling\n\nThe generated app supports:\n- **Tailwind CSS v4**: Latest utility-first CSS framework with modern Vite plugin\n- **Vanilla CSS**: Traditional CSS with utility classes\n\nYou can easily switch or add additional styling solutions.\n\n### ESLint Customization\n\nYou can customize the ESLint configuration by modifying the `rules` object in `eslint.config.mjs`:\n\n```javascript\nexport default [\n    ...baseConfig,\n    ...nx.configs[\"flat/react\"],\n    {\n        files: [\n            \"**/*.ts\",\n            \"**/*.tsx\",\n            \"**/*.js\",\n            \"**/*.jsx\"\n        ],\n        rules: {\n            // Add your custom rules here\n            \"@typescript-eslint/no-unused-vars\": \"error\",\n            \"react/prop-types\": \"off\",\n            // ... more rules\n        }\n    }\n];\n```\n\n### TypeScript Customization\n\nYou can customize TypeScript configurations for different parts of your application:\n\n- **App code** (`tsconfig.app.json`) - Modify for React Router specific settings\n- **Build tools** (`tsconfig.node.json`) - Adjust for Vite and other Node.js tools\n- **Cloudflare deployment** (`tsconfig.cloudflare.json`) - Optimize for edge runtime\n\n### Vite Customization\n\nYou can extend the Vite configuration in `vite.config.ts`:\n\n```typescript\nexport default defineConfig(() => ({\n  // Add custom plugins\n  plugins: [\n    cloudflare({ viteEnvironment: { name: \"ssr\" } }),\n    tailwindcss(),\n    !process.env.VITEST && reactRouter(),\n    tsconfigPaths(),\n    // Add your custom plugins here\n  ],\n  // Customize build options\n  build: {\n    // Add custom build configuration\n  },\n  // Add custom server options\n  server: {\n    // Custom development server settings\n  },\n}));\n```\n\n## Troubleshooting\n\n### Common Issues\n\n1. **Build fails**: Ensure all dependencies are installed\n   ```bash\n   npm install\n   ```\n\n2. **Types not generated**: Run typegen manually\n   ```bash\n   nx typegen my-app\n   ```\n\n3. **Deployment fails**: Check your `wrangler.jsonc` configuration\n\n4. **Development server issues**: Clear build cache\n   ```bash\n   rm -rf build/\n   nx dev my-app\n   ```\n\n5. **ESLint errors**: Fix linting issues\n   ```bash\n   nx lint my-app --fix\n   ```\n\n6. **TypeScript errors**: Check project references\n   ```bash\n   nx typecheck my-app\n   ```\n\n7. **Vite plugin issues**: Clear Vite cache\n   ```bash\n   rm -rf node_modules/.vite\n   nx dev my-app\n   ```\n\n### Getting Help\n\n- [React Router v7 Documentation](https://reactrouter.com)\n- [React 19 Documentation](https://react.dev)\n- [Cloudflare Workers Documentation](https://developers.cloudflare.com/workers/)\n- [Nx Documentation](https://nx.dev)\n- [TypeScript Project References](https://www.typescriptlang.org/docs/handbook/project-references.html)\n- [Vite Documentation](https://vitejs.dev)\n- [Cloudflare Vite Plugin](https://github.com/cloudflare/workers-sdk/tree/main/packages/vite-plugin)\n- [Tailwind CSS v4 Documentation](https://tailwindcss.com/docs)\n\n## Contributing\n\nContributions are welcome! Please feel free to submit a Pull Request.\n\n## License\n\nMIT ","readmeFilename":"README.md","_rev":"1-557fe872f348bf3bd58a2f205926a1dd"}