Main menu

Spring Boot and React: Flow and Mocha

Mon, 08/22/2016 - 08:30 — david

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:

IntelliJ IDEA and FlowType

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.

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:

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.

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 ;)

My name is David Tanzer and I have been working as an independent software consultant since 2006. I help my clients to develop software right and to develop the right software by providing training, coaching and consultanting for teams and individuals.