Vue.js Frontend mit Spring Boot Backend

Vue.js ist eine schnelle und flexible JavaScript-basierte Frontend-Entwicklungsplattform. Durch intuitive Syntax und umfangreiche Bibliotheken ist es eine der besten Optionen für moderne Frontend-Entwicklung. Hier kombinieren wir es mit einem Spring Boot Backend!

Frontend und Backend im Zusammenspiel

Was bauen wir genau?

Wir programmieren ein modernes Frontend mit Vue.js.
Mit npm bauen wir das Frontend als produktionsbereites, kompaktes Artefakt.
Danach Kopieren wir es in unsere Spring Boot Anwendung, so dass es vom integrierten Application Server (z. B. Tomcat oder Netty) ausgeliefert wird.
Mit Spring Boot implementieren wir das Backend mit REST-API für das Vue.js Frontend.

Das folgende Bild zeigt die Struktur unseres Spring Boot Servers mit integriertem Vue.js Frontend. Zuerst lädt der Benutzer die komplette Frontend Anwendung im Browser. Sofern diese mit Vue.js als Single Page Application gebaut wurde, finden anschließend nur noch REST-Requests statt.

Frontend und Backend Entwicklung

Dieser Artikel konzentriert sich auf die Integration des Vue.js Frontend in das Spring Boot Backend.
Zum Entwickeln eines Frontend mit Vue.js schaut euch https://vuejs.org/ an.
Zum Programmieren vom Spring Backend findet ihr viele Artikel hier hier im Blog oder bei Udemy.

Frontend bauen und in Spring Boot integrieren

Nachdem ihr das Frontend in einem beliebigen Verzeichnis entwickelt und getestet habt, könnt ihr es für den produktiven Einsatz bauen. Öffnet dazu eine Shell im Frontend-Verzeichnis und führt den folgenden, fett markierten Befehl aus:

PS C:\<path to Vue.js project>\frontend> npm run build

> frontend@0.0.0 build

...
vite v4.1.2 building for production...

✓ 54 modules transformed.

dist/index.html 0.39 kB

dist/assets/index-638fb41c.js 85.25 kB │ gzip: 33.71 kB

Das Ergebnis des Bauen befindet sich im automatisch erstellten \dist Verzeichnis. Es ist eine transformierte und komprimierte Version des Frontend für den produktiven Einsatz.

Die Integration ins Spring Boot Projekt probieren wir einmalig von Hand aus. Dazu kopieren wir alle Dateien und Verzeichnisse im \dist Verzeichnis in das src\main\resources\public Verzeichnis des Spring Boot Projektes. Das public Verzeichnis erstellen wir vorab, das Verzeichnis resources sollte im neu generierten Spring Boot Projekt vorhanden sein.

Danach startet wir die Spring Boot Anwendung und öffnet sie im Browser. http://localhost:8080/index.html zeigt dann das Frontend.

Frontend und Backend mit Maven bauen

Maven Frontend Konfiguration

Meistens bauen wir aus unserer Spring Boot Anwendung eine ausführbare jar Datei. Dazu verwenden wir das Build Tool Maven. Zuerst muss das Frontend gebaut werden, die Maven Konfiguration pom.xml sieht so:

<?xml version="1.0" encoding="UTF-8"?>
<project xmlns=...>
    <modelVersion>4.0.0</modelVersion>
    <artifactId>frontend</artifactId>

    <parent>
        <groupId>de.bsi</groupId>
        <artifactId>vue</artifactId>
        <version>0.2</version>
    </parent>

    <build>
        <plugins>
            <plugin>
                <groupId>com.github.eirslett</groupId>
                <artifactId>frontend-maven-plugin</artifactId>
                <version>1.12.1</version>
                <executions>
                    <execution>
                        <id>install node and npm</id>
                        <goals>
                            <goal>install-node-and-npm</goal>
                        </goals>
                        <configuration>
                            <nodeVersion>v16.17.0</nodeVersion>
                        </configuration>
                    </execution>
                    <execution>
                        <id>npm install</id>
                        <goals>
                            <goal>npm</goal>
                        </goals>
                        <phase>generate-resources</phase>
                        <configuration>
                            <arguments>install</arguments>
                        </configuration>
                    </execution>
                    <execution>
                        <id>npm run build</id>
                        <goals>
                            <goal>npm</goal>
                        </goals>
                        <configuration>
                            <arguments>run build</arguments>
                        </configuration>
                    </execution>
                </executions>
            </plugin>
        </plugins>
    </build>
</project>

