Challenge with Routing in ReactJS SPA

[saleemdev]

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)

[saleemdev]

[saleemdev]

@NagariaHussain

[NagariaHussain]

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

Also, anything in browser console?

[saleemdev]

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 https://github.com/NagariaHussain/doppio/issues/15#issuecomment-1368009682, or unsubscribe https://github.com/notifications/unsubscribe-auth/ADBEJOZDUETPO7CDDPLS7IDWP4HVRANCNFSM6AAAAAATMJSP5M . You are receiving this because you authored the thread.Message ID: @.***>

[saleemdev]

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 https://github.com/NagariaHussain/doppio/issues/15#issuecomment-1368009682, or unsubscribe https://github.com/notifications/unsubscribe-auth/ADBEJOZDUETPO7CDDPLS7IDWP4HVRANCNFSM6AAAAAATMJSP5M . You are receiving this because you authored the thread.Message ID: @.***>

[NagariaHussain]

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

[saleemdev]

Hi @nikkothari22 any input on this?

[nikkothari22]

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.

[saleemdev]

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

[saleemdev]

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

[NagariaHussain]

@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.

[saleemdev]

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

[NagariaHussain]

That would be awesome @saleemdev

[nikkothari22]

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

Yes absolutely!

[nikkothari22]

@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.

[NagariaHussain]

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

[NagariaHussain]

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