Tuesday, August 18, 2015

Spring boot static web resource handling for Single Page Applications

Javascript build tools like gulp and grunt truly boggle my mind, I look at one of the build scripts for these tools and find it difficult to get my head around it and cannot imagine writing one of these build scripts from scratch. This is where yeoman comes in, a very handy tool that quickly allows one to bootstrap a good starter project using any of the myriad combination of javascript build tools.

I wanted to explore an approach which Spring framework recommends for handling static web resources, which is to use these very capable build tools for building the static assets and using Spring for serving out the content once the static assets are built into a distributable state.

My approach was to use yeoman to generate a starter project, I chose the gulp-angular as my base and quickly generated a complete project, available here. I was able to expand this template into a fairly comprehensive angularjs based single page application which delegates back to Spring based REST calls to service the UI.

The steps that I followed are the following, mostly copied from the excellent sample created by Brian Clozel:

If you want to follow along the end result is available in my github repo.


  1. Define two modules, the "client" module to hold the generated yeoman template and a "server" module to hold the Spring Boot application.
  2. Hack away on the "client" module, in this specific instance I have created a simple angularjs based application
  3. I am using maven as the java build tool so I have a wrapper maven pom file which triggers the javascript build chain as part of the maven build cycle, then takes the built artifacts and creates a client jar out of it. The static content is cleverly placed at a location that Spring boot can get to, in this instance at the classpath:/static location.
  4. In the "server" module client is added as a dependency and "server" is set to be run as a full-fledged spring-boot project
  5. Serve out the project from the server module by executing:
    mvn spring-boot:run
    

Conclusion


Spring Boot has taken an excellent approach to providing an asset pipeline for static web resources which is to not interfere with the very capable build tools in the Javascript universe and providing a clean way to serve out the generated static content.

1 comment:

  1. As of 2016-09-17, using mvn eclipse:eclipse throws many error due to deprecation. E.g.:
    [ERROR] npm WARN package.json hotelsApp@0.0.0 No description
    [ERROR] npm WARN package.json hotelsApp@0.0.0 No repository field.
    [ERROR] npm WARN package.json hotelsApp@0.0.0 No README data
    [ERROR] npm WARN package.json hotelsApp@0.0.0 No license field.
    [ERROR] npm WARN deprecated wrench@1.5.9: wrench.js is deprecated! You should check out fs-extra (https://github.com/jprichardson/node-fs-extra) for any operations you were using wrench for. Thanks for all the usage over the years.
    [ERROR] npm WARN peerDependencies The peer dependency jasmine-core@* included from karma-jasmine will no
    [ERROR] npm WARN peerDependencies longer be automatically installed to fulfill the peerDependency
    [ERROR] npm WARN peerDependencies in npm 3+. Your application will need to depend on it explicitly.
    [ERROR] npm WARN peerDependencies The peer dependency phantomjs@>=1.9 included from karma-phantomjs-launcher will no
    [ERROR] npm WARN peerDependencies longer be automatically installed to fulfill the peerDependency
    [ERROR] npm WARN peerDependencies in npm 3+. Your application will need to depend on it explicitly.
    [ERROR] npm WARN deprecated minimatch@2.0.10: Please update to minimatch 3.0.2 or higher to avoid a RegExp DoS issue
    [ERROR] npm WARN deprecated minimatch@1.0.0: Please update to minimatch 3.0.2 or higher to avoid a RegExp DoS issue
    [ERROR] npm WARN deprecated graceful-fs@2.0.3: graceful-fs v3.0.0 and before will fail on node releases >= v7.0. Please update to graceful-fs@^4.0.0 as soon as possible. Use 'npm ls graceful-fs' to find it in the tree.
    [ERROR] npm WARN deprecated minimatch@0.2.14: Please update to minimatch 3.0.2 or higher to avoid a RegExp DoS issue
    [ERROR] npm WARN deprecated lodash@1.0.2: lodash@<3.0.0 is no longer maintained. Upgrade to lodash@^4.0.0.
    [ERROR] npm WARN deprecated graceful-fs@1.2.3: graceful-fs v3.0.0 and before will fail on node releases >= v7.0. Please update to graceful-fs@^4.0.0 as soon as possible. Use 'npm ls graceful-fs' to find it in the tree.
    [ERROR] npm WARN deprecated tough-cookie@2.2.2: ReDoS vulnerability parsing Set-Cookie https://nodesecurity.io/advisories/130
    [ERROR] npm WARN optional dep failed, continuing fsevents@1.0.14
    [ERROR] npm WARN optional dep failed, continuing fsevents@1.0.14
    [ERROR] npm WARN deprecated tough-cookie@0.12.1: ReDoS vulnerability parsing Set-Cookie https://nodesecurity.io/advisories/130
    [ERROR] npm WARN engine punycode@2.0.0: wanted: {"node":">=6"} (current: {"node":"0.12.5","npm":"2.11.2"})
    [ERROR] npm WARN deprecated phantomjs@2.1.7: Package renamed to phantomjs-prebuilt. Please update 'phantomjs' package references to 'phantomjs-prebuilt'
    Cheers.

    ReplyDelete