Maven verwendet das Plugin frontend-maven-plugin zum Bauen der Vue.js Anwendung. Ausführliche Infos dazu gibt es hier: https://github.com/eirslett/frontend-maven-plugin
Die hier gezeigt Plugin Konfiguration lädt und installiert zuerst npm und nodejs.
Danach wird npm install ausgeführt, um die Packages für das Vue.js Frontend zu laden.
Im letzten Schritt wird das Frontend mit npm gebaut, so wie wir es im vorherigen Abschnitt von Hand gemacht haben. Das Plugin führt dazu den Befehl npm run build aus.
Die hier gezeigte Maven Konfiguration ist Teil eines Maven Multi-Module Projektes. Deshalb gibt es ein parent Tag.

Maven Parent Konfiguration

Das Parent Projekt bildet die Klammer, um das Frontend und Backend Maven Modul. Ohne Maven Parent Projekt, müsstet ihr Frontend und Backend getrennt bauen - also Maven 2 mal starten. Mit Parent Projekt startet ihr nur dessenn Maven Build. Der Build des Parent Projektes steuert die Maven Builds vom frontend und backend Modul.

<?xml version="1.0" encoding="UTF-8"?>
<project xmlns=...>
   <modelVersion>4.0.0</modelVersion>
   <parent>
      <groupId>org.springframework.boot</groupId>
      <artifactId>spring-boot-starter-parent</artifactId>
      <version>3.0.2</version>
      <relativePath/>
   </parent>
   <groupId>de.bsi</groupId>
   <artifactId>vue</artifactId>
   <version>0.2</version>
   <name>vue</name>
   <description>Demo project for Spring Boot with Vue.js</description>
   <packaging>pom</packaging>

   <modules>
      <module>frontend</module>
      <module>backend</module>
   </modules>
</project>

Das Parent Projekt ist ein Spring Boot Projekt (siehe parent Tag), so dass auch die beiden Module Spring Boot Projekte sind. Für das frontend Modul wäre das nicht nötig.
Der Maven Build baut entsprechend der Reihenfolge im XML erst das frontend und dann das backend Modul. Hinweis: Ein paralleler Build mit mehreren Threads würde hier Fehler produzieren.

Zur Verdeutlichung die Verzeichnisstruktur sieht in meinem Beispiel so aus:

vue (pom.xml für Maven parent Projekt)

backend (pom.xml für Maven Modul Spring Boot Backend)
frontend (pom.xml für Maven Modul Vue.js Frontend)

Maven Backend Konfiguration

Die Maven Konfiguration des Backend Moduls sieht so aus:

<?xml version="1.0" encoding="UTF-8"?>
<project xmlns=...>
    <modelVersion>4.0.0</modelVersion>
    <parent>
        <groupId>de.bsi</groupId>
        <artifactId>vue</artifactId>
        <version>0.2</version>
    </parent>
    <artifactId>backend</artifactId>
    <version>0.2</version>
    <name>backend</name>
    <description>Backend implemented with Spring Boot Java stack.</description>
    <properties>
        <java.version>17</java.version>
    </properties>
    <dependencies>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-webflux</artifactId>
        </dependency>
    </dependencies>

    <build>
        <plugins>
            <plugin>
                <groupId>org.springframework.boot</groupId>
                <artifactId>spring-boot-maven-plugin</artifactId>
            </plugin>

            <plugin>
                <artifactId>maven-resources-plugin</artifactId>
                <executions>
                    <execution>
                        <id>copy Vue.js frontend content</id>
                        <phase>generate-resources</phase>
                        <goals>
                            <goal>copy-resources</goal>
                        </goals>
                        <configuration>
                            <outputDirectory>src/main/resources/public</outputDirectory>
                            <overwrite>true</overwrite>
                            <resources>
                                <resource>
                                    <directory>${project.parent.basedir}/frontend/dist</directory>
                                </resource>
                            </resources>
                        </configuration>
                    </execution>
                </executions>
            </plugin>
        </plugins>
    </build>
</project>

backend und frontend Modul haben dasselbe Parent Projekt.
Es gibt ein besonderes Plugin, das maven-resources-plugin. Dieses kopiert das /dist Verzeichnis aus dem frontend Modul in das src/main/resources/public Verzeichnis des backend Moduls. Der eingebettete Application Server von Spring Boot liefert dann die statischen Frontend-Dateien aus diesem Verzeichnis aus, wie anfangs gezeigt.
Die restliche Maven Konfiguration des Backends entspricht herkömmlichen Spring Boot Projekten.

Abschluss

Mit mvn clean package bauen wir im Verzeichnis mit der parent POM das komplette Projekt. Die jar Datei im backend/target Verzeichnis enthält danach das Spring Boot Backend und das Frontend.

Das jar File könnten wir dann in einen Docker Container packen. Dann würde ein Docker Container Frontend und Backend ausliefern, so wie wir es von klassischen Web-Anwendungen kennen.

Den kompletten Code findet ihr in GitHub:

https://github.com/elmar-brauch/vue

Dieses Blog durchsuchen

Agile Coding mit Java, Kotlin, Spring und Microservices