Integration von Spring und Angular mit Gradle

In diesem Artikel geht es darum, wie eine Angular-Frontend-Anwendung gemeinsam mit dem Spring-Backend ausgeliefert werden kann, und zwar automatisch per Gradle-Skript.

Spring-Anwendung vorbereiten

Screenshot der vorgenommenen Einstellungen auf start.spring.io

Um die Anbindung zu testen, bereiten wir einen einfachen Endpunkt in Spring vor, den wir später mit unserer Angular-Anwendung ansprechen können. Nach der Initialisierung der Spring-Anwendung (z.B. per start.spring.io) legen wir einen Controller mit beliebigem Namen an und erstellen darin folgenden Endpunkt:

Angular-Anwendung vorbereiten

Um die Angular-Anwendung zu initialisieren, wird das Angular-CLI (Command Line Interface) benötigt. Falls noch nicht vorhanden, node.js installieren und anschließend das Angular-CLI wie folgt installieren:

npm install -g @angular/cli

Nun innerhalb des Projektes in den Ordner ./src/main wechseln und darin die Angular-Anwendung initialisieren:

ng new demoapp

Am Ende sollte ein Ordner „demoapp“ entstanden sein, in dem sich folgende Dateistruktur befindet:

Dateistruktur im Anwendungsverzeichnis nach Initialisierung der Angular-Anwendung

In der Konfigurationsdatei angular.json muss der Pfad unter „projects.demoapp.architect.build.options.outputPath“ angepasst werden:

"outputPath": "dist/static"

Für ein schnelles Styling empfiehlt es sich außerdem, Bootstrap zu installieren. Dafür im Ordner „demoapp“  npm install --save bootstrap  ausführen und in der Konfigurationsdatei angular.json „projects.demoapp.architect.build.options.styles“ erweitern:

"styles": [ "./node_modules/bootstrap/dist/css/bootstrap.min.css", "src/styles.css" ],

Bootstraps Javascript benötigen wir in diesem Fall nicht. Andernfalls werden die benötigten Skripte einfach unter „scripts“ eingefügt.

Unter src/app passen wir die Dateien app.module.ts, app.component.ts und app.component.html an. Wir fügen unserer App ein Formular hinzu, das den vorhin erstellten Endpunkt anspricht. Wenn die Anfrage klappt, zeigen wir die empfangene Begrüßung an.

Anwendungen integrieren und deployen

Um Front- und Backend-Anwendung zusammenzufügen und gemeinsam zu deployen, erweitern wir die build.gradle Datei, die sich im Wurzelverzeichnis des Projektes befindet, wie folgt:

Anschließend kann die integrierte Anwendung mit  gradle bootRun gebaut und ausgeführt werden. Es werden nacheinander die Tasks installDependencies, buildAngular und bootRun ausgeführt.

Die Anwendung läuft nun auf localhost:8080.

Screenshot der Demoapp nach erfolgreichem POST Request an das Backend

Funktioniert!

Proxy für die Angular-Entwicklung einrichten

Während der Entwicklung der Angular-Anwendung, kann diese mittels  ng serve lokal ausgeführt werden. Das hat den Vorteil, dass jedes Mal, wenn Änderungen gespeichert werden, diese sofort eingebaut und im Browser angezeigt werden. Die Angular-Anwendung läuft dann natürlich auf einem anderen Port als das Backend. Man könnte nun das Backend über den vollen Pfad ansprechen, das führt allerdings i.d.R. zu CORS-Fehlern (Cross-Origin Resource Sharing). Um diese zu vermeiden, kann für die Angular-Anwendung ein Proxy eingerichtet werden.

Dafür einfach im demoapp Verzeichnis die datei proxy.conf.json anlegen:

Und den „scripts“ Eintrag in package.json wie folgt anpassen:

"start": "ng serve --proxy-config proxy.conf.json",

Wenn die App nun per  npm start ausgeführt wird, läuft sie auf localhost:4200. Anfragen an „/api“ werden jedoch an localhost:8080, wo das Backend läuft, weitergeleitet.

Übrigens: Um während der Entwicklung das Backend ohne die Angular Anwendung zu bauen (was deutlich schneller geht), kann es mit  gradle bootRun -x buildAngular gestartet werden.

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.