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: [
            '.tmp',
            '<%= 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'.
            
                com.github.eirslett
                frontend-maven-plugin
                0.0.15
                
                    ui
                
                
                    
                        install node and npm
                        
                            install-node-and-npm
                        
                        
                            v0.10.30
                            1.4.12
                        
                    
                    
                        npm install
                        
                            npm
                        
                        
                            install
                        
                    
                    
                        grunt build
                        
                            grunt
                        
                        
                            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;

@Controller
public class BasicController {

    @RequestMapping("/")
    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.

No comments:

Post a Comment