© Rawpixel.com/Shutterstock.com
Java Magazin
Spring Boot und Vue.js im eigenen Projekt praktisch nutzen

Zwei zum Verlieben

Mit Vue.js gibt es schon wieder einen neuen Stern am JavaScript-Himmel? Aber wie lässt sich der denn nun wieder in den eigenen Toolstack integrieren? Am Beispiel von Spring Boot als populärem Vertreter moderner Java-Frameworks lässt sich sehr gut zeigen, wie das geht. Eine Einführung in alles, was man zum Leben mit Spring Boot und Vue.js braucht.

Jonas Hecht


Video: Spring 5.0 und Spring Boot 2.0 – ein Überblick

Das JavaScript-Framework Vue.js ist gerade in aller Munde. Das kommt natürlich nicht von ungefähr, bietet es doch einen schnellen Einstieg in die Welt der modernen, komponentenbasierten Webframeworks. So hat sich Vue.js schon einen Platz in der Riege der ganz Großen erarbeitet und bietet damit eine Alternative zu Angular und React [1]. Speziell die flachere Lernkurve sowie die höhere Entwicklungsgeschwindigkeit im Vergleich zu den bekannten Vertretern scheint die Entscheidung für Vue.js in vielen Projekten zu begünstigen [2].

Doch in der Praxis stellt sich natürlich die Frage, wie sich der neue Stern am JavaScript-Himmel in bereits vorhandene Stacks integrieren lässt – allen voran mit dem beliebten Java-Microservices-Framework Spring Boot. Außerdem muss ein vernünftiger (lokaler) Entwicklungsprozess her, damit das Entwickeln flott von der Hand geht. Nicht zuletzt sollten sich beide Frameworks nahtlos in bestehende Continuous-Integration- und -Delivery-Pipelines integrieren und entsprechend automatisiert deployed werden können.

Projekt-Set-up

Um dem Leser möglichst umfassend die Nachvollziehbarkeit jedes beschriebenen Punkts zu ermöglichen, findet sich auf GitHub ein vollständiges Beispielprojekt [3]. Es kann auch als Vorlage für erste eigene Projekte auf Basis von Spring Boot und Vue.js dienen. Den Erstkontakt mit den Frameworks hat man als Entwickler meist mit dem Projekt-Set-up. Eine klare Struktur kann hier den Einstieg erleichtern. Das Beispielprojekt bildet eine gewohnte Maven-Projektstruktur ab (Abb. 1).

Abb. 1: Eine klare Projektstruktur kann beim Einstieg helfen

Die pom.xml [4] im Hauptordner der Beispielanwendung spring-boot-vuejs enthält somit im Wesentlichen die beiden Maven-Module backend und frontend:

frontend backend

Die Build-Reihenfolge der beiden Module ist dabei wichtig und sollte nicht geändert werden. Zuerst wird das frontend-Modul gebaut, danach das backend-Modul.

Vue.js Frontend

Um die nächsten Schritte nachvollziehen zu können, wird eine funktionierende Node.js-Installation [5] vorausgesetzt. Mithilfe eines Paketmanagers ist das schnell erledigt. So installiert beispielsweise ein brew install node alles Nötige auf einem Mac. Zusätzlich wird das Vue.js Command Line Interface (CLI) vue-cli (Abb. 2) benötigt, das einfach mit dem Node.js-Paketmanager npm [6] installiert wird: npm install --global vue-cli. Nun kann im frontend-Ve...

Java Magazin
Spring Boot und Vue.js im eigenen Projekt praktisch nutzen

Zwei zum Verlieben

Mit Vue.js gibt es schon wieder einen neuen Stern am JavaScript-Himmel? Aber wie lässt sich der denn nun wieder in den eigenen Toolstack integrieren? Am Beispiel von Spring Boot als populärem Vertreter moderner Java-Frameworks lässt sich sehr gut zeigen, wie das geht. Eine Einführung in alles, was man zum Leben mit Spring Boot und Vue.js braucht.

Jonas Hecht


Video: Spring 5.0 und Spring Boot 2.0 – ein Überblick

Das JavaScript-Framework Vue.js ist gerade in aller Munde. Das kommt natürlich nicht von ungefähr, bietet es doch einen schnellen Einstieg in die Welt der modernen, komponentenbasierten Webframeworks. So hat sich Vue.js schon einen Platz in der Riege der ganz Großen erarbeitet und bietet damit eine Alternative zu Angular und React [1]. Speziell die flachere Lernkurve sowie die höhere Entwicklungsgeschwindigkeit im Vergleich zu den bekannten Vertretern scheint die Entscheidung für Vue.js in vielen Projekten zu begünstigen [2].

Doch in der Praxis stellt sich natürlich die Frage, wie sich der neue Stern am JavaScript-Himmel in bereits vorhandene Stacks integrieren lässt – allen voran mit dem beliebten Java-Microservices-Framework Spring Boot. Außerdem muss ein vernünftiger (lokaler) Entwicklungsprozess her, damit das Entwickeln flott von der Hand geht. Nicht zuletzt sollten sich beide Frameworks nahtlos in bestehende Continuous-Integration- und -Delivery-Pipelines integrieren und entsprechend automatisiert deployed werden können.

Projekt-Set-up

Um dem Leser möglichst umfassend die Nachvollziehbarkeit jedes beschriebenen Punkts zu ermöglichen, findet sich auf GitHub ein vollständiges Beispielprojekt [3]. Es kann auch als Vorlage für erste eigene Projekte auf Basis von Spring Boot und Vue.js dienen. Den Erstkontakt mit den Frameworks hat man als Entwickler meist mit dem Projekt-Set-up. Eine klare Struktur kann hier den Einstieg erleichtern. Das Beispielprojekt bildet eine gewohnte Maven-Projektstruktur ab (Abb. 1).

Abb. 1: Eine klare Projektstruktur kann beim Einstieg helfen

Die pom.xml [4] im Hauptordner der Beispielanwendung spring-boot-vuejs enthält somit im Wesentlichen die beiden Maven-Module backend und frontend:

frontend backend

Die Build-Reihenfolge der beiden Module ist dabei wichtig und sollte nicht geändert werden. Zuerst wird das frontend-Modul gebaut, danach das backend-Modul.

Vue.js Frontend

Um die nächsten Schritte nachvollziehen zu können, wird eine funktionierende Node.js-Installation [5] vorausgesetzt. Mithilfe eines Paketmanagers ist das schnell erledigt. So installiert beispielsweise ein brew install node alles Nötige auf einem Mac. Zusätzlich wird das Vue.js Command Line Interface (CLI) vue-cli (Abb. 2) benötigt, das einfach mit dem Node.js-Paketmanager npm [6] installiert wird: npm install --global vue-cli. Nun kann im frontend-Ve...

Neugierig geworden?


    
Loading...

Angebote für Teams

Für Firmen haben wir individuelle Teamlizenzen. Wir erstellen Ihnen gerne ein passendes Angebot.

Das Library-Modell:
IP-Zugang

Das Company-Modell:
Domain-Zugang