Java Dynamic Web Project with nodejs, angular, karma, jasmine and maven - java

I have a question related to best practice folder structure for a WEB-APPLICATION (Mobile compatible as well). I know this is opinion based question. But I did not find any good solution over internet. So I thought it will worth to post it here.
Since my project is Java based backend. So I created a dynamic web project from Eclipse with maven functionalities.
So my folder structure is just as follows.
SampleProkject
|
|-----src
|
|---- main
|----java
|----resources
|----webapp
|
|---- test
|---java
|---resources
My all Java backend related code goes to src/main/java
and All HTML, CSS and JS goes to src/main/webapp
Similarly all my test classes for java goes to src/test/java
From Java perspective everything is fine but problem comes when I try to places my angular files.
Since I am using npm to install all required js files and frameworks. I placed package.json inside my webapp. So node_modules is also being created inside my webapp. Which is I do not want because node_modules is just for dependency so I do not want to expose it over HTTP. So I need to place my package.json outside of webapp. But then I can not use node_modules in index.html file because it can not access files out side of webapp.
Also I do not want to place my test cases (Karma.conf.js and Jasmine test suits) to webapp. So what I did I place those to src/test/javascript.
Now the thing is I have to access all my angular code and node_modules from src/test/javascript and also from webapp/index.html file.
Please suggest a best approach. I think several Java developer who are using angular with nodejs for UI, facing same issues.
Note:
Actually I am looking for a good project structure with maven, java,
nodejs and angular. Which also include Java and Angular unit testes as
well.

There are many maven archtypes and yeoman generators available. But if want a good base application using angular as front end and spring/java as backend, go see http://jhipster.github.io/

Related

Deploy Angular app plus vertx: what's best?

I have the current configuration:
a GUI team develops the Angular app in a separate project and builds all TypeScript stuff to produce the final UI app.
another team has Vert.x java library in the server app to do REST service and produces a final fat jar.
I wonder what's the best approach to deliver GUI and backend in one shot:
Is is ok to have 1 jar for backend and Gui (say a directory call "app") both in the same folder? Can vert.x access resources outside its jar?
Do I have to put GUI in the same maven project where my vert.x REST services are developped, run the "ng build" commands from maven, and package all in one jar?
I'm a bit confused here.
Any of you are in the same situation, what's your advice on this?
Thanks
All it's upto you how do you wanna deploy it on production ;)
First approach
You can create one fat.jar to deliver everything in it -> so it will include angular static build files (under webroot) and then all your vert.x related code.
Second approach
You can create one fat.jar just with angular static files exposed using vert.x and also you can integrate authentication (cas/saml) in the same and another fat.jar will have rest implementation (connecting to database or WebService consumption ). So you will have two fat.jar and it will be best if you are planning for clustering and for hazel cast structure.
We have already tested both approaches and both are working great but Right now we are following second approach !!

Using JBoss BRMS to Create My Own Decision Table Application

I am using the open-source JBoss BRMS application from jboss.org. Hopefully, if you clicked on this post you are familiar with this web application that can be used to develop applications that use Drools rules.
I am following along with the tutorial on building an application that uses a Decision Table to create the rules. That tutorial can be found here: http://www.jboss.org//quickstarts/brms/decision-table/index.html. I was able to successfully execute this tutorial after modifying the pom.xml some.
My question is how can I create my own similar application? This example application works by importing some Java classes into the BRMS repository and also putting a pre-configured Settings.xml file in the ./m2 Maven repository. There are also some folders at another location on my computer that contain 1) a pom.xml file and 2) a src and test directory which contain other things like java source files, compiled byte-code, and some XML files. How can I do this on my own and build my own JBoss BRMS Decision Table application? I was able to create some classes and a spreadsheet and validated this with JBoss BRMS but I am still confused on how to a) create the pom.xml file, b) create the Settings.xml file, and c) create the folders with the required program files like java source code to use Maven to build and run.
I have been reading the Drools documentation and the "proprietary documentation" from Red Hat on the business rules management system (BRMS) that is not too helpful as of yet. It is somewhat helpful but not really. I call it "proprietary documentation" because it is on access.redhat.com which requires a subscription to even download trial software. Jboss.org has completely free versions of similar software. I hope this made sense. Please reply in the comments if it did not make any sense to you.
Respectfully,
user3870315

