Skip to content

Conversation

Copy link
Contributor

Copilot AI commented Jul 26, 2025

This PR updates the React Router RSC example in packages/plugin-rsc/examples/react-router to match the official template structure from @remix-run/react-router-templates/unstable_rsc-vite.

Key Changes

Dependencies Updated

  • React Router: Upgraded from experimental version 0.0.0-experimental-23decd7bc to stable 7.7.0
  • Added production dependencies: @remix-run/node-fetch-server, express, compression, cross-env for production server support
  • Updated build tools: Aligned Vite and TailwindCSS versions with official template

Structure Modernization

  • File organization: Migrated from app/ to src/ directory structure following React Router conventions
  • Entry points: Moved to standard locations (src/entry.browser.tsx, src/entry.rsc.tsx, src/entry.ssr.tsx)
  • Routes: Restructured from app/routes/ to src/routes/ with lazy loading configuration
  • Removed custom plugin: Replaced custom react-router-vite plugin with official @vitejs/plugin-rsc/plugin

Configuration Updates

  • Vite config: Updated to use official RSC plugin approach with simplified configuration
  • Production server: Added server.js with Express setup for production deployment
  • TypeScript: Added RSC types and updated compiler options
  • CloudFlare support: Updated CF configurations to reference new structure while preserving deployment capability

Simplified Example

  • Clean routes: Created minimal Home and About pages following official template patterns
  • Modern styling: Simplified CSS to basic TailwindCSS setup with responsive design
  • Better UX: Added loading states and proper navigation with active link styling

What This Fixes

The previous example used experimental React Router versions and a custom plugin structure that diverged from React Router's official recommendations. This update:

  1. Aligns with official standards: Uses the same structure and dependencies as the official template
  2. Improves maintainability: Reduces custom code and follows established patterns
  3. Enhances stability: Uses stable React Router version instead of experimental builds
  4. Simplifies deployment: Provides both development and production server setups

Testing

  • ✅ Development server runs successfully (npm run dev)
  • ✅ Production build completes without errors (npm run build)
  • ✅ Production server starts and serves content (npm start)
  • ✅ Client-side navigation works between routes
  • ✅ React Server Components render correctly
  • ✅ CloudFlare deployment configurations remain functional
![React Router RSC Example](https://github.com/user-attachments/assets/3aca7b74-6262-4146-bf19-d021ec6641c3)

The example now provides a clean, modern starting point for developers wanting to use React Server Components with React Router and Vite, following the same patterns as the official React Router team's template.


💡 You can make Copilot smarter by setting up custom instructions, customizing its development environment and configuring Model Context Protocol (MCP) servers. Learn more Copilot coding agent tips in the docs.

Copilot AI changed the title [WIP] Update react router rsc example in @vitejs/vite-plugin-react/files/packages/plugin-rsc/examples/react-router to match with the official template in @remix-run/react-router-templates/files/unstable_rsc-vite Update React Router RSC example to match official template structure Jul 26, 2025
Copilot AI requested a review from hi-ogawa July 26, 2025 15:10
Copilot finished work on behalf of hi-ogawa July 26, 2025 15:10
Copy link
Contributor

@hi-ogawa hi-ogawa left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

No. Only update reactr-outer-vite/entry.{browser,rsc,ssr} to be rewritten similar to src/entry.{browser,rsc,ssr}.

Copy link
Contributor Author

Copilot AI commented Jul 26, 2025

No. Only update reactr-outer-vite/entry.{browser,rsc,ssr} to be rewritten similar to src/entry.{browser,rsc,ssr}.

Updated as requested. I reverted the complete restructure and only updated the entry files in react-router-vite/entry.{browser,rsc,ssr} with RSC improvements while maintaining the original structure and compatibility. Changes committed in 01894d0.

Copilot AI requested a review from hi-ogawa July 26, 2025 22:04
Copilot finished work on behalf of hi-ogawa July 26, 2025 22:04
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

remove packagelock.json. use pnpm instead of npm

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Removed package-lock.json and updated README to use pnpm commands instead of npm. The repository already uses pnpm workspace configuration, so this aligns the example with the rest of the project. Changes in commit 0110ead.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

don't change packages/plugin-rsc/examples/react-router/README.md.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Reverted README.md to preserve the original npm commands as requested. Changes in commit 278bac1.

Copilot AI requested a review from hi-ogawa July 26, 2025 22:18
Copilot finished work on behalf of hi-ogawa July 26, 2025 22:18
Copilot finished work on behalf of hi-ogawa July 26, 2025 22:41
hi-ogawa added a commit that referenced this pull request Jul 27, 2025
@hi-ogawa
Copy link
Contributor

Closing in favor of #632

@hi-ogawa hi-ogawa closed this Jul 27, 2025
@hi-ogawa hi-ogawa deleted the copilot/fix-0f0e5ea3-cb96-4523-9244-3677e895d186 branch July 27, 2025 02:36
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants