ReactJs using Play Framework

How do you use Play Framework and ReactJS. There are calls coming in from ReactJS web site where the URLs do not exist.
From some of the searches I did someone wrote that these need to go to index.html. This does not make sense to me.
Is there a good way of using ReactJs and Play framework easily ?

1 Like

I cannot go into detail yet, but I’m trying to write down my lessons learned in DevWebApps-ProjectSetup-preview.pdf - Google Drive (“Two Become One” 1 & 2).

Also take a look at https://github.com/Squoss/Squawg

Best regards,
Paul

1 Like

That URL https://github.com/Squoss/Squawg does not exist get a 404 error

Thanks for the suggestion. I am looking at the pdf and getting a better idea how react and play work.

Yep, you’re right. That’s another draft I wasn’t really ready to publish yet. But I’ve just given you read access to the (still private) repository…

Thank you so much for all this info. I understand play and scala but had no clue of how reactjs works. This is giving me a good understanding of how these 2 fit together. Still need to go through all the doc.

The folks that I am working with is calling an internal reactJS route to the backend play server when a refresh on the web page is done. Obviously that URL does not exists so we are throwing a 404 error. He of course wants us to return index.html on all routes that do not exist in Play routes file. I don’t think that’s the right thing to do. I see some info online that indicate a index.html with a # sign and an internal route should be used by reactJs so appropriate page is displayed by react.
I assume a refresh page should be handled by reactJs and not call backend with that URL. Is this correct ? Any help is greatly appreciated.

No, that’s actually correct: In conf/routes, you map / to (eventually React’s) index.html.

So loading or refreshing https://www.example.com/this/and#that results in Play returning index.html (i.e., React’s anchor) and then React (Router) mapping this/and#that to the correct React component.

I apologize if I misunderstood what you are saying related to the call that gets to the backend.

What the outsourcer is asking is more like any call from React that Play may not understand (not in Play’s routes) passes on a 404 error along with what’s in index.html. This would mean any UI (may not be React) that end up with a 404 error returns’ what’s in index.html

Thank you

That would be fine, though.

The user/browser requests www.example.com/not/a/valid/path.
Play returns (React’s) index.html
React (Router) tries to map /not/a/valid/path to a component, but because non matches, it defaults to NotFound.tsx

  <main className="container">
    <Switch>
      <Route exact path="/"><Abode /></Route>
      <Route path="/events/:event"><EventComponent /></Route>
      <Route path="/acknowledgements" ><ToDo /></Route>
      <Route exact path="/legalese">
        <Redirect to="/legalese/im" />
      </Route>
      <Route path="/legalese/im" ><ToDo /></Route>
      <Route path="/legalese/pp"><ToDo /></Route>
      <Route path="/legalese/tos" ><ToDo /></Route>
      {/* when none of the above match, <NotFound> will be rendered */}
      <Route ><NotFound /></Route>
    </Switch>
  </main>

What if the same call GET “/not/a/valid/path” is called from say a mobile app or code not using React ? The front-end may not know how to use the html page that is returned.

Obviously we don’t want the backend to respond differently based on who the caller is - could be React or Angular or Flutter … ?

Well, if you have a native (mobile) app that needs to talk to the backend, you tell it to use /nativemobileappAPI/… and reserve / (that returns the browser-based React frontend) for end users and their browsers.

If for reasons that I don’t understand you want several front-ends with different technologies baked into the same Docker images as the back-end, you would need /reactBase to return React’s index.html, /angularBase to return whatever Angular uses as the anchor, etc. and have the controller respond to GET / by figuring out what front-end just called and redirect it accordingly. I would never ever do that, however, and rather have the Play app provide an API in one deployment unit and other apps provide various front-ends.

That said, https://railoscope.com/ bakes two front-ends into the same Docker image as the Play backend. And that’s fine because both front-ends use the same technology (React with TypeScript), the user-friendly / is for end-users and returns the end-user front-end whille /somethingElse is for the developers only and returns the admin front-end.

If still relevant, this introductory play list has a few videos about React with Play: https://www.youtube.com/playlist?list=PLLMXbkbDbVt8tBiGc1y69BZdG8at1D7ZF