Doing r.js minification with webjars

Our team is writing a server-client application where the frontend is an Angular.js single page application which uses a Spring MVC java backend. The backend serves the application files and the REST endpoints used by the browser end. We are using Maven as the main build system for the application.
We like to take advantage of require.js and r.js to minify the app at the end, and we are also using client side dependency management. Currently we are using bower to download Javascript libraries required but it doesn't feel right to me to download client dependencies to src/main/webapp since this is a source folder. However in order to avoid rebuilding the whole frontend module each time something changes in the client files, this seems the only sensible way to us. This way we can start a web server and it will automatically pick up changes without restart, but as i said this doesn't fit Maven's folder layout.
I'm experimenting with Webjars which seems a better choice in our Maven oriented build and dependency management. Because in Servlet 3.0 containers webjar resources are provided automatically on the server container path it's very easy to use and manage them. It's also possible to create a require.js config to refer to libraries contained in webjars since they are on the webserver path the same way if they were static files, the serving is being done transparently in the client applications point of view.
My only problem is that i don't know how could we achieve r.js minification with this layout, since the source files are in jar files r.js cannot access them. Also the require.js config refers to the runtime server paths which are simply not there in build time.
I see that webjars now have some integration with Require.js + Play Framework but we are not using Play just simple Spring MVC in our case. I really hope there is a way to handle this case because i like the Webjar way of client dependency handling.
You need an asset compiler / pipeline in your build process. There are probably many options but the one I know of is wro4j: http://alexo.github.io/wro4j/

Where do you put client-side source files when using grunt and maven?

