Spring and Angular JS - java

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.

Related

Spring Boot App & React App Cannot Communicate Inside Openshift

I have deployed a single fat .jar, containing a Spring Boot app and a React app in Openshift.
The Spring Boot app exposes a REST API, and the React app is the frontend that makes calls to that API.
Problem
Both apps are accessible externally just fine (with the url generated by Openshift), but the React app cannot communicate with the Spring Boot app through http://localhost:8080/... calls.
Attempts so Far
I have tried using 127.0.0.0 instead of localhost but with no avail.
I also tried performing curl -v http://localhost:8080/... from inside the pod where the 2 apps are deployed and it works fine.
Is this a configuration issue? Do I need to set up routes? Or use something other than localhost/127.0.0.1?
To answer my own question, I finally managed to solve this by following Boris Chistov's suggestion. I simply removed all the http://localhost:8080 url parts and used relative URLs instead.

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/

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

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

Categories