Building Modern Full-Stack Apps: Introducing the Cloudflare Router Nx
using React router v7, cloudflare workers, tailwindcss v4
Command Palette
Search for a command to run...
Comments
Join the discussionNo comments yet. Be the first to comment.
Search for a command to run...
using React router v7, cloudflare workers, tailwindcss v4
No comments yet. Be the first to comment.
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.
As developers, we've all been there. You want to build a modern React app that:
But setting this up manually? That's hours of configuration, dependency management, and getting various tools to play nicely together. Not anymore.
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.
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.
This isn't just another React template. It's built with the latest and greatest:
Unlike other solutions that treat Cloudflare as an afterthought, this plugin is built from the ground up for edge deployment:
@cloudflare/vite-pluginEvery decision was made with developer productivity in mind:
app/routes/ and they become routesLet me show you how quickly you can build a real application. Let's create a blog with dynamic routes:
nx generate @10xsai/cloudflare-router-nx-plugin:app my-blog --style=tailwind
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:
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 (
<div className="max-w-4xl mx-auto p-6">
<h1 className="text-4xl font-bold mb-8">Latest Posts</h1>
<div className="grid gap-6">
{posts.map(post => (
<article key={post.id} className="border rounded-lg p-6">
<h2 className="text-2xl font-semibold mb-2">
<Link to={`/blog/${post.slug}`}>{post.title}</Link>
</h2>
<p className="text-gray-600">{post.excerpt}</p>
</article>
))}
</div>
</div>
);
}
And app/routes/blog.$slug.tsx for individual posts:
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 (
<article className="max-w-4xl mx-auto p-6">
<h1 className="text-4xl font-bold mb-4">{post.title}</h1>
<div className="prose lg:prose-xl"
dangerouslySetInnerHTML={{ __html: post.content }} />
</article>
);
}
# Build and deploy
nx build my-blog
nx deploy my-blog
Your blog is now running on Cloudflare's global edge network!
The plugin provides a complete development workflow:
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
nx build my-app # Optimized production build
nx deploy my-app # Deploy to production
nx deploy my-app --environment staging # Deploy to staging
The plugin sets up optimized TypeScript configuration with project references:
tsconfig.app.json - For your React Router application codetsconfig.node.json - For build tools like Vitetsconfig.cloudflare.json - For Cloudflare-specific deployment codeThis means faster builds, better IDE performance, and isolated configurations.
Need a database? KV storage? R2 object storage? The plugin generates a wrangler.jsonc that's ready for Cloudflare bindings:
{
"d1_databases": [
{
"binding": "DB",
"database_name": "my-database",
"database_id": "your-database-id"
}
],
"kv_namespaces": [
{
"binding": "CACHE",
"id": "your-kv-namespace-id"
}
]
}
Choose your styling approach during generation:
By running on Cloudflare Workers, your app benefits from:
This plugin is open source and actively maintained:
Ready to try it out? Here's how to get started:
# 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
# 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
| 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 |
This plugin is perfect for:
I'm actively working on expanding the plugin with:
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:
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:
#nx #react #cloudflare #typescript #reactrouter #webdev #frontend #fullstack #edge #serverless