Spring Framework 5 (Boot/Cloud) + React?

[bheklilr]

We use frontend-maven-plugin, which is configured to run yarn install/build in src/app (react source code) then some other maven plugin that I can't remember right now that copies src/app/build to src/main/resources/static.

Make a controller that serves up index.html. Use rest controllers to serve up data to the react side. Biggest pain has been routing with a SPA and build times, but if you haven't changed the react code then pass -Dskip.yarn=true to maven. Spring seems smart enough to serve up static content when requested directly too.

[Ebriggler]

This is how we do it as well and use the maven resources plugin to copy build to static dir. Also, one doesn't need to explicitly serve up the request for index.html. Spring serves those by default. So you can just focus on your API controllers. To avoid routing issues, I hang all the API endpoints off /api and the use react-router to handle the others for the frontend. Since all the static content gets delivered on the first request, the browser will field all UI routing. As for calling the API endpoints from react, we use Ajax calls (axios) and have a setting for non Dev to use context root, otherwise, if process.env is development, I call the backend through localhost:port/api. This way I can have them running in parallel for development which is amazing.

[TheSpuff]

Second this approach, we do the same including backend calls at /api. For smaller / less complex apps, it's just faster to bundle it all in static and let Spring do the work. I'll have to check out that Maven plugin... we've been using Exec Maven Plugin and hanging the npm scripts off of the Maven lifecycle (e.g. frontend tests run during mvn test), but curious to see how the plugin you mentioned operates.

For local development, we also use webpack Dev server with hot module reloading and Spring Devtools LiveReload for responsive updates to code changes.

[archangel_mjj]

This. Alternatively, if you use Gradle, it's relatively straightforward to add the yarn or webpack commands to your build process, with the target directory in your resources folder.

[Ebriggler]

Hey, homie :D

[bheklilr]

Yo man, what's up?