In my last blog post, I created a basic setup for getting started with Spring Boot and React. But some things were still missing, like type-checking JavaScript with flow or running the mocha tests with gradle.

Once again, you can get the current status of the whole project on GitHub: dtanzer/example-react-spring-boot. Feel free to clone this project as a blueprint for your own projects…

Type-Check with Flow

We need some more dependencies to get started, so we’ll add them to web-frontend/build.gradle:

task clientDependenciesDev(type: Exec) {
	commandLine 'npm', 'install', '--save', 'mocha', 'mocha-cli', 'jsdom', 'react-addons-test-utils', 'chai', 'sinon', 'enzyme', 'flow-bin'
}

task clientDependencies(type: Exec, dependsOn: 'clientDependenciesDev') {
	commandLine 'npm', 'install', '--save', 'react', 'react-dom', 'babelify', 'babel-core', 'babel-preset-react', 'babel-preset-es2015', 'babel-plugin-transform-flow-strip-types'
}

And for whatever reason, flow need a web-frontend/package.json:

{
	"name": "react_spring_boot",
	"scripts": {
		"flow": "flow; test $? -eq 0 -o $? -eq 2"
	}
}

And also a web-frontend/.flowconfig:

[ignore]
<PROJECT_ROOT>/build/.*
<PROJECT_ROOT>/node_modules/.*

Now we want to see if flow is working. By default, flow does not check your JavaScript files, so you have to add “//@flow” to them.

//@flow
import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import {HeaderArea} from './headerarea';
//...

Type “npm run-script flow” on your command line, and you should see some output. Probably errors. We’ll get to that later.

$ npm run-script flow

IntelliJ IDEA and FlowType

In IntelliJ IDEA, set the language version for JavaScript files to “Flow”. You can do this in the “Settings” under “Languages and Frameworks” / “JavaScript”.

IDEA set JS language version to Flow

But this only sets the language level. Right now, IntelliJ IDEA does not actually highlight flow type errors by itself. So to actually see the flow errors, you need to install a thrid party plugin: dsilva/webstorm-plugin-flow-typecheck/releases - Just download the latest release and install the plugin from disk.

IDEA add flow plugin

Install flow globally so you can easily run it from the command line. The Flow plugin we just installed needs this.

$ sudo npm install -g flow-bin

And configure the flow plugin.

IDEA configure flow plugin

Congrats: Flow is now working in IntelliJ IDEA - Enjoy seeing JavaScript type errors right in the IDE!

IDEA Flow plugin is working now!

Mocha, FlowType and Gradle

We also want to be able to run the flow type checks and our mocha tests from our Gradle build. There is a gradle plugin for running running tests with karma, but again I did not use it because I could not configure it to make it work with my project setup. So I just added two tasks that run flow and mocha for me:

task checkFlowTypes(type: Exec) {
	commandLine 'node', 'node_modules/flow-bin/cli'
}

task runClientTests(type: Exec, dependsOn: 'checkFlowTypes') {
	commandLine 'node', 'node_modules/mocha-cli/bin/mocha', '--require', 'babel-core/register', 'src/test/javascript/setup.js', 'src/test/javascript/**/*.spec.js'
}

Now you can run the checks and tests with Gradle - On your build server, for example.

Fix all FlowType Errors

When you run flow now, you’ll see a lot of errors:

src/test/javascript/environment.spec.js:2
  2: import { expect } from 'chai';
                            ^^^^^^ chai. Required module not found

src/test/javascript/environment.spec.js:4
  4: describe('the environment', () => {
     ^^^^^^^^ identifier `describe`. Could not resolve name

src/test/javascript/environment.spec.js:5
  5: 	it('should at least run this test, and it should be green', () => {
     	^^ identifier `it`. Could not resolve name

To fix them, we first have to update web-frontend/.flowconfig so it actually includes all node_modules. But then it would produce some errors because of the “fbjs” module. I don’t think they are critical right now, so I set this module to ignore. We also want to ignore everything in the “build” folder, because that’s auto-generated code.

[ignore]
<PROJECT_ROOT>/build/.*
<PROJECT_ROOT>/node_modules/fbjs/.*

[libs]
src/test/interfaces

We have to add an interface for mocha, so that flow can type check the tests we wrote. Just add web-frontend/src/test/interfaces/mocha.js:

declare class describe {
	static (description: string, spec: () =< void): void;
}

declare class it {
	static (description: string, spec: () =< void): void;
}

And now flow should be running with no errors.

$ npm run-script flow

> react_spring_boot@ flow /home/david/Documents/Projects/examples/react-spring-boot/web-frontend
> flow; test $? -eq 0 -o $? -eq 2

No errors!

Configure babel for FlowType

We also want to configure babel so it strips the flow types from our JavaScript files when running browserify - We don’t need them in production mode. So I added a plugin to web-frontend/.babelrc:

{
	"presets": ["es2015", "react"],
	"plugins": ["transform-flow-strip-types"]
}

I did not change anything in the way development mode works (loading the files with system.js), because this works out of the box (at least with Chrome).

What Next?

Now the basic setup works for me - I can run the tests from the build, and I see type errors in my IDE. But there are still some things missing.

Running the tests from the IDE is probably a very simple task. We could do more interesting things, like making our web application isomorphic - I.e. rendering all the react components on the server when loading the application. Or we could actually start to implement something - Like the client/server communication. Maybe in the next blog post ;)

Do you have any feedback/questions? Just contact me!