Architecture built using Java + Spring with React
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.mvn/wrapper
src
.babelrc
.editorconfig
.eslintignore
.eslintrc
.flowconfig
.gitignore
.project
LICENSE
README.md
mvnw
mvnw.cmd
package.json
pom.xml
webpack.config.js

README.md

oak

Architecture for Java backend with React in client-side.

Stack

  • Webpack to bundle all the JavaScript and dependencies, plus LESS + CSS handling.
  • Babel for ES6 syntax, using Babel 6 with the "es2016" and "react" presets.
  • Hot module reloading (HMR) of React components
  • Redux to manage state, both in the client and when rendering on the server.
  • react-router for page routing, on client and server. Note that this is version 4, with a very different (and simpler) API to previous versions.
  • Linting integrated with Webpack via eslint.
  • Type checking with Flow.

Development

You'll need Java8 installed either way at a minimum version of 1.8.0_65. Older versions have a bug that makes rendering brutally slow.

# if maven installed
mvn

# or, from scratch
./mvnw

# init webpack module
npm start

Resources

Conventions

Controllers that render views are suffixed with Controller. REST endpoints are suffixed with Resource, and handle requests under /api.

Testing the webpack bundle

In order to pre-empty runtime errors with Nashorn loading the bundle, a test script is executed by Maven during the test-compile phase, located at src/test/js/test_bundle.js. If this script fails, you can diagnose the problem by:

  • Running a debug build with npm run debug. This runs webpack in a production mode but without uglification.
  • Run the script again: jjs src/test/js/test_bundle.js
  • Look at the line in the bundle from the stacktrace and figure out the problem.

It's easy to create a bundle that's broken on the server by including code that expects a DOM - and that includes the Webpack style loader. This is the root of most problems. You should note that server-side rendering does not require a DOM - which is why src/main/resources/static/js/polyfill.js doesn't provide any window or document stubs.