Deserve React

Deserve plus React SSR: file-based routes, session, CRUD demo.

Home	Login

Protected Route

Note

Prerequisites: Deno 2.5.4 or later. Build the client before first run.

Features

• File-based routing — GET/POST in routes/; path = file structure (e.g. [id].tsx).
• SSR + hydration — Server renders view; client hydrates from __INITIAL__.
• Session — Cookie-based session (Deserve middleware); login/logout demo.
• CRUD demo — In-memory items (list, create, read, update, delete); resets on restart.
• Single stack — Deno runs server and Vite build; no separate Node server.

Installation

Clone and install:

git clone https://github.com/NeaByteLab/Deserve-React.git
cd Deserve-React
deno install

Build client assets:

deno task build

Output: dist/client/ (HTML, CSS, JS).

Quick Start

Run the server:

deno task start

Open http://localhost:8000. Pages are server-rendered; the client bundle hydrates on load.

Development (watch server):

deno task dev

Restarts when src/ or routes/ change. For client changes, run deno task build and refresh.

Project Structure

Deserve-React/
├── deno.json              # Tasks, imports, compiler options
├── deno.lock              # Lockfile
├── vite.config.js         # Vite config (alias, React plugin)
├── index.html             # Vite entry; build → dist/client/
├── preview/               # Screenshots
│   ├── 1.png
│   ├── 2.png
│   └── 3.png
├── src/
│   ├── Main.ts            # Server entry: router, session, static, catch
│   ├── Main.jsx           # Client entry: hydrate, route by pathname
│   ├── SSR.ts             # renderPageWithView: template + React SSR
│   ├── Store.ts           # In-memory CRUD (items)
│   ├── Types.ts           # Shared types
│   └── Global.css         # Design tokens and styles
└── routes/
    ├── index.tsx          # Home
    ├── about.tsx          # Protected about
    ├── auth.tsx           # Sign in
    ├── auth/
    │   ├── login.ts       # POST: set session
    │   └── logout.ts      # GET: clear session
    ├── items/
    │   ├── index.tsx      # List
    │   ├── new.tsx        # Create form + POST
    │   ├── [id].tsx       # Detail
    │   └── [id]/
    │       ├── edit.tsx   # Edit form + GET/POST
    │       └── delete.ts  # POST: delete
    └── @components/
        ├── Nav.jsx
        └── NotFound.jsx

Architecture

flowchart TB
  subgraph Client["Client (browser)"]
    A[Request URL]
    B[HTML + script/css]
    C[React hydrate]
    D[__INITIAL__]
    A --> B
    B --> C
    D --> C
  end

  subgraph Server["Server (Deno)"]
    R[Router]
    MW[Session middleware]
    RT[File-based routes]
    SSR[SSR.ts]
    ST[Store]
    R --> MW
    MW --> RT
    RT --> SSR
    RT --> ST
    SSR --> B
  end

  subgraph Build["Build (Vite)"]
    V[Vite]
    E[index.html + Main.jsx]
    F[dist/client/]
    V --> E
    E --> F
  end

  A --> R
  F --> R

Loading

Request flow: Request → Router (session) → Route handler → renderPageWithView (template + React SSR) → HTML. Client loads assets, reads __INITIAL__, resolves page by pathname, hydrates.

Build & Tasks

Check — format, lint, typecheck:

deno task check

Tasks:

Task	Description
deno task start	Run server (no watch)
deno task dev	Run server with file watch
deno task build	Build client bundle → dist/client

Environment

Variable	Description
SESSION_SECRET	Secret for session cookie (min 32 chars). Optional; dev default if unset.

References

• Deserve (JSR) — HTTP server, file-based routing, middleware
• Vite SSR Guide — SSR and client hydration

License

This project is licensed under the MIT license. See the LICENSE file for details.