Comment configurer Spring Boot avec Vue.js Frontend

Dans cet article, vous apprendrez à configurer un projet multi-module Maven composé d’un backend Spring Boot et d’un frontend Vue.js. L’application elle-même ne sera pas créée, seule la configuration du projet est traitée dans cet article. Apprécier!

Introduction

De nombreuses applications se composent d’un backend et d’un frontend. Mais comment allez-vous organiser et structurer votre projet et comment allez-vous déployer le backend et le frontend ? Beaucoup d’options à choisir et il n’y a pas de taille unique. Vous devez prendre des décisions adaptées à votre cas d’utilisation. Dans les deux cas, il est important de garder le code backend et le code frontend séparés l’un de l’autre. De cette façon, il est plus facile de changer les choses plus tard. Alors, quelles décisions devez-vous prendre ?

Souhaitez-vous empaqueter et déployer le backend et le frontend simultanément ?
Avez-vous besoin de pouvoir faire évoluer votre application dès le début ?
Voulez-vous que le frontend soit mis à jour séparément du backend ?
Parmi beaucoup d’autres.

Il n’y a pas de bien ou de mal, vous devez choisir judicieusement en fonction du type d’application et des exigences non fonctionnelles. Dans cet article, vous apprendrez à configurer la structure du projet pour une application composée d’une partie backend Spring Boot et d’une partie frontend Quasar (Quasar est un framework basé sur Vue.js). Les deux sont empaquetés dans le fichier jar Spring Boot et déployés comme une seule unité. Cela vous permettra de démarrer assez rapidement et cela laissera les options ouvertes pour séparer les deux en cas de besoin. Dans ce dernier cas, vous devrez déployer la partie frontend dans un serveur web comme NGINX. En tant qu’outil de construction, Maven sera utilisé.

Les sources utilisées dans ce blog sont disponibles sur GitHub.

Conditions préalables

Connaissance de base de Spring Boot.
Connaissance de base de Quasar (Vue.js) ou d’un autre framework frontal.
Connaissance de base de Linux.
Connaissance de base de Maven.

En plus de cela, vous devez avoir installé Java 17, Node.js et npm. Les instructions d’installation de Node.js se trouvent dans la documentation officielle. Choisissez les instructions pour votre système d’exploitation et assurez-vous d’utiliser une version LTS.

Vous trouverez ci-dessous les instructions lorsque vous utilisez Ubuntu 22.04 :

$ curl -fsSL https://deb.nodesource.com/setup_lts.x | sudo -E bash - &&\
$ sudo apt-get install -y nodejs

Après cela, vérifiez l’installation :

Mettre à jour npm :

$ sudo npm install -g npm@9.2.0

Installez le Framework Quasar, qui vous permettra de créer des applications web réactives. C’est comme une couche au-dessus de Vue.js :

$ sudo npm install -g @quasar/cli

Aperçu du projet

Comme écrit précédemment, vous allez créer un projet multi-module Maven, composé d’une application backend Spring Boot et d’une interface Quasar. La structure du projet est la suivante :

myspringbootvueplanet
├── backend
│   └── pom.xml 
├── frontend
│   └── pom.xml 
└── pom.xml

Le projet principal s’appelle myspringbootvueplanet et a son propre pom. Il se compose d’un module backend et un module l’extrémité avant, chacun avec ses propres fichiers pom. Dans les sections suivantes, cette structure sera créée et le contenu des répertoires et des fichiers pom sera créé.

Backend de démarrage de printemps

Tout d’abord, vous commencerez par le backend Spring Boot :

Accédez à Spring Initializr.
Choisissez Java 17
Choisissez Maven
Ajoutez la dépendance Spring Web.
Téléchargez le projet et décompressez-le.

Créer un répertoire backend dans votre répertoire de projet principal et déplacez le src répertoire à ce nouveau répertoire principal. Ensuite, copiez le fichier pom dans le backend annuaire:

$ mkdir backend
$ mv src/ backend/src
$ cp pom.xml backend/pom.xml

Le pom dans le projet principal doit être adapté pour qu’il connaisse le module backend. Modifiez le contenu comme suit.

Note: l’emballage est changé en pom:

<?xml version="1.0" encoding="UTF-8"?>
<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
    xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 https://maven.apache.org/xsd/maven-4.0.0.xsd">
    <modelVersion>4.0.0</modelVersion>
     
    <groupId>com.mydeveloperplanet.myspringbootvueplanet</groupId>
    <artifactId>myspringbootvueplanet</artifactId>
    <version>0.0.1-SNAPSHOT</version>
    <name>MySpringBootVuePlanet</name>
    <description>Demo project for Spring Boot with Vue frontend</description>
    <packaging>pom</packaging>
 
    <modules>
        <module>backend</module>
    </modules>
 
