CODEWITHSUNDEEP
reactjsspringspring-bootthymeleaf
Mart123
Mart123

Reputation: 337

Spring boot + (Thymeleaf is overriding React JS views)

I have created an error page with Thymeleaf and I use it that way because I can send error messages to users through the controller. 

@ExceptionHandler(Exception.class)
public ModelAndView controllerExceptionHandler(
    Exception e,
    HttpServletRequest request) {
    ModelAndView mav = new ModelAndView();
    String[] messages = e.getMessage().split("</br>");
    mav.addObject("message", messages);
    mav.addObject("timestamp", new Date());
    mav.addObject("url", request.getRequestURL());

    mav.addObject("headerMessage", "Error :(");
    mav.addObject("contentMessage", "We are working hard to resolve it.");
    mav.setViewName("error");

    mav.addObject("status", 500);

    return mav;
}

In template file I have something like this:

<h1 class="mr-3 pr-3 align-top border-right inline-block align-content-center" th:text="${status}">404</h1>
<div class="inline-block align-middle">
    <div>
        <h1>Something went wrong...</h1>
    </div>
    <th:block th:each="msg : ${message}">
        <h2 class="font-weight-normal lead" id="desc" th:text="${msg}">The page you requested was not found.</h2>
    </th:block>
</div>

Previously I had a simple React JS application also running with Spring Boot and Thymeleaf and then I used Thymeleaf template to show that. I had a template index.html where was actually React JS build file, so every time I had to copy the build file inside there, JS and CSS files into a static folder (after build). Now the React APP got more complex and I decided to use frontendmaven plugin to build it straight away with backend.

How to tell Spring Boot to not try to use Thymeleaf when resolving ReactJS views? This is how I serve ReactJS views.

@RequestMapping("/")
public String index() {
    return "index.html";
}

Or would it be possible to get rid of Thymeleaf? Is it possible to send variables to ReactJS views through Java controllers when serving those views? The modelandview example?

Upvotes: 1

Views: 2823

Answers (1)

ankidaemon
ankidaemon

Reputation: 1363

How to tell Spring Boot to not try to use Thymeleaf when resolving React JS views?

Remove ThymeleafViewResolver in webconfiguration and switch to Rest api ( @Restcontroller instead of @Controller ). This way you are telling Spring for not to render a view instead act as api-endpoints.

Now you can update your react code to call these Spring rest apis, prebuilt using maven-frontend-plugin and deploy.

Now the question comes, what is the stating point for your application

Only for this purpose, you can create a single controller which will handle request to "/" and will return index page residing under resources/template folder. This index.html page will be using your prebuilt react pages as -

<script src="built/bundle.js"></script>

Demo application: https://github.com/ankidaemon/Spring5-ReactJS/tree/master/Section5/Video5.3/SpringSecurity-Reactjs-RestAPI

Is it possible to send variables to React JS views through Java controllers when serving those views

This is called server-side-rendering, however for react this is different then jsp and freemarker, thymeleaf etc and I would say not an easy way to do it with react. You can try your luck with this -> https://codeburst.io/jsx-react-js-java-server-side-rendering-ssr-2018-cf3aaff7969d

Upvotes: 2

Related Questions