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
http://localhost:8080, there is no web content.
When I run the Spring Boot application in the IDE and visitWhen 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