Client-Server Development with Eclipse, AngularJS, Java EE and Apache Tomcat

Hey everyone!

Welcome to the first part of the tutorial on how to setup Eclipse for 3 tier application development. Let's start with the assumptions I 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: 

• Installed JDK (1.7.x)
• Windows 7

Installing and configuring :

• Apache Tomcat 7.0.52
• Eclipse 4.3.2 (Kepler)
• Chrome 34.0.1847.92
• Maven 3.2.1
• Jersey 2.7
• Jackson 2.3.2
• Angular JS
• LiveReload

The first step on our journey to the "perfect" development enivronment is the installation of Maven. I know that many people say that Maven is too heavy or too compilcated, but if you just take those parts of it you really need (in our case dependency management), it is a really great tool. Especially when used in combination with Eclipse and the m2e plugin.

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

• Download Maven from http://maven.apache.org/download.cgi (Binary zip)
• make sure "JAVA_HOME" variable is set as an environment variable
• extract Maven into a folder (note: the path to this folder must not contain white spaces and should not be too deep e.g. C:/../../../../Maven/)
• add "MAVEN_HOME" to your environment variables. It should point to your Maven directory

Now, that we've installed Maven let's go and get our IDE. We will use Eclipse as it provides us great support for several frameworks and technologies we're going to use. As we're going to develop web applications you will install the JEE version of Eclipse, which comes with a set of preinstalled plugins that come very handy when developing web applications.
Although many of the plugins we need are already bundled in the JEE version, two are still missing.
The first is the Angular JS plugin that provides us an HTML editor which supports Angular JS expressions and directives. This great plugin was written by Angelo Zerr (Thank you very much!!!)
The second plugin we need is a LiveReload server, so that we don't have to refresh our webpage by hand every time we change the code. Later in this tutorial we also will install the LiveRelod plugin for Chrome, which connects to this server and therefore gets notified whenever the sourcecode on our server has changed. Great tool which saves you a lot of time.
As already done at the Maven installation, you just follow those steps below in order to install and configure Eclipse, the Angular JS plugin and the LiveReload server.

• Download Eclipse Kepler JEE -> https://www.eclipse.org/downloads/packages/eclipse-ide-java-ee-developers/keplersr2
• Install Angular JS Plugin -> https://github.com/angelozerr/angularjs-eclipse // Update Site: http://oss.opensagres.fr/angularjs-eclipse/0.1.0/
• Install JBoss Tools Livereload -> Help -> Eclipse Marketplace -> Search for JBoss Tools -> Select distribution for Kepler -> deselect everything but livereload
• Go to your Eclipse installation directory -> open "eclipse.ini"-file -> Xms512m // Xmx1024m, add line -XX:MaxPermSize=1024m (otherwise eclipse will often fail on builds)

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).

• Setup Apache Tomcat 
• In Eclipse -> Window -> Preferences -> Server -> Runtime Environments -> Add
• Choose Apache Tomcat v7.0 -> Next
• Choose a Name
• Click "Downlad and Install..." and choose a directory where you want to install tomcat -> Finish

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.

• Install LiveReload Plugin for your Browser (e.g. for Chrome from Marketplace https://chrome.google.com/webstore/detail/livereload/jnihajbhpnppcggbcgedagnkighmdlei )

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 ;)

• Configure Apache Tomcat, preferred Browser, Maven and LiveReload in Eclipse
• Window -> Preferences -> Server -> Runtime Environments -> Add
• Choose Apache Tomcat v7.0 -> Next
• Chose a Name -> Browse to your Tomcat installation directory -> Finish
• Window -> Show View -> Other -> Server ->Servers
• R-Click in Server View -> New ->Server -> Apache ->Tomcat v7.0 Server -> Finish
• R-Click in Sever View -> New -> Server -> Basic -> LiveReload Server -> Finish
• Window -> Preferences -> General -> Web Browser -> Check Default system web browser (i assume it's chrome) (everytime you click "run on server" this browser gets opened)
• Window -> Preferences -> Maven -> check "Download Artifact Sources" and "Download Artifact JavaDoc" (if you have an already existing project: R-Click project -> Maven -> Download Sources/Download JavaDoc)
• Window -> Show View -> Other -> Maven -> Maven Repositories -> Global Repositories -> R-Click on central -> Update Index
• Window -> Preferences -> Maven -> Download repository index updates on startup

Finally we got everything to work as we wanted and are now able to create our first project :)

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.

How to create and run a new DynamicWebProject 

• 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 :)

First the project setup. What you've just created is an Eclipse project that can also be built by using Maven only. Moreover it's an Eclipse project that is aimed to run on a server, more specific a JEE Servlet container (just like Tomcat ;) ). This project can be split in two parts:

The server code:

