Angular 2 Files within Spring Boot Web Application

Question

I am building an angular 2 web application with spring boot using Java EE via eclipse neon . I have been reading lots of ways to do this, but most seem to suggest keeping your static resources within a " static " folder under the " resources " folder within your project. Some, however, seem to say to use a " client " or " frontend " folder within the main src folder of your project.

I am using a pre-built angular 2 front end, and want to use that with my application. Where is the standard location for the angular files? Do I keep my component, styling, html and image files in the "static" folder, or in the "frontend" folder? What have you all done in the past?

The end goal is to not bundle the frontend with the backend, I am doing this for development only.

Also, if adding the files to the main src folder, would I also need to do that for my test project as well (in the test folder of my application)?

Thanks!

Answer 1

If you are not bundling your frontend code with backend then there is no point in adding the angular code to resources folder or any where inside your backend codebase.

Just for development purpose you can use angular webpack based server for rendering the files. With this you frontend angular code cant make calls to spring boot apis. You can define a proxy service for overcoming this. Refer this link to create a proxy. https://juristr.com/blog/2016/11/configure-proxy-api-angular-cli/

This makes angular backend calls to be proxied for the endpoint where your backend apis are hosted. With this approach you can individually mangage your front and backend code, with no dependencies between them.

Answer 2

I have and example that does that on github https://github.com/jroneil/WebRanking using Angular JS but 2 would work the same folder structure you can see the actual folder structure here https://github.com/jroneil/WebRanking/tree/master/src/main/resources

• Spring boot can works with Static files They go in the src/main/resources directory
• You can use plain HTML Files or HTML Template such as freemarker or spring thymeleaf
• The static file go in the static folder under resources these are images, css and js files
• The templates go under the template folder these can be freemarker templates or spring tymeleaf files or others