Application Development with Eclipse, AngularJS, Java EE and Apache Tomcat

This tutorial helps you on how to setup Eclipse for 3 tier application development. Let’s start with the assumptions we made, which are not that many. So let us see what you need and what we are trying to install/configure and so on :)Assumptions:

So just follow the step-by-step instructions below in order to install Maven on your machine:

After setting up our IDE we need a server on wich our logic shall run later on. I decided to use Apache Tomcat, as it is lightweight in the first place, but can be extended to a full blown JEE Application Server if needed (http://tomee.apache.org/apache-tomee.html).

As already mentioned above, we install the LiveReload plugin for our browser (in my case Chrome) for a more seamless development cycle regarding GUI development. What does that mean? Well in fact that you always will see the results of what you’re coding with nearly no delay. When changing the code of your webapp in eclipse, the IDE will recognize that you’ve just changed something. It will then hot redeploy your new code to the server (Apache Tomcat). The LiveReload server that runs in parallel to Apache Tomcat  recognizes this change and notifies the browser which shows your webapp and forces it to reload the page with your webapp. This whole process is a matter of a few seconds and therefore you will always see the changes you made immediately reflected in your browser.

Now that everything we need is installed, we have to configure some little things so that everything works perfectly together. For example: Maven does not always show all available artifacts when seraching for them at first. So we need to configure it’s behaviour regarding updating of its repositories.  Just follow the instructions below and you should be fine. If your deeper into eclipse and those plugins you’re free to make your own preference settings 😉

At first lets create and  configure a new Dynamic WebProject in Eclipse. Afterwards I will give some explanations to regarding the project setup and using the different plugins.

• Create Dynamic Web Project with Angular Support, Maven Dependency Management, Jersey Support, Jackson Support
  • Create Project
    • Right Click -> New -> Other -> Web -> Dynamic Web Project
    • Project name: de.uniaugsburg.mdsd.<your-project-structure>
    • Target runtime Apache Tomcat v7.0 -> Finish
  • Configure Angular JS Support
    • R-Click Project -> Configure -> Convert to Angular JS Project
    • R-Click Project ->Properties -> Validation -> HTMLSyntax -> Check “Enable Project specific Settings” -> Attributes -> Undefined Attribute name -> Ignore
    • HTML/CSS/JS Files come into the WebContent Folder of the Project
  • Configure Maven
    • R-Click Project -> Configure -> Convert to Maven Project
  • Configure Jersey and Jackson
    • R-Click project -> Maven -> Add Dependency -> jersey-container-servlet / jackson-jaxrs-json-provider
    • Copy config of jersey_web (see below) snippet into WEB-INF/web.xml and replace <package-where-your-services-are> to your respective packagename
• Run Dynamic Web Project
  • R-Click on LiveReload Server -> Start
  • R-Click on Project -> Run as… -> Run on server
  • in Chrome type URL of your Webservice
  • in Chrome enable LiveReload Plugin
  • go out there and CODE 🙂

1:  @Path("/fooservice")  
2:  public class FooService {  
3:       @Path("/getsomefoo")  
4:       @Produces(MediaType.APPLICATION_JSON)  
5:       public Foo getSomeFoo() {  
6:            Foo foo = new Foo("fooname");  
7:            return foo;  
8:       }  
9:  }  

• Add Javascript Libs
  • R-Click Project -> Maven -> Add dependency -> Type Name (we work with org.webjars)
  • in index.html add line with <script src=”webjars/<path/to/your/file.js>”></script>
  • the path can be looked up when you go to JavaResources -> Libraries -> Maven Dependencies -> <Your Library> -> META-INF -> resources -> webjars -> <everything from here on is your path>
• Add Java Libs
  • R-Click Project -> Maven -> Add dependency -> Type Name
  • use it