The code for the server side logic is written in good old Java, with a little help of frameworks like Jersey, Jackson and later in the next tutorial EclipseLink and JPA. The java code resides in the folder "JavaResources/src". Feel free to create your own folder hierarchy below this root folder.

The server side logic normally consists of a bunch of webservices and a litle bit of business logic. So how do we create those webservices? Here, Jersey comes into play. We do nothing more than writing a POJO and annotate it with Jersey's annotations in order to mark it as a Webservice:

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:  }  

Given you followed the instructions on how to create a dynamic Web Project and pointed the jersey servlet to the package where you've written this service, you should be able to reach it via an URL like "http://localhost:8080/myappname/rest/fooservice/getsomefoo". 
That's easy, isn't it?

The client code:

This code resides within the folder "WebContent". Normally, I create a structure like the following:

WebContent

   |__ index.html

   |__ webapp

          |__ scripts

          |__ views

          |__ styles

          |__ etc...

This is just a basic webapp layout and you are free to change it to fit your needs.

One of the last questions I had when I sat up this IDE was: "how to manage my dependencies in the JavaScript part of the webapp?". Originally, Maven was a tool that evolved strongly in the Java world and had less to nothing to do with JS. Therefore it's not the first choice when it comes to managing dependencies in JS. Tools that are preferred here are e.g. Grunt. Nevertheless I wanted to use Maven for my dependency management in Java as well as in JS. Fortunatly I found the webjars project ( http://www.webjars.org/ ), that ideally fitted my needs. Now I can add libraries like angular.js, bootstrap and all the like just like normal Java jars. To see how to add those libraries to your webapp just follow the instructions below and add a web library of your choice.

How to add new Dependencies with Maven

• 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

Now that you know how to use your favorite web libraries with Maven you're free to go on and develop your own 3 tier web app. Well at this time we only had two tiers, but if you read the next post you can add the last tier easily ;)

I hope you enjoyed reading this post and hopefully it helped you in some way to save time and money ;)

Thanks for reading and we'll read us at the next post!

Snippets:

jersey_web_xml

<servlet>

    <servlet-name>Jersey REST Service</servlet-name>

    <servlet-class>org.glassfish.jersey.servlet.ServletContainer</servlet-class>

    <init-param>

<param-name>jersey.config.server.provider.packages</param-name>

<param-value>de.uniaugsburg.mdsd.<package-where-your-services-are></param-value>

    </init-param>

<init-param>

<param-name>com.sun.jersey.api.json.POJOMappingFeature</param-name>

<param-value>true</param-value>

</init-param>

    <load-on-startup>1</load-on-startup>

  <servlet-mapping>

    <servlet-name>Jersey REST Service</servlet-name>

    <url-pattern>/rest/*</url-pattern>

  </servlet-mapping>

</servlet>

References

• http://zeroturnaround.com/rebellabs/the-great-java-application-server-debate-with-tomcat-jboss-glassfish-jetty-and-liberty-profile/ (schöner Vergleich aktueller Webserver)
• http://www.vogella.com/tutorials/EclipseWTP/article.html (Einführung in WTP)
• http://www.vogella.com/tutorials/REST/article.html (restful ws mit jersey) -> veraltet, nutzt jersey 1.x, aktuell ist Jersey 2.x
• http://openbook.galileocomputing.de/java7/1507_13_002.html Jersey Restful bla
• https://jersey.java.net/documentation/latest/user-guide.html (Jersey User Guide)
• http://www.vogella.com/tutorials/RSSFeed/article.html (RSS mit Java)
• http://blog.zuehlke.com/tag/jax-rs/ (Angular JS App auch mit Datenbankanbindung)
• http://subclipse.tigris.org/wiki/PluginFAQ (Subclipse FAQ)
• http://blog.tfnico.com/2013/07/considerations-for-javascript-in-modern.html (Considerations for JavaScript in Modern (2013) Java/Maven Projects)
• http://stackoverflow.com/questions/18047843/cannot-search-for-artifact-in-eclipse-kepler-using-m2e-plugin (Force Maven to update Repos)
• http://javahash.com/jersey-hello-world-example/ (Hello World jersey mit neuem Jersey)
• https://github.com/jasonray/jersey-starterkit/wiki/Serializing-a-POJO-to-xml-or-json-using-JAXB (Es wird gezeigt wie JAXB Annotationen )
• http://www.webjars.org/documentation (Webjars project)
• http://docs.oseems.com/general/application/eclipse/fix-gc-overhead-limit-exceeded (Error on project build)
• http://stackoverflow.com/questions/9277223/jenkins-auto-deploy-tomcat-7 (deploying jenkinsbuild to tomcat)
• http://stackoverflow.com/questions/310720/get-source-jar-files-attached-to-eclipse-for-maven-managed-dependencies(Wie kommt man an Quellcode von Maven Artefacten ran?)