Modern Client UI Development with Java backend

Yeoman + Bower + Grunt is a very powerful stack of developing web UI. It has all the features, like Minify, Uglify and Unit Test. However, it is a pure HTML and JS platform, in most enterprise applications,  it will stick to a Java Backend, may be in a form of Restful Service.

During development, we may need to proxy to with grunt-connect-proxy. I would post a working gruntfile.js section here for reference. The livereload options and livereload proxies are modified.

We don’t need to import the NPM task in grunt, as the pre-configured grunt file will import all the tasks from package.json

 

connect: {
  options: {
    port: 9000,
    open: true,
    livereload: 35729,
    // Change this to '0.0.0.0' to access the server from outside
    hostname: 'localhost'
  },
  livereload: {
    options: {
      middleware: function(connect) {
        /*return [
          connect.static('.tmp'),
          connect().use('/bower_components', connect.static('./bower_components')),
          connect.static(config.app)
        ];*/
        var middlewares = [require('grunt-connect-proxy/lib/utils').proxyRequest];
        middlewares.push(connect.static('.tmp'));
        middlewares.push(connect().use('/bower_components', connect.static('./bower_components')));
        middlewares.push(connect.static(config.app));
        return middlewares;
      }
    },
    proxies: [{
      context: '/api',
      host: 'localhost',
      port: 8080,
      https: false,
      xforward: false,
      ws: true,
      rewrite: {
        '^/api': '/oms-core/api'
      }
    }]
  },
  test: {
    options: {
      open: false,
      port: 9001,
      middleware: function(connect) {
        return [
          connect.static('.tmp'),
          connect.static('test'),
          connect().use('/bower_components', connect.static('./bower_components')),
          connect.static(config.app)
        ];
      }
    }
  },
  dist: {
    options: {
      base: '<%= config.dist %>',
      livereload: false
    }
  }
},