Spring Boot with ReactJS

if you use maven you can build your react javascript files on mvn compile or mvn spring-boot:run

include in pom.xml:

    <build>

    <plugins>

        <plugin>

            <groupId>org.springframework.boot</groupId>

            <artifactId>spring-boot-maven-plugin</artifactId>

        </plugin>

        <plugin>

            <groupId>com.github.eirslett</groupId>   <!--Apache 2.0 https://github.com/eirslett/frontend-maven-plugin/blob/master/LICENSE  -->

            <artifactId>frontend-maven-plugin</artifactId>

            <version>1.2</version>

            <configuration>

                <installDirectory>target</installDirectory>

            </configuration>

            <executions>

                <execution>

                    <id>install node and npm</id>

                    <goals>

                        <goal>install-node-and-npm</goal>

                    </goals>

                    <configuration>

                        <nodeVersion>v6.3.1</nodeVersion>

                        <npmVersion>3.9.2</npmVersion>

                    </configuration>

                </execution>

                <execution>

                    <id>npm install</id>

                    <goals>

                        <goal>npm</goal>

                    </goals>

                    <configuration>

                        <arguments>install</arguments>

                    </configuration>

                </execution>

                <execution>

                    <id>webpack build dev</id>

                    <goals>

                        <goal>webpack</goal>

                    </goals>

                </execution>

            </executions>

        </plugin>

    </plugins>

</build>

this will install npm and build your react modules. make sure you have a webpack.config.js and package.json in the same directory:

ill include this as an example: package.json:

 {

  "name": "app",

  "version": "0.0.1",

  "description": "",

  "repository": {

    "type": "git",

    "url": ""

  },

  "keywords": [

    "data"
  ],

  "author": "xxx",

  "license": "",

  "bugs": {

    "url": ""

  },

  "homepage": "",

  "dependencies": {

    "react": "^15.3.2",

    "react-dom": "^15.3.2",

    "prop-types": "^15.5.10",

    "rest": "^1.3.1",

    "webpack": "^1.12.2"

  },

  "scripts": {

    "start": "node_modules/.bin/webpack-dev-server --progress --inline --hot",

    "watch": "webpack --watch -d"

  },

  "devDependencies": {

    "babel-core": "^6.18.2",

    "babel-loader": "^6.2.7",

    "babel-polyfill": "^6.16.0",

    "babel-preset-es2015": "^6.18.0",

    "babel-preset-react": "^6.16.0",

    "babel-preset-react-hmre": "^1.1.1"

  }

}

webpack.config.js:

var path = require('path');

var node_dir = __dirname + '/node_modules';

module.exports = {

    entry: {

        app: './src/main/js/app.jsx',

    },

    devtool: 'sourcemaps',

    cache: false,

    debug: true,

    resolve: {

        alias: {

            'stompjs': node_dir + '/stompjs/lib/stomp.js',

        }

    },

    output: {

        path: __dirname,

        filename: './src/main/resources/static/js/bundled/[name]bundle.js'

    },

    module: {

        loaders: [

            {

                test: path.join(__dirname, '.'),

                exclude: /(node_modules)/,

                loader: ['babel-loader'],

                query: {

                    //cacheDirectory: true,

                    presets: ['es2015', 'react']

                }

            }

        ]

    }

};

"/src/main/js/app.jsx" -> this is your entrypoint then where you should write your react code. In your thymeleaf or jsp files include the bundled javascript. (js/bundled/appbundle.js)

Your app.jsx could look like this:

const React = require('react');
const ReactDOM = require('react-dom');
import {MainPage} from './mainpage.jsx';

let exampleprop= 2;

ReactDOM.render(<MainPage prop1={exampleprop}  />, document.getElementById('app_root'));

You don't need to use webpack for starters. Just download the react, react-dom and babel libraries from react's website and put them to src/main/resources/static/js folder and import them on your html tags. For advanced scenarios you will probably need npm and webpack itself. Java based tools for that kind of development will have limited feature set.

Automatic reloading can be done with spring-boot-devtools. Just include it as a dependency and whenever you Make your project (by IDE or mvn compile) it will reload the server automatically so your changes will get reflected.

You can refer to this project: https://github.com/vcycyv/react-redux-typescript-saga-webpack-springboot-jpa-pomotodo It is by me. Basically, you may need two modes: development mode and projection mode. The difference is, development mode hot reloads code. According to your question, you are more interested in projection mode. you can use a bundle tool like webpack to generate the bundle.js, and refer the file from index.html. Let me highlight some code snippet from the project above: in webpack.config.js:

    output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, '../../../src/main/resources/static')
}

in index.html:

  <body>
<div id="root"></div>
<script src="./bundle.js"></script>