Spring and React.js: the easy way

I always found Spring framework the most difficult to master, due to its very complex xml configuration.

Webpack also isn’t the best to configure. There are many setups: the loaders for fonts, images, css, etc…, babel for using es6 syntax and other properties that sometimes are tricky to get right.

For those reasons I tried to find an easy way, that I’m going to illustrate in this article, to create a react.js app on top of an existing Spring project (required version >= 3), without the hassle of Spring’s and Webpack’s configuration.

To create a new react app with no build configuration, create-react-app is the best choice!

npm install -g create-react-app

Let’s assume our spring project’s structure as follow

/root
  /src
    /main
      /java
        /react.backend.controller
          MainController.java
      /resources
      /webapp
        /WEB-INF
          /layout
            index.jsp

From the root directory of the project we create a new apps folder and inside of this folder we run: create-react-app [name_of_the_app]. We use demo as name for the react app.

In our new react project we need to change the package.json.

• proxy: in development mode react app will run on webpack-dev-server on a different port. To enable server calls from the client we need to specify the proxy with the server address.

“proxy”: “localhost:8080”

• build: move the build folder to make it available as resource in the Spring project

"build": "react-scripts build && rm -rf ../../src/main/resources/demo/build/ && mv build/ ../../src/main/resources/demo/"

• homepage: specify the path of the build with the static files.

"homepage": "/demo/build"

The project structure will now look

/root
  /apps
    /demo
      package.json
      /src 
  /src
    /main
      /java
        /react.backend.controller
          MainController.java
      /resources
        /demo (react build will go here!)
      /webapp
        /WEB-INF
          /layout
            index.jsp

In Spring project we have to make sure that DispatcherServlet is present in web.xml and resource mapping directory is specified.

web.xml
<servlet>
  <servlet-name>appServlet</servlet-name>
  <servlet-class>
    org.springframework.web.servlet.DispatcherServlet
  </servlet-class>
  <init-param>
    <param-name>contextConfigLocation</param-name>
    <param-value>
      classpath:ctx-core/servlet-context.xml
    </param-value> 
  </init-param>
  <load-on-startup>2</load-on-startup>
</servlet>
servlet-context.xml
<mvc:resources mapping=”/resources/**” location=”/resources/” />

Here is the controller to serve our react application

import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
@Controller
public class MainController {
  @RequestMapping(method={RequestMethod.GET})
  public String index() {
    return “index”;
  }
}

The index.jsp will simply include the build of our react app

<%@include file=”/resources/demo/build/index.html”%>

Now if you run your spring application and browse localhost:8080/myapp you should see your react app up and running!

Demo

here is a working demo using Spring boot.

NOTE: with Spring boot DispatcherServlet is already configured.