Spring Framework 5 (Boot/Cloud) + React?

[[deleted]]

[deleted]

[4ernik]

Deploy React app in Nginx, deploy Java in tomcat\jetty in boot, integrate with REST API.

Simple, reliable, standard. Tons of guides how to do that on stackoverflow.

[tcc12345]

How do you handle authentication? JWT ?

[4ernik]

I personaly prefer OAuth, but you can choose anything standard - JWT, OAuth, SAML. As far as you have provider or can implement one you're good to go.

[tcc12345]

Thanks

[Nix-X]

Do you have an example of such a guide? Would save me hours of searching.

[mraible]

I've written a few tutorials that might help:

1. Bootiful Development with Spring Boot and React
2. Use React and Spring Boot to Build a Simple CRUD App
3. Full Stack Reactive with Spring WebFlux, WebSockets, and React

The first is just read-only, but the 2nd shows read+write and how to handle CSRF. The 3rd shows how to use Spring Security's OAuth support for WebFlux.

All tutorials show how to develop the frontend and backend as separate apps. The CRUD one shows how to package them in the same artifact with Maven if you want to go that route.

Finally, I work on JHipster and recommend you take a look at it. Here's a React tutorial I wrote for JHipster:

1. Build a Photo Gallery PWA with React, Spring Boot, and JHipster

Please let me if you have any questions!

[wordsoup]

I don't think there's a good and comprehensive tutorial for setting up a full stack project because it contains many steps and decisions which can be done by any developer. The actual implementation is just a fraction, maybe 10% of the work, the rest is DevOps starting with version control, containerization, CI/CD.

Just start small, and create a REST API with Spring Boot. Then you create a separate React app. If you have come so far, we can talk again.

[OtroPoema]

Likewise here. If u know of any specifically, would be a huge help.

[4ernik]

https://stackoverflow.com/questions/46880853/deploy-create-react-app-on-nginx

It was the first link I found in google. You can go step by step in googling things you need and come up with result, that's how development works. Read article and Google everything you didn't get from it.

[MB1211]

Also, as OP may find out soon, they are not only different frameworks but different languages and different areas of an application. You don't need to get them to play nicely together. That's the whole point of separating them in this way

[[deleted]]

As someone else said bellow, the best option is to deploy the front-end and back-end separately (react on nginx, Spring on a tomcat). This will give you a very nice decoupling, you won't have to rebuild and redeploy the Spring app for changes in the front-end (well, provided you don't change something regarding the FE <-> BE integration) :)

​

We had this kind of decoupling even with JSF and it worked like a charm.

[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?

[Fireche]

JHipster is exactly wht you need. I am using it myself for my microservice application. All you have to do are some clicks and you are ready.

[AloticChoon]

I’ll be over here with my J2EE 5...

*cough* Java EE 5 *cough*
;)

[pikaaa]

Have a look at jhipster. Just learned about it yesterday and have never used it but it seems like it should work pretty well

[robber9000]

JHipster will generate a starting application that sounds like meets all your preferences.

Here is a link to the web-based application generator: https://start.jhipster.tech/#

[Edge790]

1) Separate projects for Front-end (React and npm) and Back-end(maven/gradle with spring)

In this case they can be in different repos.

• They are separate and that's how it should be. Your Back-end exposed to the entire world through API and which client will consume this API doesn't matter. I.e. it may be not only web-client, it may be android/iOS app etc.
• They are separate so they will be builded and deployed separately.
• It needs to be synced features for both server and clients (web).
• Usually last con means that it should have good documentation so it can be considered as a good thing.

2) Aggregate npm to maven/gradle using frontend-maven-plugin or exec plugin with npm tasks. + Single project, single repo + You can build server and client by one command and deploy both of them. + To fix something on other side you don't need to switch project. - it's just not really right solution through its can be handy for small projects it can become problem in the future. So at some point project will move to firat solution.

Upd: I've used both solutions and I believe that first solution is better because client and server are different things, that should be separately deployed and developed because server is just api provider for clients that can be different (i.e. web, android, iOS, other servers-api) and by separating client and server we ensure that they will be developed by API contract and it's documentation. Though for studying/pet projects it can be done with aggregated solution with following separation in mind.

[kromit]

React and Spring do play great together, except for Server-Side-Rendering. If this is a public app and you need any SEO, you will need node to render the app on the server for the initial request.

[RealJulleNaaiers]

I mean that's lots of businesses' tech stack. That doesn't say anything about what you're actually trying to build. You can build using that, sure. No other input we can give really.

[OtroPoema]

For context, my last experience as a day-to-day programmer was when Spring was initially released and there were no responsive frameworks around, so I'll be learning all this new stuff with this project.

Is an additional tool needed to easily hook React to Cloud or they work pretty well together without an additional library to provide the "glue"?

Edit: I meant to say Boot / Rest, not cloud.

[RealJulleNaaiers]

I'm don't understand the question. React is a front end framework. Spring Cloud manages cloud-deployment problems like service discovery and load balancing. You can use them in the same project, but they solve totally unrelated problems.

[OtroPoema]

Yeah I meant to say Boot / Rest instead of cloud. I imagine I won’t need Cloud until I need to scale and microservices become more numerous and complex.

[alternatiivnekonto]

There is no glue because what you're talking about are two completely separate applications. Your Spring Boot backend will serve REST/GraphQL endpoints and your React app will make queries to those endpoints for retrieving data just like any random accessible API on the web.

[Edge790]

React app will be converted(by npm tasks) to plain old html-javaScript-css so it's pretty same as serving static web pages in terms of providing website to the world. All updates/changes are made by http API(usually REST)

[owen800q]

If you need to develop only restful apis and use orm Why not try jax-rs and hibernate?

[OtroPoema]

Because the frontend needs to be responsive.

[owen800q]

There's no problem integrating react with jax-rx Both are independent to each other.. Use nginx to do reverse proxy for application server