Tuesday, December 23, 2014

Mavenized Java server application and Angular.js frontend application using yeoman

Install yeoman
npm install -g yo

Install generator-angular
npm install -g generator-angular
Create a directory in your project's root (I'll be using 'ui')
mkdir ui && cd $_
While inside ui directory create your app using yeoman and generator-angular. Be sure to run bower install at least once before due to this error.
yo angular your_project_name
Add grunt-cli to your dependencies
npm install grunt-cli --save-dev
In Gruntfile.js change application config, so the application is compiled into java resources:
  // Configurable paths for the application
  var appConfig = {
    app: require('./bower.json').appPath || 'app',
    dist: '../src/main/resources/public'
Grunt will attempt to clean '../src/main/resources/public' each time it builds, but since it's a path outside of our current working directory, we have to force the clean, by adding 'force:true' option.
options: {
    force: true
For example:
// Empties folders to start fresh
    clean: {
      dist: {
        options: {
          force: true
        files: [{
          dot: true,
          src: [
            '<%= yeoman.dist %>/{,*/}*',
            '!<%= yeoman.dist %>/.git{,*/}*'
      server: '.tmp'
Finally add build plugin to pom.xml so the js appliacation and all of its resources are built into your Java resources. Notice that for workingDirectory I'm using my directory's name 'ui'.
                        install node and npm
                        npm install
                        grunt build
                            build --no-color
The build should pass and you can deploy your appliacation to a server container of your choosing. :)
I'm using Spring (along with Spring Boot). A simple controller like this:
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;

public class BasicController {

    String home() {
        return  "redirect:/index.html";

Should yield a result like this:

I've based this article on Gunnar Hillert's Botanic-ng and my own experimentation.