/spring-boot-ng

Starter project using Spring Boot and Angular

Primary LanguageHTMLMIT LicenseMIT

Spring Boot with Angular Starter

License Build Status Known Vulnerabilities (Server) Known Vulnerabilities (Client)

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