Typically on a Java project using Maven, you place client-side source files in src/main/webapp. This directory includes your html, css, scripts, images, etc.
However, many grunt projects tend to place these files on the root. It's as if Grunt was designed with the idea that your project is the client-side application, not part of a large server-side project, such as using Java with Spring.
Given a Java project using Maven, where would be the best place to put your web-related source files?
Do you place them in src/main/webapp?
Do you make another directory altogether, such as src/web, and then on a build, copy everything to src/main/webapp?
My goal is to make the client-side build tool as transparent as possible. I guess the ideal case is to simply work from src/main/webapp as I have been doing all along - this is pretty unobtrusive to the way my project is currently setup.
However, if I work from src/main/webapp, I know that I will need to distinguish between src and build directories somehow anyway. I'm sure my html files can stay where they are, but there's definitely going to be a conflict of interest here with javascript and css files, and maybe images too.
Does it make sense to literally have a 100% separate source folder from src/main/webapp? Is there a way to do continuous building/copying/syncing of the application as you modify files, from src/web to src/main/webapp? Will this be inconvenient and cause frustrations and problems? Is it slow?
I would like any advice on the subject. Thank you.
Option 1: Put UI resources in src/main/webapp:
This is a quick-n-dirty solution popular on Github. It helps to keep example projects small and concise. In this case, usually people put the package.json, bower.json, Gruntfile.js and .bowerrc in the maven project's root directory, where the .bowerrc says to install components into src/main/webapp/bower_components.
If you have a task that minifies/transforms resources, the transformed resources can go to a new directory like src/main/webapp/dist. Then use something like grunt-usemin to make your app use the resources in the dist directory.
If your application will use a security framework (like, say, Spring Security), you might want all your resources in src/main/webapp so that the security framework can regulate access to those resources. However you can still achieve this using Option 2 by having a grunt task that copies the necessary resources into src/main/webapp.
Pros
Common approach on GitHub. Keeps everything in one project.
Cons
The version of files getting served by your server is a copy of those in src/main/webapp, so changing a file in src/main/webapp isn't immediately reflected in your deployed app. To get hot reloading, you need to use something like grunt-contrib-* stuff.
Frontend and backend code is all mixed together. Harder for two different teams to work on the code base.
Option 2: Put UI resources in a separate project:
You can achieve better project organization by keeping the UI and backend in completely separate projects. In this case the UI and the maven project would likely be sibling directories.
Then when deploying to a server, you either:
deploy both projects separately (call them myproject-ui and myproject-services). The javascript in myproject-ui makes RESTful service calls to myproject-services/**.
Use a grunt task to copy necessary resources to src/main/webapp, then deploy your (one) project.
Pros
The backend and the frontend are separated as much as possible
The frontend maintains the workflow and directory structure found in most client-side example apps, as you mentioned
"Deploying" the UI is a simple matter of creating a symlink from your server's deployment directory to you UI source code. Changing any UI code is automatically reflected in the deployed app.
You can have several different UIs deployed simultaneously (maybe you have myproject-admin-ui and myproject-user-ui). You could hit either one simply by visiting
http://localhost:8080/myproject-admin-ui
http://localhost:8080/myproject-user-ui

Design Web application

I want to build a java web application and I don't have any background how to do that.
Can you plz tell me what is the starting point to do that and where can I found useful open source codes that I can use them to design my web application.
There are many different frameworks and without more information it's difficult to know what would suit you.
http://en.wikipedia.org/wiki/Comparison_of_web_application_frameworks#Java is a good starting point.
You have to know concepts such as Servlet, Servlet Container, Application Server(such as Apache tomcat) and little information about Html.
Exist several book for this goal, my opinion is : you start by a book related to Jsp/Servlet concept, these books good explained.
Here you can learn how java web applications work and here is a very basic java web application example to get you started. I hope this helps :)
You should follow the Java EE tutorial, its Web Tier part. I think it's the fastest way to get knowledge that would allow you to understand the base concepts...
The minimal structure of a web application is the following:
/WEB-INF
/classes - stores the compiled Java classes your webapp uses
/lib - contains the additional libraries your webapp may need to run
web.xml - key file in every webapp; explained below
web files and folders (HTML/JSP/CSS/Javascript)
You may want to start out with Eclipse for Java-EE, since it automatically creates the webapp structure for you, so it's the perfect place to start learning, in my opinion; you can find it here.
After you install, the basic steps to create your web application are:
Create your project by accessing File > New > Dynamic Web Project.
Name your project, click Next, Next and check the Generate deployment descriptor checkbox. Now hit Finish.
Now that the structure is created, your main points of interest will be:
Deployment Descriptor - Is an overview of your web.xml file. Here you can declare all your servlets and their URL paths, you can point to specific error pages triggered by specific codes (e.g 404, 500) or exceptions that occur in your Java/JSP code (e.g NullPointerException, FileNotFoundException), plus do many other things to enhance your webapp. You can trigger between text and graphical XML editing in the bottom-left of the code window.
Java Resources - Here you define your Java classes and servlets. The main role of a Java class in a webapp will be to collect and process data. For example you can define your own math class that exposes methods which do basic calculations. A servlet will usually call one of these classes and output the result to the response output stream. Be sure to provide a solid project structure with the help of packages.
WebContent - this will contain all the web pages your webapp will show, including scripts, images and stylesheets. You are free to create your own folder structure in this section.
Some useful tutorials to get you started:
HTML
JSP
Servlets, Server setup
CSS
Once you're done with your webapp, you can either Run it on a server directly from Eclipse, or you can export it as a WAR file and deploy it on the server of choice, which is usually done by copying the WAR file in the webapps folder.
Finally, try to experiment with all the webapp features Eclipse exposes to you. Good luck!

Categories

Resources