How i built a blog application using Angular and Java

Someone challenged me that if i build a blog portal as a Java web application but using Angular as front-end, Java as backend (both being my favorite technologies) with some database in less than a day?

I said YES to myself.

I was so confident that i can easily find something on the internet and get this done super fast easy. I was partly wrong.

Part 1: Find a blog program written in Angular

Luckily i was able to find Angular Blog written in Angular using Cosmic JS. This was the perfect open-source solution for me.

• Was production ready
• Has the features of Login and Register — Which are key
• View blogs

The only catch being that we have to use Cosmic JS which is not a free application. But this helps us to solve the reference implementation.

Part 2: Embed that into a java based web application — Build a deployable WAR file

Now this is the hard part.

We need a WAR file that can be deployed to any Java based web-application server. But the challenge is that the main front-end should be an Angular built application while Java will only be the backend.

To solve this i used something that i have been working on and created.. called the JAQ Stack — Java, Angular, sQl/nosQl Application Stack.

JAQ Stack is a pre-built application stack to build web applications using Angular and Java.

Why is this so hard?

• Angular applications need to be built as a deployable units and can run by themselves on Angular CLI or Node. We can still build a complete application using Angular (using services for backend calls), a more comprehensive backend programming language should be used likeJava, Node, .Net etc.
• While the same is true for a Java based application also . They also need to be built as a deployable WAR or class files that can run independently. Ofcourse on a java supported web application server or a jvm.

Now to bring these two together is a challenge. But there is way. JAQ Stack solves this using Apache Maven.

Maven is commonly used to build Java based web applications (Gradle being the other most famous). So JAQ Stack solves as follows:

• Allows us to develop a complete Angular application in a pre-defined folder structure
• A single mvn clean packagecommand looks for the necessary build files to build Angular code (using Yarn or NPM) and Java sources
• Packages all these to a single deployable war file.

This war file can be then deployed to any Java based web application server.

You can read more on the architecture at JAQ Stack

Next steps

Although the concept is proven there is so work to be done.

• Change the REST calling methods to Java from Angular services
• So Angular services will be calling a custom exposed Java web services instead of direct Cosmic JS REST services. This as 2 advantages:
• (1) Front-end is abstracted from what is being called and details of the services
• (2) It will be easy to at a later point to migrate from Cosmic JS and use any other CMS platform.

References

• Live demo here (Sorry if the site does not load. Was using a test ComsicJS account)
• JAQ Blog Source code on Github
• JAQ Stack on Github. Used this as base to build the blog portal. This is also my invention.

Originally posted in my tech blog TechInPieces