How to combine Angular-Cli frontend to Spring-boot backend - java

I currently have a web application that runs an Angular 2 frontend, and a Spring Boot backend.
I have followed this tutorial in order to integrate the two components.
http://blog.jdriven.com/2016/12/angular2-spring-boot-getting-started/
My application now has the same structure as this
https://github.com/jbruinink/ng2boot
The frontend and backend can now be built with a single command. However the frontend and backend generate seperate jars, and need to be started seperately.
Is there a way to package my appliacation in a single jar that starts both the frontend and the backend?

That question was actually asked and answered in the comment section:
"The frontend is actually packaged into the backend jar. You can simply start the backend and go to http://localhost:8080. The development server at port 4200 is optional. It just makes it easier to develop the frontend, because all changes are reloaded automatically."

Related

Deploy Angular 5 and spring boot applications on same tomcat at different ports

I am developing a small project where I have Springboot java application and
Anagular 5 application. I want to deploy them on one tomcat. running each on diffrent ports.
Application Flow should be like this:
1) Some external service calls Java application with some headers. Springboot java application should read the headers put them in cookie and forward the request to Angular application.
2)Angular application reads the headers from the cookie and communicates to another application(Hosted somewhere else) with API calls.
What I tried:
I am able to deploy Spring boot application on tomcat.
For angular deployment I am copy pasting the dist folder into webapp.
What is question about: I wanted them to run at a time on tomcat on defferent ports so.
external application --calls-> java application(say running on localhost:8080)-----redirect from localhost:8080 to ----> Angular application(say running on localhost:8081).
in moment your are delegating servlet container to a provided one, all spring properties concerning an "embedded" container will be simply ignored. This is the case of server.port property.
Maybe it's a client/company constraint BUT using Spring Boot project this way makes you loose big part of its benefits: Raising serverless apps ready to be horizontaly scaled :(
Spring Boot keeps the possibility to let your static resources in the apps whitout loosing the ability to run the embedded container; by building an executable war.
Tip: To do that, just change the packaging from .jar to .war.
Hope was helpful :)

Angular 2 Basics - Integration with Spring Boot - Can Angular 2 instance run within a server

I am new to angular 2 and js frameworks so this question is probably going to sound a bit stupid, I have a task at work where I am looking to integrate angular 2 with Spring boot application, I went through couple of tutorials online and found that you can configure the proxy setting for paths inside angular to redirect calls to spring boot application for various paths.
For reference: https://dzone.com/articles/angular-2-and-spring-boot-development-environment
The question I want to ask is that since Angular is a js framework and I thought that it could be completely integrated with any application, like plain old javascript, html and css. In a way that only a single port is required to launch the server and jsp based models can be served through it.
But with Angular2 you need a separate port of its own to do anything. Is that true?
If it is then why it is like that?
If not then can you please direct me to a guide which describes how to integrate it in a way that it would be served through the server?
But with Angular2 you need a separate port of its own to do anything. Is that true?
No, not at all. An Angular application, once built, is just a set of satic files that can be served by any web server, including the one running your spring boot app. Those file aren't "run" on the server. They're just downloaded by the browser.
During development, though, it's much more productive to have a separate web server like the one that Angular CLI starts up, and which watches your source files, rebuilds your application on the fly, and serves it immediately. Since this server can also serve as a proxy to your spring server, you can just pretend your spring server hosts the angular files.
An alternative is to use your angular build tool to build the app to some directory, and configure spring to serve static files from that directory.
In production, you'll simply build the production-ready angular app, integrate the generated files inside the spring boot jar file (inside the static folder, typically), and run the spring boot application as usual.

How to deploy Spring framework backend and Angular 2 frontend application in any online server?

Please correct if the way I am doing is wrong.
In my web application I am not using jsp pages for developing user interface. Instead I am using html, css and Angular 2 and front-end project structure is separated from back-end.
Although I am able to develop a simple project using Angular CLI which is served by SpringMVC back-end. Front-end is using port 4200 and backend is running on port 8080. I have managed to take and serve request from Angular 2 to SpringMVC. In local mode these are working perfectly, now I want to make them host on a live server.
How to publish SpringMVC back-end and Angular 2 front-end separately but running on same domain? I am not using SpringBoot also front-end and back-end are in separate folders. I do not want to combine both in same project structure and generate a war file and deploy.
What is the best practice for developing SpringMVC back-end and Angular-2 back-end and deploying them in online server?
What I've found works best is running nginx as a static file server and a forward proxy for the spring app.
usually I use the angular-cli proxy to make /api/ go to http://localhost:8080
that means that calls to http://localhost:3000/api/** get passed to http://localhost:8080/api/. And since you are on the same domain we can simply call /api/

Spring and Angular JS

I'm developing an application using Spring and angular JS . But I don't know if what I'm doing is correct or not . In the same Maven project , I made
a user class then I created a #RestController in which I've created my webservice . In the webapp folder I created my index.html file (and an app.js) in which I used Angular JS . I runned my application on tomcat server and it works fine .
is this application Full client side ? what I think is that Spring MVC expose my service as a REST and Angular JS consume it . Should I keep the web service in this app and make another client application using Angular JS ?? help me , I'm lost
Your front-end is loosely coupled with the back-end since the two sides interact only with restful services. It does not break this approach if you package both AngularJS and spring files in the same application. Separating the two applications brings some complexity which could be necessary if you need to package two deployable files (one front.war and one back.war for instance). If you don't have this concern, then you should keep things like this IMHO.

Self contained jar with Camel and Web Interface?

I have had lots of trobule trying to get my head around how to solve this scenario:
We have an integration application that uses Camel for integration. This application also has a REST Api that exposes some services providing information about the application, for instance listing the active routes etc.
I have created a user interface for this using AngularJS that connects to these rest services. My main problem is how can I package this application as a self contained jar-file that provides the user interface and all the camel integration.
My working theory: Use a separate Jetty server to serve the Angular JS files and let Camel expose the REST services. The problem with this is CORS since the REST services reside on another port than the jetty server serving the Web UI.
Some requirements for the solution:
Must be a single self contained jar-file.
The camel integration is the main purpose, the Web UI is secondary
and only used for trouble shooting. No need for a high performance
web container since the Web ui is used by only a handful of users.
I have been struggling with this for a couple of days now and it feels like I am over complicating the solution. Help on how to solve this is greatly appreciated.
You could take a look at hawtio
http://hawt.io/
as that is how we do that, hawtio is a web console for java, and has plugins for Camel. Its built using angularjs, and uses REST to communicate with the local or remote Java JVMs. To make the REST calls easier we use Jolokia.
Jolokia requires an agent to be embedded in the JVM, eg where Camel runs. Then that helps with CORS et all. http://jolokia.org/reference/html/security.html#d0e2490

Categories