</project>

Le pom backend doit également être modifié. Changer la artifactId dans backend.

Modifiez la ligne suivante :

<artifactId>myspringbootvueplanet</artifactId>

Dans:

<artifactId>backend</artifactId>

Et retirer le name étiqueter. La partie supérieure du pompon est la suivante :

<parent>
  <groupId>org.springframework.boot</groupId>
  <artifactId>spring-boot-starter-parent</artifactId>
  <version>3.0.1</version>
  <relativePath/> <!-- lookup parent from repository -->
</parent>
<groupId>com.mydeveloperplanet.myspringbootvueplanet</groupId>
<artifactId>backend</artifactId>
<version>0.0.1-SNAPSHOT</version>

Vérifiez si le projet Maven se construit en exécutant la commande suivante à partir de la racine du projet :

Interface Quasar

Pour créer une application frontale Vue.js de base avec le framework Quasar, vous exécutez la commande suivante depuis la racine du référentiel et vous répondez aux questions selon vos besoins :

$ npm init quasar
What would you like to build? › App with Quasar CLI, let's go!
Project folder: … frontend
Pick Quasar version: › Quasar v2 (Vue 3 | latest and greatest)
Pick script type: › Typescript
Pick Quasar App CLI variant: › Quasar App CLI with Vite
Package name: … frontend
Project product name: (must start with letter if building mobile apps) … myspringbootvueplanet
Project description: … A demo project for Spring Boot with Vue/Quasar
Author: … mydeveloperplanet <mymail@address.com>
Pick a Vue component style: › Composition API
Pick your CSS preprocessor: › Sass with SCSS syntax
Check the features needed for your project: › ESLint
Pick an ESLint preset: › Prettier
Install project dependencies? (recommended) › Yes, use npm

A ce moment, un l’extrémité avant répertoire a été créé à la racine du référentiel contenant l’application frontale. Ajoutez le pom suivant au l’extrémité avant annuaire. Dans ce pom, vous utilisez le plugin frontend-maven, qui vous permet de créer l’application frontale au moyen de Maven :

<?xml version="1.0" encoding="UTF-8"?>
<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
         xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 https://maven.apache.org/xsd/maven-4.0.0.xsd">
  <modelVersion>4.0.0</modelVersion>
  <groupId>com.mydeveloperplanet.myspringbootvueplanet</groupId>
  <artifactId>frontend</artifactId>
  <version>0.0.1-SNAPSHOT</version>
 
  <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>v18.12.1</nodeVersion>
            </configuration>
          </execution>
          <execution>
            <id>npm install</id>
            <goals>
              <goal>npm</goal>
            </goals>
            <configuration>
              <arguments>install</arguments>
            </configuration>
          </execution>
          <execution>
            <id>npm install @quasar/cli -g</id>
            <goals>
              <goal>npm</goal>
            </goals>
            <configuration>
              <arguments>install @quasar/cli -g</arguments>
            </configuration>
          </execution>
          <execution>
            <id>npx quasar build</id>
            <goals>
              <goal>npx</goal>
            </goals>
            <configuration>
              <arguments>quasar build</arguments>
            </configuration>
          </execution>
        </executions>
      </plugin>
    </plugins>
  </build>
 
</project>

Maintenant, ajoutez le module frontend au pom à la racine du dépôt :

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

Vérifiez si le projet est compilé et exécutez la commande suivante à partir de la racine du dépôt :

Combinez Backend et Frontend

Il est maintenant temps de conditionner les fichiers de distribution frontend avec l’application backend. Pour ce faire, vous ajoutez ce qui suit au build-plugins section du backend pom :

<build>
  <plugins>
    <plugin>
      <artifactId>maven-resources-plugin</artifactId>
      <executions>
        <execution>
          <id>copy frontend content</id>
          <phase>generate-resources</phase>
          <goals>
            <goal>copy-resources</goal>
          </goals>
          <configuration>
            <outputDirectory>target/classes/static</outputDirectory>
            <overwrite>true</overwrite>
            <resources>
              <resource>
                <directory>../frontend/dist/spa</directory>
              </resource>
            </resources>
          </configuration>
        </execution>
      </executions>
    </plugin>
  </plugins>
</build>

La version frontale génère les fichiers distribuables dans le répertoire <root repo>/frontend/dist/spa. Le plugin maven-resources copiera ces ressources et les ajoutera au <root repo>/target/classes/static annuaire. L’application Spring Boot servira ces pages sur http://localhost:8080/. Par défaut, Spring servira du contenu statique à partir d’un certain nombre de répertoires.

Faire attention: après…