web-rules

Web Application Rules (React Router SSR)

Project Overview

• Framework: React Router v7 (Framework mode) - The next version of RemixJS
• Rendering: Server-Side Rendering (SSR)
• Module System: ESM (not CommonJS)
• Styling: TailwindCSS v4 (imported from @projectx/ui package)
• Build Tool: Vite
• Port: 3000

Critical: Module System

✅ This app uses ESM

// ✅ CORRECT - ESM imports
import { something } from './module';
export { something };
export default Component;
// ❌ WRONG - CommonJS (don't use in web app)
const something = require('./module');
module.exports = something;

Importing from packages

// ✅ Can import ESM and CommonJS packages
import { User } from '@projectx/models';  // ESM
import { AuthService } from '@projectx/core';  // CommonJS (transpiled)
import { Button } from '@projectx/ui';  // ESM

React Router Framework Mode

This is NOT traditional React Router

• Uses file-based routing (like Remix/Next.js)
• Server-side rendering by default
• Built-in data loading with loaders
• Form handling with actions
• Automatic code splitting

File structure:

apps/web/
├── app/
│   ├── routes/           # File-based routes
│   │   ├── _index.tsx    # Home page (/)
│   │   ├── about.tsx     # /about
│   │   └── users.$id.tsx # /users/:id (dynamic)
│   ├── root.tsx          # Root layout
│   └── entry.client.tsx  # Client entry point
│   └── entry.server.tsx  # Server entry point

Route conventions:

• _index.tsx - Index route
• about.tsx - Static route /about
• users.$id.tsx - Dynamic route /users/:id
• _layout.tsx - Layout route (no URL segment)
• _auth.login.tsx - Pathless layout

Data Loading

Use loaders for server-side data fetching

import { json, type LoaderFunctionArgs } from 'react-router';
export async function loader({ params, request }: LoaderFunctionArgs) {
  const user = await fetchUser(params.id);
  return json({ user });
}
export default function UserPage() {
  const { user } = useLoaderData<typeof loader>();
  return <div>{user.name}</div>;
}