We have 2 configuration files: one is in our Spring Boot application (application.properties) and another in our ReactJs app (we use .env in create-react-app). It was decided to use Spring Boot application.properties also in ReactJs app. Can anyone please guide me how can I achieve this? I have read about "properties-reader" and tried to use it, but I don't have webpack.config.js file in our ReactJs app.
1 Answer
Thymeleaf provides the easiest way to pass data from application.properties file to Javascript via the template (index.html) file.
Alternatively, it can be done using normal JSP also.
Here are the working examples:
Option 1: Thymeleaf
Step 1: Define the interesting data attributes as hidden elements in the index.html file
<div id="root"></div> ---> Div to be updated by react
....
<span id="myData" hidden></span>
<!-- Script to set variables through Thymeleaf -->
<script th:inline="javascript">
var myData = "[${myData}]]";
document.getElementById("myData").innerHTML = myData;
</script>
Important note: Make sure that the same index.html file exists in the '/public' folder of Reactjs project as well as in the /src/main/resources/templates/ folder of the spring boot project.
Step 2: Use model.addAttribute() method in Spring Boot to invoke Thymeleaf for setting data in the index.html file
@GetMapping("/")
public String index(Model model) {
// Get the value of my.data from application.properties file
@Value("${my.data}")
private String myData;
// Call Thymeleaf to set the data value in the .html file
model.addAttribute("myData", myData);
return "index";
}
Step 3: Update the ReactJS code to read the interesting attribute using document.getElementById
let myData = document.getElementById("myData").innerHTML
More information:
https://www.thymeleaf.org/doc/tutorials/3.0/usingthymeleaf.html#javascript-inlining
https://attacomsian.com/blog/thymeleaf-set-javascript-variable
Option 2: JSP
Step 1: Define the interesting data attributes as hidden elements in the index.jsp file
Location of index.jsp: src/main/webapp/WEB-INF/jsp/index.jsp
<!DOCTYPE html>
<%@ taglib prefix="spring" uri="http://www.springframework.org/tags"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<html lang="en">
<head>
<!-- Head section here -->
</head>
<body>
<!-- Div to be updated by react -->
<div id="root">
</div>
<!-- Include the interesting attribute as a hidden field -->
<span id="myData" hidden>${myData}</span>
</body>
</html>
Important note:
Make sure that the /public/index.html file of reactjs project has the same content (<body>...</body>) as that of the src/main/webapp/WEB-INF/jsp/index.jsp file of spring boot project)
Step 2: Use map.put() in Spring Boot controller to update data in JSP
import java.util.Map;
import org.springframework.beans.factory.annotation.Value;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.GetMapping;
@Controller
public class HomePageController{
// Read data from application.properties
@Value("${my.data}")
private String myData;
// Update data attributes of JSP using map.put
@GetMapping("/")
public String index( Map<String, Object> map ) {
map.put("myData", myData);
return "index";
}
}
Step 3: Update the ReactJS code to read the interesting attribute using document.getElementById
let myData = document.getElementById("myData").innerHTML
More information:
https://mkyong.com/spring-boot/spring-boot-hello-world-example-jsp/
