Challenge with Routing in ReactJS SPA

[SALIM MWAURA]

Hello, I have created a React SPA within an app, and the website_route_rules are automatically set up in hooks as follows.:

-Frappe app name: haulster
-SPA name : frontend

-website_route_rules = [{'from_route': '/frontend/<path:app_path>', 'to_route': 'frontend'}]

-react-router-dom routes:

          <Routes>
            <Route path="/" exact element ={<Trip/>}/>
            <Route path="/fuel" exact element ={<FuelRequest/>}/>
            <Route path="/maintenance" exact element ={<MaintenanceRequest/>}/>
          </Routes>
        </Router>```

-Problem: None of those routes are being rendered on production that is returning a blank page. Yet in developer mode (```localhost```)  the pages are being rendered.


![prod_environment](https://user-images.githubusercontent.com/12731579/209992337-9d12d0a4-1d16-4352-ad62-8b6e08aa5119.png)
![dev_environment](https://user-images.githubusercontent.com/12731579/209992354-0fbeb277-dedd-46fb-8ab6-0decc1077164.png)

[SALIM MWAURA]

[SALIM MWAURA]

@NagariaHussain

[Md Hussain Nagaria]

Hey! Is the frontend.html being built inside the www folder after bench build?

Also, anything in browser console?

[SALIM MWAURA]

Yes it is being built.

…

On Fri, 30 Dec 2022, 19:54 Mohammad Hussain Nagaria, < ***@***.***> wrote: Hey! Is the frontend.html being built inside the www folder after bench build? Also, anything in browser console? — Reply to this email directly, view it on GitHub <#15 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/ADBEJOZDUETPO7CDDPLS7IDWP4HVRANCNFSM6AAAAAATMJSP5M> . You are receiving this because you authored the thread.Message ID: ***@***.***>

[SALIM MWAURA]

Nothing on the browser console.

…

On Fri, 30 Dec 2022, 19:54 Mohammad Hussain Nagaria, < ***@***.***> wrote: Hey! Is the frontend.html being built inside the www folder after bench build? Also, anything in browser console? — Reply to this email directly, view it on GitHub <#15 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/ADBEJOZDUETPO7CDDPLS7IDWP4HVRANCNFSM6AAAAAATMJSP5M> . You are receiving this because you authored the thread.Message ID: ***@***.***>

[Md Hussain Nagaria]

@nikkothari22 might be able to help with React Router issue, I am more familiar with Vue 😅

[SALIM MWAURA]

Hi @nikkothari22 any input on this?

[Nikhil Kothari]

Hey @saleemdev,

On production, you need to set a basepath in your BrowserRouter with a prop.

The base path will be the name of your SPA. So for example, if your SPA is rendered on /dashboard, your base path will be "dashboard"

The way I do this is by defining the basepath as an environment variable. It's undefined on dev, and only set for production builds.

[SALIM MWAURA]

Hi @nikkothari22 will try this on my end and share feedback. Thanks so much.

[SALIM MWAURA]

Thankyou so much @nikkothari22 and @NagariaHussain Nikhils solution works perfectly

[Md Hussain Nagaria]

@nikkothari22 Maybe we should have a starter template for a frappe-react-sdk app (maybe with ChakraUI and a popular client side route?), just like we have for frappe-ui.

[SALIM MWAURA]

@nikkothari22 working on one using ant-d, might I share that ?

[Md Hussain Nagaria]

That would be awesome @saleemdev

[Nikhil Kothari]

@nikkothari22 working on one using ant-d, might I share that ?

Yes absolutely!

[Nikhil Kothari]

@nikkothari22 Maybe we should have a starter template for a frappe-react-sdk app (maybe with ChakraUI and a popular client side route?), just like we have for frappe-ui.

Any chance that I can write a tutorial or documentation on either the Frappe Framework docs, or on the blog? I think that would be even more helpful, along with a starter template.

[Md Hussain Nagaria]

Amazing idea! Will get it published as a guest post on frappe blog. Also, we can link that in docs etc.

[Md Hussain Nagaria]

Feel free to ping me on TG, we can chat more details there Nikhil.