Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Vite middleware mode: cannot GET / #13256

Open
xandris opened this issue Mar 18, 2025 · 2 comments
Open

Vite middleware mode: cannot GET / #13256

xandris opened this issue Mar 18, 2025 · 2 comments

Comments

@xandris
Copy link

xandris commented Mar 18, 2025

I'm using React Router as a...

framework

Reproduction

https://github.com/xandris/react-router-middleware-mode

in short, I

  • npx create-react-router@latest my-react-router-app
  • updated dependencies (vite 6, express 5)
  • npm run build
  • npm start (works)
  • wrote a start.js that
    • creates an express app
    • creates a vite server in middleware mode
    • adds vite's middleware to the express app
    • starts the express app

the express app just gives 404s for any request

System Info

System:
    OS: macOS 15.3.1
    CPU: (16) arm64 Apple M3 Max
    Memory: 640.47 MB / 48.00 GB
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 22.14.0 - /opt/homebrew/opt/node@22/bin/node
    npm: 11.2.0 - /opt/homebrew/bin/npm
    pnpm: 9.6.0 - ~/Library/pnpm/pnpm
  Browsers:
    Chrome: 134.0.6998.89
    Safari: 18.3
  npmPackages:
    @react-router/dev: ~7 => 7.3.0 
    @react-router/node: ~7 => 7.3.0 
    @react-router/serve: ~7 => 7.3.0 
    react-router: ~7 => 7.3.0 
    vite: ~6 => 6.2.2

Used Package Manager

npm

Expected Behavior

the same functionality as react-router dev

Actual Behavior

404s for any GET

@xandris xandris added the bug label Mar 18, 2025
@tclohm
Copy link

tclohm commented Mar 19, 2025

The issue is likely that Express is looking for files in the wrong directory.
Based on the build output, React Router 7 creates two separate directories:

./build/client - Contains the client-side files (JavaScript, CSS, assets)
./build/server - Contains the server-side rendering code

However, Express might be configured to look in Vite's default output directory (./dist) instead of the ./build/client directory that React Router actually uses.
You might need to update your Express server configuration to serve files from the correct location: the ./build/client directory where React Router places its build output.

I hope that helps.

@xandris
Copy link
Author

xandris commented Mar 20, 2025

oh sorry, this is for the dev server, not the built server. i was launching a backend server along with the vite dev server to save my developers the trouble of starting a separate server. as in attaching the vite middlewares to our existing backend server. but maybe i'll launch it in a child process instead

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

3 participants