# Building Modern Full-Stack Apps: Introducing the Cloudflare Router Nx
> **TL;DR**: I built an Nx plugin that generates React Router v7 apps with React 19, TypeScript, Tailwind CSS v4, and seamless Cloudflare Workers deployment. It's now live on npm and ready to supercharge your edge-first development workflow.
## The Problem: Complex Edge Deployment Setup
As developers, we've all been there. You want to build a modern React app that:
- Runs at the edge for lightning-fast performance
- Has server-side rendering out of the box
- Uses the latest React features
- Deploys seamlessly to Cloudflare Workers
- Integrates well with your existing Nx workspace
But setting this up manually? That's hours of configuration, dependency management, and getting various tools to play nicely together. Not anymore.
## Introducing @10xsai/cloudflare-router-nx-plugin
I'm excited to introduce a new Nx plugin that eliminates all this setup complexity. With a single command, you get a production-ready React Router v7 application optimized for Cloudflare Workers deployment.
```bash
npm install @10xsai/cloudflare-router-nx-plugin --save-dev
nx generate @10xsai/cloudflare-router-nx-plugin:app my-app
```
That's it. You now have a modern, full-stack application ready for edge deployment.
## What Makes This Plugin Special?
### 🚀 Cutting-Edge Tech Stack
This isn't just another React template. It's built with the latest and greatest:
- **React 19.1.0** - The newest React with concurrent features and enhanced performance
- **React Router 7.5.3** - Framework mode with file-based routing and full-stack capabilities
- **TypeScript 5.8.3** - Latest TypeScript with enhanced type checking
- **Vite 6.3.3** - Lightning-fast build tool with modern optimizations
- **Tailwind CSS 4.1.4** - Latest utility-first CSS framework
### ☁️ First-Class Cloudflare Integration
Unlike other solutions that treat Cloudflare as an afterthought, this plugin is built from the ground up for edge deployment:
- **Official Cloudflare Vite Plugin** - Seamless integration with `@cloudflare/vite-plugin`
- **Wrangler CLI Setup** - Pre-configured deployment pipeline
- **Edge-Optimized Builds** - Code splitting and optimization for Workers runtime
- **Environment Management** - Built-in staging and production environments
### 🎯 Developer Experience Focus
Every decision was made with developer productivity in mind:
- **File-Based Routing** - Just create files in `app/routes/` and they become routes
- **Type-Safe Everything** - Automatic TypeScript types for routes, loaders, and actions
- **Hot Module Replacement** - Instant feedback during development
- **ESLint Integration** - Pre-configured linting with Nx and React rules
- **Project References** - Optimized TypeScript configuration for faster builds
## Real-World Example: Building a Blog in Minutes
Let me show you how quickly you can build a real application. Let's create a blog with dynamic routes:
### 1. Generate the App
```bash
nx generate @10xsai/cloudflare-router-nx-plugin:app my-blog --style=tailwind
```
### 2. Add Routes
The plugin generates this structure:
```
app/
├── routes/
│ ├── _index.tsx # Home page (/)
│ └── about.tsx # About page (/about)
```
Let's add blog functionality. Create `app/routes/blog._index.tsx`:
```typescript
import type { LoaderFunction, MetaFunction } from "react-router";
export const meta: MetaFunction = () => {
return [
{ title: "Blog | My Site" },
{ name: "description", content: "Latest blog posts" }
];
};
export const loader: LoaderFunction = async () => {
// This runs on the server (edge)
const posts = await fetch('your-api/posts').then(r => r.json());
return { posts };
};
export default function BlogIndex() {
const { posts } = useLoaderData();
return (
Latest Posts
{posts.map(post => (
{post.title}
{post.excerpt}
))}
);
}
```
And `app/routes/blog.$slug.tsx` for individual posts:
```typescript
export const loader: LoaderFunction = async ({ params }) => {
const post = await fetch(`your-api/posts/${params.slug}`).then(r => r.json());
if (!post) throw new Response("Not Found", { status: 404 });
return { post };
};
export default function BlogPost() {
const { post } = useLoaderData();
return (
{post.title}
);
}
```
### 3. Deploy to the Edge
```bash
# Build and deploy
nx build my-blog
nx deploy my-blog
```
Your blog is now running on Cloudflare's global edge network!
## Modern Development Workflow
The plugin provides a complete development workflow:
### Development
```bash
nx dev my-app # Start development server with HMR
nx typecheck my-app # Type checking
nx typegen my-app # Generate route types
nx lint my-app --fix # Lint and fix issues
```
### Production
```bash
nx build my-app # Optimized production build
nx deploy my-app # Deploy to production
nx deploy my-app --environment staging # Deploy to staging
```
## Advanced Features
### TypeScript Project References
The plugin sets up optimized TypeScript configuration with project references:
- `tsconfig.app.json` - For your React Router application code
- `tsconfig.node.json` - For build tools like Vite
- `tsconfig.cloudflare.json` - For Cloudflare-specific deployment code
This means faster builds, better IDE performance, and isolated configurations.
### Cloudflare Bindings Support
Need a database? KV storage? R2 object storage? The plugin generates a `wrangler.jsonc` that's ready for Cloudflare bindings:
```jsonc
{
"d1_databases": [
{
"binding": "DB",
"database_name": "my-database",
"database_id": "your-database-id"
}
],
"kv_namespaces": [
{
"binding": "CACHE",
"id": "your-kv-namespace-id"
}
]
}
```
### Styling Options
Choose your styling approach during generation:
- **Tailwind CSS v4** - Latest utility-first framework with modern Vite integration
- **Vanilla CSS** - Traditional CSS with utility classes
## Performance Benefits
### Edge-First Architecture
By running on Cloudflare Workers, your app benefits from:
- **Global distribution** - Your app runs in 300+ cities worldwide
- **Zero cold starts** - Workers have near-instant startup times
- **Automatic scaling** - Handle traffic spikes without configuration
### Modern Build Optimizations
- **Code splitting** - Automatic route-based code splitting
- **Tree shaking** - Dead code elimination
- **Asset optimization** - Image and CSS optimization
- **SSR optimization** - Server-side rendering at the edge
## Community and Support
This plugin is open source and actively maintained:
- **GitHub**: [10xsai/cloudflare-router-nx-plugin](https://github.com/10xsai/cloudflare-router-nx-plugin)
- **npm**: [@10xsai/cloudflare-router-nx-plugin](https://www.npmjs.com/package/@10xsai/cloudflare-router-nx-plugin)
- **Issues**: Report bugs and request features on GitHub
## Getting Started
Ready to try it out? Here's how to get started:
```bash
# Install the plugin
npm install @10xsai/cloudflare-router-nx-plugin --save-dev
# Generate your first app
nx generate @10xsai/cloudflare-router-nx-plugin:app my-app
# Start developing
nx dev my-app
```
### Example Commands
```bash
# Interactive generation (recommended)
nx generate @10xsai/cloudflare-router-nx-plugin:app
# With specific options
nx generate @10xsai/cloudflare-router-nx-plugin:app my-app \
--style=tailwind \
--directory=apps \
--tags=frontend,cloudflare
```
## Comparison with Alternatives
| Feature | This Plugin | Manual Setup | Other Templates |
|---------|-------------|--------------|-----------------|
| React 19 | ✅ | ⚠️ Manual | ❌ Usually older |
| React Router v7 | ✅ | ⚠️ Manual | ❌ Usually v6 |
| Cloudflare Workers | ✅ | ⚠️ Complex | ❌ Usually Vercel/Netlify |
| TypeScript Project Refs | ✅ | ❌ | ❌ |
| Nx Integration | ✅ | ❌ | ❌ |
| Latest Vite/Tailwind | ✅ | ⚠️ Manual | ❌ Usually outdated |
| Production Ready | ✅ | ⚠️ Hours of work | ⚠️ Basic setup |
## Real-World Use Cases
This plugin is perfect for:
### 🌐 Content Websites
- Blogs with SSR and edge caching
- Documentation sites with fast global delivery
- Marketing websites with dynamic content
### 🛒 E-commerce
- Product catalogs with server-side rendering
- Shopping carts with edge state management
- Payment processing with Workers
### 📱 SaaS Applications
- Dashboard applications with real-time data
- User authentication with edge security
- API integration with minimal latency
### 🎯 Landing Pages
- High-conversion marketing pages
- A/B testing with edge logic
- Analytics and tracking
## Future Roadmap
I'm actively working on expanding the plugin with:
- **Database templates** - Pre-configured D1, Prisma, and Drizzle setups
- **Auth integration** - Built-in authentication patterns
- **Testing setup** - Vitest and Playwright configuration
- **More styling options** - Support for styled-components, emotion, etc.
- **Deployment variants** - Support for Cloudflare Pages, traditional Workers
## Conclusion
Building modern web applications shouldn't require hours of configuration and setup. The Cloudflare Router Nx Plugin gives you a production-ready, edge-optimized React application in seconds, not hours.
With React 19, React Router v7, TypeScript project references, and seamless Cloudflare integration, you're not just getting a template – you're getting a modern development platform that scales from prototype to production.
**Try it today:**
```bash
npm install @10xsai/cloudflare-router-nx-plugin --save-dev
nx generate @10xsai/cloudflare-router-nx-plugin:app my-app
```
---
*Have you tried the plugin? I'd love to hear about your experience! Share your thoughts in the comments or reach out on GitHub. If you found this useful, please give the repository a star ⭐ and share this article with fellow developers.*
**Links:**
- [GitHub Repository](https://github.com/10xsai/cloudflare-router-nx-plugin)
- [npm Package](https://www.npmjs.com/package/@10xsai/cloudflare-router-nx-plugin)
- [Documentation](https://github.com/10xsai/cloudflare-router-nx-plugin#readme)
---
## Tags
`#nx` `#react` `#cloudflare` `#typescript` `#reactrouter` `#webdev` `#frontend` `#fullstack` `#edge` `#serverless`