404 with BrowserRouter
maxivalli
HOBBYOP

2 years ago

I have a project built with Express, Node.js, and Vite. If I set up routing with HashRouter, I have no issues. But if I use BrowserRouter, I get 404 errors when I refresh on a route other than the root. I understand it's a server-side routing issue, but I don't know how to solve it. Can anyone help me?

40 Replies

brody
EMPLOYEE

2 years ago

Can you share your repository so I can give you a better solution?


maxivalli
HOBBYOP

2 years ago

Yes. d9e723dd-08af-409b-bf3b-2afbf84f0169


brody
EMPLOYEE

2 years ago

Okay, please share your repository.


maxivalli
HOBBYOP

2 years ago

Ok. Give me a minute because is private


maxivalli
HOBBYOP

2 years ago


brody
EMPLOYEE

2 years ago

I'm assuming you have two services in Railway for the client and server?


maxivalli
HOBBYOP

2 years ago

Yes


brody
EMPLOYEE

2 years ago

What do you mean by testing? that would be the proper way to setup this kind of stack in Railway.


maxivalli
HOBBYOP

2 years ago

I got confused, I thought you were asking about both frontend services. My english is not good


brody
EMPLOYEE

2 years ago

Both? I only see one frontend (client) app in the repo.


maxivalli
HOBBYOP

2 years ago

Ah ok, yes, in the repo is only client.


brody
EMPLOYEE

2 years ago

No, it's not. there is a server folder here too.


maxivalli
HOBBYOP

2 years ago

Sorry, yes, both frontend and Server are in the repository.


brody
EMPLOYEE

2 years ago

Okay, and do you have a Railway project with both those services deployed? can you attach a screenshot of your Railway project please?


maxivalli
HOBBYOP

2 years ago

Okey

Attachments


brody
EMPLOYEE

2 years ago

Do you have the respective root directories set for the frontend and server services?


maxivalli
HOBBYOP

2 years ago

Yes, at the moment everything is working because I have routing configured with HashRouter, but if I change it to BrowserRouter, it doesn't work.


brody
EMPLOYEE

2 years ago

Great, just needed to make sure you have the Railway side of things setup properly.

https://github.com/brody192/vite-react-template

  • Copy the nixpacks.toml and Caddyfile from this repo into your Client folder.

  • Delete your railway.json file in the Client's folder

  • Change the build script to just vite build in your Client's package.json

  • If you have any build or start commands set in your Client's Railway service settings, remove them.


maxivalli
HOBBYOP

2 years ago

Ok. What repo? I don't see any link? Sorry


brody
EMPLOYEE

2 years ago

Oh, I'm so sorry, the formatting of this form removed it from my comment. Updated.


maxivalli
HOBBYOP

2 years ago

Now I see it. Thank you very much, I'll test it out and come back with updates


brody
EMPLOYEE

2 years ago

Sounds good!


maxivalli
HOBBYOP

2 years ago

I have this error during build

20 [stage-0 14/15] RUN caddy fmt --overwrite Caddyfile

20 0.429 Error: reading input file: open Caddyfile: no such file or directory

20 ERROR: process "/bin/bash -ol pipefail -c caddy fmt --overwrite Caddyfile" did not complete successfully: exit code: 1

[stage-0 14/15] RUN caddy fmt --overwrite Caddyfile:

0.429 Error: reading input file: open Caddyfile: no such file or directory

Dockerfile:34

32 | # fmt phase

33 | COPY . /app/.

34 | >>> RUN caddy fmt --overwrite Caddyfile

35 |

36 |

ERROR: failed to solve: process "/bin/bash -ol pipefail -c caddy fmt --overwrite Caddyfile" did not complete successfully: exit code: 1

Error: Docker build failed


brody
EMPLOYEE

2 years ago

Your Caddyfile is named Caddyfile.txt


maxivalli
HOBBYOP

2 years ago

Maybe when it was downloaded, the extension was added. Now I will try again. Thanks


maxivalli
HOBBYOP

2 years ago

WORKS GREAT!! 🥳 ThankU!!


brody
EMPLOYEE

2 years ago

Awesome! happy to help!


maxivalli
HOBBYOP

2 years ago

Ohhh, some routes doesn't work 😫


brody
EMPLOYEE

2 years ago

Make sure you are doing client side routing.


maxivalli
HOBBYOP

2 years ago

Yes, I'm doing it. I see this error in the console of the browser: Failed to load module script: Expected a JavaScript module script but the server responded with a MIME type of "text/html". Strict MIME type checking is enforced for module scripts per HTML spec.


brody
EMPLOYEE

2 years ago

Can you send me a link to a page where I could see that error for myself?



brody
EMPLOYEE

2 years ago

Okay, I see the issue, i'll try to come up with a solution.


maxivalli
HOBBYOP

2 years ago

Okay, thankU again!



maxivalli
HOBBYOP

2 years ago

Okey, I will try now


maxivalli
HOBBYOP

2 years ago

You are the BOSS!! Now works


brody
EMPLOYEE

2 years ago

Awsome!


maxivalli
HOBBYOP

2 years ago

🫶🏻


brody
EMPLOYEE

2 years ago

<3


Loading...