Intégrer un frontend React à Spring-Boot

March 14, 2021

Introduction

Vous avez développé votre application Single Page Application React avec create-react-app, et votre backend avec Spring-Boot. Excellent! Mais maintenant il faut intégrer tout ça. Ca tombe bien, Spring-Boot, via son paradigme Convention over Configuration permet d’intégrer notre appli SPA, quasiment automatiquement! On va voir comment ça fonctionne dans ce POST.

Transpiler l’appli frontend avec create-react-app

Première étape : on va transpiler et minifier l’application frontend qu’on a développé. Pour info, notre application réside dans le répertoire src/main/js (mais au aurait pu choisir autre chose, par exemple src/main/webapp). On suppose que vous avez crée votre application avec create-react-app. Ce dernier propose la commande npm run build qui va générer dans un répertoire build toute notre application prête à l’emploi, trasnpilée et minifiée. Voici un exemple de contenu du répertoire build :

  • index.html
  • favicon.ico
  • manifest.json
  • static

    • css : tous CSS minifiés
    • js : tous JS minifiés
    • media : toutes images, fichiers divers

Automatiser la transpilation via maven

Maven propose un plugin spécifique pour effectuer la transpilation du frontend automatiquement à chaque build, frontend-maven-plugin. Il faut spécifier à ce plugin la version de Node/NPM qu’on souhaite installer, ainsi que les tâches (goal) à lancer. On indique donc :

  • install pour effectuer un npm install, et installer les dépendance de notre SPA;
  • run build pour lancer la transpilation/minification vers le répertoire build. Voici donc ce qu’il faut ajouter dans le pom.xml, dans build/plugins :
    <plugin>
        <groupId>com.github.eirslett</groupId>
        <artifactId>frontend-maven-plugin</artifactId>
        <version>${frontend-plugin-plugin.version}</version>
        <configuration>
            <installDirectory>target</installDirectory>
            <workingDirectory>src/main/js</workingDirectory>
        </configuration>
        <executions>
            <execution>
                <id>install node and npm</id>
                <goals>
                    <goal>install-node-and-npm</goal>
                </goals>
                <configuration>
                    <nodeVersion>${node.version}</nodeVersion>
                    <npmVersion>${npm.version}</npmVersion>
                </configuration>
            </execution>
            <execution>
                <id>npm install</id>
                <goals>
                    <goal>npm</goal>
                </goals>
            </execution>
            <execution>
                <id>npm build</id>
                <goals>
                    <goal>npm</goal>
                </goals>
                <phase>prepare-package</phase>
                <configuration>
                    <arguments>run build</arguments>
                </configuration>
            </execution>
        </executions>
    </plugin>

Le répertoire static de Spring-Boot

Spring-Boot fourni un répertoire spécifique pour toutes les ressources frontend (HTML, JS, CSS, etc.) : src/main/ressources/static. Les fichiers placés dans ce répertoire seront directement copiés dans le JAR final, dans le répertoire static également, et exposés. Le contenu du JAR sera de la forme :

  • application.properties
  • fichiers classes compilés
  • static

Le but est donc de copier dans ce répertoire static, notre appli front transpilée lors de la première étape. Ainsi, elle sera directement exposée via Spring-Boot sans aucune configuration particulière!

Copie des fichiers avec plugin copy de Maven

Il faut donc copier l’application SPA transpilée depuis le répertoire src/main/js/build vers le répertoire target/static de spring-Boot, afin de générer le JAR qui contiendra toutes les ressources frontend requises. Pour cela, on utilise le plugion Maven copy-ressources:

	<plugin>
        <artifactId>maven-resources-plugin</artifactId>
        <version>3.0.1</version>
        <executions>
            <execution>
                <id>position-react-build</id>
                <goals>
                    <goal>copy-resources</goal>
                </goals>
                <phase>prepare-package</phase>
                <configuration>
                    <outputDirectory>${project.build.outputDirectory}/static</outputDirectory>
                    <resources>
                        <resource>
                            <directory>${frontend-src-dir}/build</directory>
                            <filtering>false</filtering>
                        </resource>
                    </resources>
                </configuration>
            </execution>
        </executions>
    </plugin>

Lancer votre JAR via un java -jar votre-fichier-jar, et vous devrez voir votre application React! En plus, fini les problèmes CORS car tout est dans un seul serveur! Le tout est accessible dans mon github ici https://github.com/smaestri/sharebook


Ecrit par Sylvain Maestri qui vit et travaille à Paris, et qui aime construire des applications WEB avec les langages Java & Javascript, et appliquer les bons patterns de programmation SOLID, TDD, BDD et DDD. Me suivre sur Twitter

Vous voulez apprendre ou améliorer vos compétences avec Spring (Core, MVC, Data, Security) et React?
Suivez ma formation sur Udemy où nous apprendrons les fondamentaux et développerons ensemble une application!