(React with Vite) -> ReactRouter 404 Routing Error on Page reload
Hi everybody!
I hosted a react app on this platform and I'm getting 404 errors on page reloads. Going through react-router docs, I discovered this -"If you're hosting your app on a static file server, you'll need to configure it to send all requests to your index.html to avoid getting 404s."
Project ID
6246ef0f-5ee8-4207-94b6-f183d98e7c85
18 Replies
Project ID:
6246ef0f-5ee8-4207-94b6-f183d98e7c85show me your package.json file please
These are the script wath I've used
this one works npx http-server ./dist for start
and this one bellow caused an error
"scripts": {
"dev": "vite --port 3001",
"build": "tsc && vite build",
"preview": "vite preview",
"start": "serve dist -s -n -L -p $PORT"
},
sh: 1: serve: not found
npm WARN config production Use
--omit=dev instead.
frontend@0.0.0 start serve build -s -n -L -p $PORTsh: 1: serve: not found npm WARN config production Use
--omit=dev instead.
frontend@0.0.0 start serve build -s -n -L -p $PORTsh: 1: serve: not found
do you have any build or start commands defined in your railway service settings?
noup
please let me know if you want to access to my github repo
just run
npm i serve in your local project and then push the changes
also why run tsc before vite build? vite should handle ts building and bundling itself right?I should keep this command after that, right?
"start": "serve dist -s -n -L -p $PORT"
ok, only vite build then
All right! pushin it now
"scripts": {
"dev": "vite --port 3001",
"build": "vite build",
"preview": "vite preview",
"start": "serve dist -s -n -L -p $PORT"
},
lmao
OMG
one command is all it took
It's working now!
steps for the next person who has this issue
1.- run -> npm i serve
2.- make sure to have the scripts simillar like this
"scripts": {
"dev": "vite --port 3001",
"build": "vite build",
"preview": "vite preview",
"start": "serve dist -s -n -L -p $PORT"
},
the start command it's mandatory for a better deployment
i mean i also have this guide
Solution
thank you very much Brody!
no problem 🙂