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

Setting up Angular.js using Yeoman

	# Install Yeoman http://yeoman.io/
	npm install -g yo
	# Install Angular generator https://github.com/yeoman/generator-angular
	npm install -g generator-angular
	# Create a directory in your project's root - I'll be using 'ui'
	mkdir ui && cd $_
	# Be sure to run bower install at least once before due to this issue:
	# https://github.com/yeoman/generator-angular/issues/635#issuecomment-46580616
	# Ceate your app using yeoman and generator-angular.
	yo angular your_project_name
	# Add Grunt CLI https://github.com/gruntjs/grunt-cli
	npm install grunt-cli --save-dev

view raw setting-up-angular-with-yeoman.sh hosted with ❤ by GitHub

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.
	clean: {
	dist: {
	options: {
	// add this option here
	force: true
	},
	files: [{
	dot: true,
	src: [
	'.tmp',
	'<%= yeoman.dist %>/{,*/}*',
	'!<%= yeoman.dist %>/.git{,*/}*'
	]
	}]
	},
	server: '.tmp'
	},

view raw configuring-grunt-to-build-app-into-java.js hosted with ❤ by GitHub

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 'ui'.

	<plugin>
	<groupid>com.github.eirslett</groupid>
	<artifactid>frontend-maven-plugin</artifactid>
	<version>0.0.15</version>
	<configuration>
	<workingdirectory>ui</workingdirectory>
	</configuration>
	<executions>
	<execution>
	<id>install node and npm</id>
	<goals>
	<goal>install-node-and-npm</goal>
	</goals>
	<configuration>
	<nodeversion>v0.10.30</nodeversion>
	<npmversion>1.4.12</npmversion>
	</configuration>
	</execution>
	<execution>
	<id>npm install</id>
	<goals>
	<goal>npm</goal>
	</goals>
	<configuration>
	<arguments>install</arguments>
	</configuration>
	</execution>
	<execution>
	<id>grunt build</id>
	<goals>
	<goal>grunt</goal>
	</goals>
	<configuration>
	<arguments>build --no-color</arguments>
	</configuration>
	</execution>
	</executions>
	</plugin>

view raw using-frontent-maven-plugin.xml hosted with ❤ by GitHub

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;
	@Controller
	public class BasicController {
	@RequestMapping("/")
	String home() {
	return "redirect:/index.html";
	}
	}

view raw basic-spring-controller.java hosted with ❤ by GitHub

Should yield a result like this:

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