Spring-Boot with React JavaScript

Question

As the title says I'm dealing with Spring Boot and react JavaScript at the moment. I would really appreciate it if someone would be able to answer me on a few small questions.

1. I created a separate react project using vscode IDE. Now I need to add it to my Spring Boot application. I have used Eclipse to code my Spring Boot application.Can I just transfer the react JavaScript files to the Eclipse IDE? Will it work like that?

2. Also, to configure these two together I read that I should use thymeleaf. What are you thoughts on this and do you think its better to use this.

Answer 1

You may not require to transfer any code from one IDE to another. I assume both this front-end(react) and middle layer(spring boot) are two separate project.

You can still run the boot project in eclipse pointing to same localhost(for development) with a different port and front-end in a different port.

I found this example is quite useful

Answer 2

The modern way to think about your React and Spring apps as of two completely separate applications. The React app is the "front end" application that is displayed to the user and holds the logic for all the user interactions. Spring boot is the "back end" service that holds the state of your application and helps you to save and fetch data.

To get started try building and running your React app from something like Create React App . It is easy to set up a local development server. You should also understand that the React app that you get after building is just some static files - so you can host them very easily and cheaply without need for an actual server. I personally use S3.

Now to your Spring application. This is your 'API' layer and you should read about using APIs for example here: Official Spring Docs . You still theoretically CAN bundle both together and serve the React bundle out of the Spring static files directory but you will likely find this will get awkward fast. Here is an example of someone doing exactly this

As for Thymeleaf - in the React world you will likely end up using JSX for your templating needs. It is a wonderful way of closely integrating your js and html code and creating highly reusable components.

Answer 3

You can build an automated container deployment. This allows you to test, build and deploy your backend and frontend with every git push to your server.

For example google some keywords: Kubernetes, Docker, Gitlab CI. There are much more solutions and platforms to build a system for automating deployment.