Spring Boot with Angular Starter
Sample project using Spring Boot to serve an Angular frontend.
Overview
This project is a simple starter using Spring Boot with Angular. The project relies on a Maven multi-module layout to package both the client and server assets independently (this can also be done with Gradle if desired).
The Angular client code was initially generated using the Angular CLI
and can be treated as a standard CLI project when developing locally (meaning
using the CLI). Running the client via ng serve is the expected way of
working when doing frontend development.
When running the frontend this way, the proxy.conf.json configuration is used to route calls to the backend through to the Spring Boot application running on port 8080. This avoids any issues with CORS and helps reduce compiler "lag" that can interrupt workflow.
To make this seamless, the client pom uses the frontend maven plugin
to attach the Angular build to the overall Maven lifecycle. The result is that
Maven will package the resulting dist folder into the client jar as static
content. In addition to build, lint and e2e scripts are attached to the
Maven compile and integration-test phases respectively.
When packaged, the resulting Spring Boot executable 'fat' JAR
will contain the Angular bundles and act as if they had been copied directly
into the src/main/resources/static folder. The client jar may also be used
to transfer and unpack the static bundles to edge cache/CDN (as desired).
Getting Started
- TODO
IDE Setup
Common Problems
When I run the Spring Boot application in the IDE and visit http://localhost:8080, there is no web content.
When running the application via Spring Boot within the IDE this issue can
occur when there is no jar in the client's target folder. The IDE needs
this file in order to add it to the application classpath. This problem is
frequently the result of a manual mvn clean.
To fix this issue, perform a mvn package on the client and restart the
application. NOTE: if you run the frontend via node (usually recommended) and use http://localhost:4200
this problem will not occur.
IntelliJ doesn't detect the Angular submodule
When you first Import the project if you pick the root pom.xml to import it sometimes does not autodetect the Angular CLI and doesn't auto configure the server runner. To work around this, delete the .idea folder reimport the project just using the root folder.
TODO
- Figure out if you can build dev and prod JARs of the client (use Maven scopes?)
- Add UI routing
- Add support for Bootstrap
- Add a sample frontend -> backend call
- Add Spring Data example
- Add Spring Security using OAuth2
ng new -g --routing --style=scss ng-app