Support Topics Documentation Slack YouTube Blog

React Router

react

(Nicolás) #1

Is it possible to host a react app in backendless?

I’m having problems to handle react routes. Usuarlly this is solved with a .htaccess or a config change in nginx (https://stackoverflow.com/questions/43951720/react-router-and-nginx)


(Vladimir Upirov) #2

Hi Nicolas

Do you want to put your React app into your Backendless Files, right?
Could you please create a simple project to reproduce the issue?
What version of React-router do you use?

Thanks, Vlad


(Valerii Vanziak) #3

Vladimir, I can provide an example.
I guess what Nicolas meant that all of the “sub-directories” has to be served by same script.
For example if you put your static web app (which is a Single Page React application with React Router) under folder /web/app you want all the sub folders, e.g. /web/app/subfolder to be served (routed) by /web/app. Currently /web/app/subfolder fails with 404 because such folder doesn’t exist.
Usually on apache web server it might be solved by applying .htaccess config, but it looks like Backendless doesn’t support it yet (according to Is there support for .htaccess files inside cloud hosting?).


(Vladimir Upirov) #4

Hi Valerii

We’ve solved the issue in Slack:

unfortunately you can not configure it through nginx, we do not provide the feature, the File Storage is not intended only for storing single page applications, there are many others files which must be handled correctly (if the looking file is not exist the server must return 404), for example LandingPage - it’s a simple html site

in order to your JS router start parsing incoming url, the router must be initialized before, I mean, your main JS file must be executed on the client and run ReactRouter, since the js file required in index.html, the html file must be loaded.

So, as I said before you have only one way, it’s HashRouter, the kind of routers don’t change browser’s pathname, it only works with url hash, in your case you will have the next routers in your address panel

  • mydomain.com/#/login
  • mydomain.com/#/users/5

but in your code it will be the same if you used BrowserRouter

Regards, Vlad