jacekschae / learn-re-frame-course-files

:cinema: Learn re-frame course files for building Cheffy app
https://www.learnreframe.com/
57 stars 43 forks source link

Routing doesn't work correctly in release mode #17

Open chase-lambert opened 1 year ago

chase-lambert commented 1 year ago

Hello, I have just completed the router section that uses pushy/bidi and allows us to use urls like localhost:3000/sign-up and everything works correctly in dev mode. I can hit reload when it is at a path like localhost:3000/sign-up and it works as expected.

However, when I build a release app and try to do the same, it never works. I run npm run release and use any basic http server like basic-http-server public/ the app works only at the index page (localhost:3000). If I reload the page when it is at something like localhost:3000/sign-up or just go to that link directly while the server is running I get a 404 error.

Is this addressed later in the course or how can we go about getting this working right?

jacekschae commented 1 year ago

Hi Chase,

Thanks for your message. I cover creating the release bundle at the end of the course.

Also the app is published here: https://app.learnreframe.com so you can see how everything works.

I think what happens in your case is that you are trying to access a path on the server that doesn't exist. The first thing that needs to load is index.html file so that the JS can kick-in and take over the routing. When you access another path on the server the server doesn't know; doesn't have a file on /sign-up the JS can't kick-in and you get 404.

The first thing that needs to happen is loading index.html and then the routing will be done client side, not server side.

Hope that helps

chase-lambert commented 1 year ago

Ok, yes that makes sense and was kind of how I was thinking it should go. I'll continue working through the course. I am building out my own full stack Clojure/ClojureScript app so keep pausing your courses, applying the lessons to my own project, and then continuing.

I haven't yet figured out how to fix this routing issue with my own server code (simple jetty server using reitit so hoping your third course covers this well) but your demo app you linked almost works as expected (if you go straight to https://app.learnreframe.com/become-a-chef it shows the correct page but the upper nav bar shows you as being on recipes but that's not that big a deal) so I will see you how do that at the end of the course.

Thanks for the quick response!

jacekschae commented 1 year ago

You could do catch all routes and server index file. That would be probably the easiest.

The bug with the frontend I also noticed when I opened the app 😅 and I'm sure you will figure this out after completing the course.