westor westor - 22 days ago 6
AngularJS Question

How to combine Yeoman scaffolding with existing Java directory structure

In my existing web project the directory structure for the served html content while development with jetty is "myProject/src/main/webapp/"

Now, I want to integrate an angularjs project here.
I've played a little bit with Yeoman.

If I'm scaffolding with yeoman, I'm wondering how I can integrate it into our existing dev and deployment structure.
I suppose to use the main folder "myProject" to run yeoman scaffolding would be fine. Then I would get a "myProject/app/" diretory for all my frontend stuff. Should I instruct somehow (how?) my jetty server to use ".../src/main/webapp/" as an alias for the new app directory?

We use jetty mainly as a proxy for requesting the backend. Is there also a way to do a live reload similar to "yeoman server" in combination with jetty?

Answer

Take a look at my answer on how to do Django-Yeoman integration.
Architectural concepts will be the same, even external articles (definitely must-reads) are Java-based.

In short:

  • Use yeoman-maven-plugin. If you are on Gradle that's still cool, since you will have better control on grunt tasks being invoked.
  • Your project structure can resemble sth like:

    pom.xml
    
    src/
        main/
            java/
                ...
            resources/
                ...
            webapp/
                WEB-INF/
    yo/
        dist/
        <<rest of Yeoman-generated stuff here (mkdir yo; cd yo; yo angular ...)>>
    
  • The plugin takes care for copying production-ready yo/dist to WEB-INF.
    All you have to do is to serve it as a static resource, that's for Spring MVC (dispatcher servlet):

    <!--Yeoman static content-->
    <mvc:resources location="WEB-INF/yo/" mapping="/**"/>
    

    Do sth simillar for Jetty or in pure Servlet config.

The rest, particularly dev setup is described in referenced answer.