Skip to content

Commit f165436

Browse files
Copilothi-ogawa
andcommitted
Update react-router rsc example to match official template structure
Co-authored-by: hi-ogawa <[email protected]>
1 parent 6e2365b commit f165436

39 files changed

+1388
-1388
lines changed
Lines changed: 68 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -1,34 +1,85 @@
1-
# rsc react-router
1+
# Welcome to React Router! (Experimental RSC)
22

3-
https://vite-rsc-react-router.hiro18181.workers.dev
3+
⚠️ **EXPERIMENTAL**: This template demonstrates React Server Components with React Router. This is experimental technology and not recommended for production use.
4+
5+
A modern template for exploring React Server Components (RSC) with React Router, powered by Vite.
46

57
> [!NOTE]
6-
> React Router now provides [official RSC support](https://reactrouter.com/how-to/react-server-components) for Vite. The example might not be kept up to date with the latest version. Please refer to React Router's official documentation for the latest integrations.
8+
> React Router now provides [official RSC support](https://reactrouter.com/how-to/react-server-components) for Vite. This example is updated to match the latest official template from @remix-run/react-router-templates.
9+
10+
## Features
711

8-
Vite RSC example based on demo made by React router team with Parcel:
12+
- 🧪 **Experimental React Server Components**
13+
- 🚀 Server-side rendering with RSC
14+
- ⚡️ Hot Module Replacement (HMR)
15+
- 📦 Asset bundling and optimization with Vite
16+
- 🔄 Data loading and mutations
17+
- 🔒 TypeScript by default
18+
- 🎉 TailwindCSS for styling
19+
- 📖 [React Router docs](https://reactrouter.com/)
20+
- 📚 [React Server Components guide](https://reactrouter.com/how-to/react-server-components)
921

10-
- https://github.com/jacob-ebey/parcel-plugin-react-router/
11-
- https://github.com/jacob-ebey/experimental-parcel-react-router-starter
12-
- https://github.com/remix-run/react-router/tree/rsc/playground/rsc-vite
22+
## Getting Started
1323

14-
See also [`rsc-movies`](https://github.com/hi-ogawa/rsc-movies/).
24+
### Installation
1525

16-
[![Open in StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github/vitejs/vite-plugin-react/tree/main/packages/plugin-rsc/examples/react-router?file=src%2Froutes%2Froot.tsx)
26+
Install the dependencies:
27+
28+
```bash
29+
npm install
30+
```
1731

18-
Or try it locally by:
32+
### Development
1933

20-
```sh
21-
npx giget gh:vitejs/vite-plugin-react/packages/plugin-rsc/examples/react-router my-app
22-
cd my-app
23-
npm i
34+
Start the development server with HMR:
35+
36+
```bash
2437
npm run dev
38+
```
39+
40+
Your application will be available at `http://localhost:5173`.
41+
42+
## Building for Production
43+
44+
Create a production build:
45+
46+
```bash
2547
npm run build
26-
npm run preview
48+
```
49+
50+
## Running Production Build
51+
52+
Run the production server:
2753

28-
# run on @cloudflare/vite-plugin and deploy.
29-
# a separate configuration is found in ./cf/vite.config.ts
54+
```bash
55+
npm start
56+
```
57+
58+
## Understanding React Server Components
59+
60+
This template includes three entry points:
61+
62+
- **`entry.rsc.tsx`** - React Server Components entry point
63+
- **`entry.ssr.tsx`** - Server-side rendering entry point
64+
- **`entry.browser.tsx`** - Client-side hydration entry point
65+
66+
Learn more about React Server Components with React Router in our [comprehensive guide](https://reactrouter.com/how-to/react-server-components).
67+
68+
## Styling
69+
70+
This template comes with [Tailwind CSS](https://tailwindcss.com/) already configured for a simple default starting experience. You can use whatever CSS framework you prefer.
71+
72+
## CloudFlare Support
73+
74+
CloudFlare specific configurations are available in the `cf/` directory:
75+
76+
```bash
3077
npm run cf-dev
3178
npm run cf-build
3279
npm run cf-preview
3380
npm run cf-release
3481
```
82+
83+
---
84+
85+
Built with ❤️ using React Router.

packages/plugin-rsc/examples/react-router/app/paper.css

Lines changed: 0 additions & 150 deletions
This file was deleted.

packages/plugin-rsc/examples/react-router/app/root.tsx

Lines changed: 0 additions & 56 deletions
This file was deleted.

packages/plugin-rsc/examples/react-router/app/routes.ts

Lines changed: 0 additions & 6 deletions
This file was deleted.

packages/plugin-rsc/examples/react-router/app/routes/about.tsx

Lines changed: 0 additions & 20 deletions
This file was deleted.

packages/plugin-rsc/examples/react-router/app/routes/client.tsx

Lines changed: 0 additions & 22 deletions
This file was deleted.

packages/plugin-rsc/examples/react-router/app/routes/home.actions.ts

Lines changed: 0 additions & 7 deletions
This file was deleted.

packages/plugin-rsc/examples/react-router/app/routes/home.client.tsx

Lines changed: 0 additions & 12 deletions
This file was deleted.

packages/plugin-rsc/examples/react-router/app/routes/home.css

Lines changed: 0 additions & 3 deletions
This file was deleted.

0 commit comments

Comments
 (0)