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

Question

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.

1. https://github.com/robharrop/spring-angularjs
2. https://github.com/GermanoGiudici/angularjs-maven-tomcat-seed
3. https://github.com/xvitcoder/spring-mvc-angularjs

Hirsch

are you going to deploy them together? Right now (if you start the spring app too) you are mimicking serving the static front end content from one server and the services from another. Do you intend to serve them together from the same app server? – Godart

@pherris, yes, this is what I want to do. I want to deploy them together from the same app server. Thanks! – Hirsch

Answer 1

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.

Godart

Very thanks for your reply! Actually what I did for now is exactly running two servers with CORS in development. But for production, I think it's better to make them on the same server. And I'm having trouble with enabling CORS for IE. I also read the blog post you sent to me. Currently my java files are under "myApp/scr/mian/java". Then I copied all the files in my angularApp folder to "myApp/src/main/public" is it the correct way? Then which address should I go to for my angular app? – Hirsch

Sounds like you've got it working for development - did you try running grunt build and copying the contents of the dist/ directory to the public directory in your spring app? – Godart

Yes, I copied all the files in my angularApp folder to "myApp/src/main/public". But I don't know what address to go to for the angular app. This is my spring restful api address "localhost:8080/retrieveDoc?id=xxx" and it's still working good to return a json. But I don't know how to access my angular app after copying over them to the "src/main/public" folder. – Hirsch

should just be localhost:8080/index.html (or whatever your main HTML file is named) – Godart

I tried localhost:8080/index.html, but it gives me an HTTP status 404 error. :( – Hirsch

based on this post https://mcmap.net/q/535131/-change-spring-boot-static-web-resources-location you should use this directory structure: src/main/resources/public. Sorry for the confusion here. – Godart

@Godart I have a tomcat/angularjs question. Are you willing to comment on it? Here is the link: #33488480 – Blowzed