Client-side routing?

[Jpunt]

How did you fixed client-side routing? I use react-router, which works fine in development, because webpack is running a dev-server. But in production/on now/using serve, it works until I refresh the page when I'm on a route. This makes sense, because that route does not point to a file on disk. What's the best way of fixing this?

[xkawi]

@Jpunt If u refresh the page, you probably need a server code to handle the routes and pass it to the client code for react router to handle. For instance, you can use express for the server code and use react router match function to handle the incoming routes and pass it down to the client side (this is just my thought, probably need to give it a shot myself to see if it works this way). Think of it like an isomorphic react app.

In fact, if you are refering to the latest commits, create-react-app-now does not fix the page refresh issue (it will throw Not Found if you refresh the page), but if you navigate within the page itself it works fine since it's client code.

On a side note, if you are not required to use CRA, do checkout NextJS (if you haven't of course) as it offers better API imo and works pretty well with Now.

[xkawi]

Some of these links might be of help to you:

facebook/create-react-app#1100
facebook/create-react-app#641
https://medium.com/@patriciolpezjuri/using-create-react-app-with-react-router-express-js-8fa658bf892d#.n6hdbho1k
facebook/create-react-app@8199087
https://react-router.now.sh/basic

[Jpunt]

Thanks. The trick was the amazing --single or -s option of serve. This makes it behave as a single page app 👍

[RamiroIsBack]

hey , I know this is already closed but I still have that problem and I don't understand that solution Jpunt found where do you set that --single ? Is it in your server where you host your app?

[xkawi]

@RamiroIsBack You use --single when you are running the code using serve. Refer to https://github.com/xkawi/create-react-app-now/blob/master/package.json "now-start" command.

Additionally, refer create-react-app official documentation regarding the deployment: https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#deployment

[RamiroIsBack]

Thanks for pointing me in the right direction, going through the official documentation regarding the deployment, says that serve is used for environments using Node, and all the examples and docs about it are using Node. My app is pure react front-end and I'm using firebase for the back-end tasks.
-Do you see another way to make the routing work in production?
-Or does it means that I have to set a back-end for it in Node, so I can use serve to make my web-app work as a single page app caching all the front-end routing and pointing it to index.html? did I get it right?

thanks for the time and effort @xkawi

[xkawi]

Yup, think you get it right. Because “serve” acts like the Node backend that host/run/serve your static react code, which will also handle the routing for you. You don’t need to do anything with your react frontend code or write your own Node backend. Simply host/run your react front-end code using “serve -s <path to the production built react code>”, as it acts like a static web server. You can still deploy your static react frontend code to static hosting like aws S3, just that the routing won’t work properly on page refresh. At least that’s the case when I last tried it, which is almost a year ago. Hope this gives you better idea on how everything works together. Let me know if I didn’t get your question right, so I could try to provide better explanation. :) Cheers!

…

On 16 Nov 2017, at 11:04 PM, Ramiro Santamaria Alvarez ***@***.***> wrote: Thanks for pointing me in the right direction, going through the official documentation regarding the deployment, says that serve is used for environments using Node, and all the examples and docs about it are using Node. My app is pure react front-end and I'm using firebase for the back-end tasks. -Do you see another way to make the routing work in production? -Or does it means that I have to set a back-end for it in Node, so I can use serve to make my web-app work as a single page app caching all the front-end routing and pointing it to index.html? did I get it right? thanks for the time and effort @xkawi — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub, or mute the thread.

[RamiroIsBack]

that was perfect explanation, and it works perfect locally through serve, cos I installed it globally on my laptop, but when I upload my build content to my hosting server and is out there , refreshing the page on one of the routes keeps on giving me:

Not Found
The requested URL /contact was not found on this server.

Any idea how can I make it work as it works locally through serve?

[xkawi]

@RamiroIsBack what is your hosting provider? as you probably need to check how you can deploy a nodejs app into it, means projects that has package.json in it.

if you use Now, it's probably will just work, provided that you have:
"now-start": "server -s ./build"
as one of the npm script in package.json

[RamiroIsBack]

All right, I had the app on heroku for testing and their servers can handle routing on the client side no problem, but now my clients hosting provider doesn't, and as you suggested I asked them if I could deploy a nodejs app but you have to pay for that service and it's out of budget so...

Since I only have 5 routes on my single page app what I did is to write an html page for each of them and a .js file that controls and redirect them to index.html, this way, I at least catch what suppose to be working on my end, and the 404 is well handled from the server for mistakes or misspellings

I want to thank you @xkawi again for your help!

[xkawi]

@RamiroIsBack Anytime. Glad to hear that it’s working on your end now. 👍😊