Bidoof Template

A modern React application template using vite-plugin-react-server for React Server Components (RSC) support.

See the example hosted on Github pages

Showcasing:

• Client / Server boundary
  • Client side Error Boundary
  • Client side navigation
  • Server side page & props
  • Counter with useState
  • Dynamic head updates
  • Async props using the pokeapi
  • Todo page using server actions and sqlite database
• Static site generation capabilities with "headless" index.rsc files and fully static index.html files
  • Static result includes server actions results

Clone the repository to see the development process in action.

• Showing server side stack trace in ErrorBoundary
• Open Developer console for additional stack-trace information on the error-example page
• Hot reloading of pages

Features

• ⚡️ Vite - Lightning fast build tool
• ⚛️ React - The library for web and native user interfaces
• 🎯 TypeScript support
• 🔄 Server-side rendering with React Server Components
• 📡 Built-in API fetching utilities
• 🎨 CSS Modules support
• 🔧 Experimental React patch setup
• 🚀 Static build with RSC support
• 🛠️ Development and preview support
• 👷 Worker support for RSC and HTML generation

Prerequisites

• Node.js (latest recommended)
• npm or yarn or pnpm

Installation

1. Clone the repository:

git clone https://github.com/nicobrinkkemper/vite-plugin-react-server-demo-official.git
cd vite-plugin-react-server-demo-official

2. Install dependencies and apply patches:

npm install

After installing new dependencies

npm run postinstall

3. Start the development server:

# For server-side development
npm run dev
NODE_OPTIONS='--conditions=react-server' npx vite

# Using the plugin's built-in rsc-worker
npm run start
npx vite

4. Build and preview

# To build the static site
npm run build
NODE_OPTIONS='--conditions=react-server' npx vite build

#
npx vite preview

Project Structure

project/
├── src/              # Source files
├── public/           # Static assets
├── patches/          # Custom patches for React experimental features
├── .github/          # GitHub workflows
│   └── workflows/    # CI/CD configurations
├── vite.config.ts           # Vite configuration
├── vite.react.config.ts     # Plugin configuration
└── tsconfig.json            # TypeScript configuration

Build Commands

# Build everything
npm run build

# Build client-side only
npm run build:client

# Build server-side and generate static files
npm run build:server

Configuration

The project uses Vite configuration file:

vite.config.ts

Adding vite-plugin-react-server to vite

vite.react.config.ts

Configuration for the plugin this demo is for

Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

License

This project is licensed under the MIT License - see the LICENSE file for details.

Acknowledgments

• vite-plugin-react-server - The core RSC plugin
• Vite - The build tool that powers this template
• React - The UI library
• React Server Components - The RSC specification