Separating the front end from the backend. Spring-boot and Angular2 - angularjs

I am trying to figure out how to separate the frontend from the backend. Example----
DemoProject------
-----------`backend` (module)
-------`frontend` (module)
src
pom.xml
Frontend will be Angular and the backend will be Spring-boot. I am trying to find a sample project or hopefully someone can point me in the right direction. I do not want to make a monolithic application, more micro service type application.

One approcach would be to generate an EAR and deploy it to any enterprise application server.
If you are using maven, then you can have achieve this using a multi-module project.
For this approach you can have 3 child modules and 1 parent module.
You can put the front end code in one module and let the pom.xml generate a WAR out of it.
The second module will have all your back-end code and its pom will generate a JAR (or a WAR is also fine).
The third module will do nothing apart from simply packing the JAR and the WAR into an EAR.
These three modules will be the child modules.
The parent module is just the aggregator module which will execute the pom for each of its child modules. This way, you will you will end up having a JAR, WAR and an EAR.
The EAR is the one that you will deploy to your server.

This sample application and the presentation that goes with it describe a way to organize your Spring Boot application with a frontend/backend module while still leveraging the devtools features.

Related

Angular tsd based application + Spring Boot in JAR

I have faced a problem connected with project config. I am working on an application which consist of server-side (Spring Boot App) and client-side(Angular-Gulp). I would like to configure my project so that when I build a jar file it would include both client and server side. What should I start with? I am using maven. Is it even possible? (if you need some of my code to answer this question just let me know).
Thanks in advance for your answer.
I would recommend you to checkout the article in this location. I too found it difficult when it was not in the standard documentation for the spring boot folder structure.
https://spring.io/blog/2013/12/19/serving-static-web-content-with-spring-boot
If you place the final artifacts form your gulp build to be in one of the folders that spring boot recognizes as web folder will do the trick.
I tried to do the same with Angular2 and Spring Boot and it did work. Please see the my project https://github.com/reflexdemon/shop and let me know your feedback.

Maven Project Organization

I am trying to create module within an existing multi-module maven project. This module will require Grunt, Bower, NPM, Angular JS, bootstrap among others. The output of this project (after the build is done) are static resources (fonts, js-files, application-js, application-css).
There is a separate Web module within the project that hosts the Web-Application portion of the Application.
I need to accomplish the following
Ensure that Maven can kick of the build of Grunt/Bower based UI Module.
Ensure that this module can be plugged in as a dependency for the Web Module.
So far, I have been able to figure out how to include a UI module as a dependency for a Web Project (via WEB-INF/lib/ui.jar...servlet 3.0 spec related).
Question:
What should the structure of the project be like to ensure that I don't copy unnecessary files into the JAR (like package.json or node_modules folder)?
Is there a way Maven can do an incremental build on such a project?
I am finding it hard to reconcile the two different project structures due to my own shortcomings I guess.

How to set up build with git-hosted external frontend project included?

I have a Play 2.2 Application which strickly used only to implement REST API.
I have in an independent GIT repo a AngularJS application. This application uses Grunt and NodeJS to do the build.
The Result of the frontend application is an index.html + 1 js file and 1 css file.
Ideally I would like to invoke the Grunt build script from SBT which builds the angularjs app.
Is there a SBT plugin I can use to do this ?
What is the best approach I should use to do this the most simple way ?
At the moment I build it manually and copy the static resources into my PLAY's public folder.
Thanks in advance
I've never done it before, but a quick Google search gave me sbt-grunt-plugin whose the last commit was authored on Feb 20, 2013 :(
The plugin is a bit outdated, but is doing what I'd propose -- offers a command (could also be a task) that wraps grunt (as the plugin above does). You may also want to read the official documentation of sbt about Commands.
I would then declare a dependency on the angularjs/frontend project using RootProject for the root project with frontend (angularjs) and backend (Play Framework) submodules - see How can sbt pull dependency artifacts from git?:
lazy val frontend = RootProject(uri("git://..."))
lazy val backend = project ...
The root project is auto-created by sbt as described in Default root project:
If a project is not defined for the root directory in the build, sbt
creates a default one that aggregates all other projects in the build.
frontend would need to have build.sbt with the task created and it should work fairly well (it might be the only viable solution to not tie the projects too much and create unnecessary inter-dependencies).

How to deploy AngularJS app and Spring Restful API service on the same domain/server?

I'm new to Spring and AngularJS. I followed the steps here to build the back end restful API, and it sends Json upon requests. So, according to the guide, When I run "mvn spring-boot:run" the tomcat server starts at localhost:8080.
Then I used Yeoman angular generator to build my angular app. And when I run "grunt serve" inside my angular app, the front end app runs at localhost:9000.
What should I do so that my angular app can be served together with my Springboot tomcat server on the same domain, say, localhost:8080 ?
Is there a sample project that I can follow? I found the following projects, but still cannot make it work as I don't have much background on tomcat.
https://github.com/robharrop/spring-angularjs
https://github.com/GermanoGiudici/angularjs-maven-tomcat-seed
https://github.com/xvitcoder/spring-mvc-angularjs
You need to take either:
the built files (grunt build then basically everything in the dist/ directory)
the raw files (your index.html and all JS as-is)
and copy them into one of the following folders (I recommend /public/): http://spring.io/blog/2013/12/19/serving-static-web-content-with-spring-boot
Spring Boot will automatically add static web resources located within any of the following directories:
/META-INF/resources/
/resources/
/static/
/public/
This means that not only does Spring Boot offer a simple approach to building Java or Groovy apps, you can also use it to easily deploy client-side JavaScript code and test it within a real web server environment!
This is going to be a pain for development however since you will have to re-copy the files every time you make a change for the front end. For production your goal should be to deploy a versioned copy of the built files with your spring app.
For development you might want to consider letting grunt serve the Angular content and running both Tomcat and your grunt server (is it node?) and enabling cross origin requests between your front end and back end. OR you could just copy the whole angular directory into one of the above directories but that is a short term approach.

Angular js with spring mvc

Currently trying to implement angular js with spring mvc
Tried to implement the sample project springmvc-angularjs-master from the site-https://github.com/xvitcoder/spring-mvc-angularjs , not sure how to use the folder structure of this sample project into a spring project.
i read the thread - Spring MVC and Angularjs
but still could not find the solution. Do i need to create new folder webapp under the src folder in the web application?
can someone help me how to convert this sample project into spring web application?
i am not using maven and using simple web application with spring capabilites in myeclipse ide.
Current project folder structure:
SampleApp
-src
--controller,bean folders
-webroot
--webinf
---web.xml,springmvc.xml
---html folder(index.html,etc.,)
--resources
---js
----app.js,services.js,controller.js and lib folder
You should be able to import the project as Maven project (Import > Maven > Existing MavenProject) and run it as is. All of the necessary mappings can be found in /src/main/webapp/WEB-INF/spring/webapp-config.xml
Once you have your head wrapped around that, you should be able to extract what you need.
I also noticed some of the #override annotations were throwing some errors. I just removed them.

Resources