spring-jsview-starter

Simple starter project for spring-jsview.

It is a integrated project consisting of Java Server and Javascript client parts in the same repository.

The application is a Spring Boot 2.0 application packaged as a traditional WAR archive which can be run on its own with an embedded server

mvn install
javar -jar target/spring-jsview-starter-0.0.1-SNAPSHOT.war

or it can be deployed in a servlet container.

Watch mode

The starter offers a simple webpack watch mode without hot reloading.

yarn run watch

will start the watch mode.

Note that the server-side is only working correctly when it has a webpack-assets.json file which is generated by the included jsview-webpack-plugin.

So it is best to start the watch mode before you start the server part. I mostly deploy the "exploded WAR" into a tomcat instance integrated into IntelliJ. The "exploded WAR" deployment enables the spring-jsview resource loader to use server-side hot-reloadable file access for the webpack-assets.json and template.html etc.

Key Java Classes

• SpringJsviewStarterApplication.java: Spring Boot main class
• WebConfiguration.java: configures the JsViewResolver
• JsViewController.java: Defines controller methods with two js views and some injected data

Js Views / Webpack Entry-Points

• one.js
• two.js

Base Template

The base template provides the outer HTML structure and can be changed to e.g. include CSS libraries without including them in the webpack build or to change other things.

Integrating other JavaScript Frameworks / Libraries

React.js is the default view technology because of a special fondness I have for this view technology and historically connecting react to Java was the main impetus for creating this.

But on the other hand, there is nothing intrinsically connecting "spring-jsview" to react.

You can easily use any other JavaScript framework or none at all.

The included base template contains a custom typed script block that receives the initial data as JSON blob.

    <script id="root-data" type="x-application/view-data">
        $VIEW_DATA
    </script>

These are the two key lines of "jsview-bootstrap" to parse that custom script block to JSON data.

    const elem = document.getElementById("root-data");
    const data = !!elem && JSON.parse(elem.innerHTML);

First we look for the script element by id and then we parse the JSON body. From there you can feed the initial data to any view technology you like.

Maven Integration

The Java build is done with maven. The pom.xml file uses the maven-frontend-plugin to download a OS-specific local copy of node and yarn to then integrate the JavaScript build into the Maven build.

This project uses yarn as build tool. The maven-frontend-plugin will automatically invoke

yarn install
yarn run build
yarn test

during the corresponding phase of the maven build. If you don't have maven installed you can use the included "mvnw"/"mvnw.cmd" depending on your platform.