How to make REST api call from React app bundled into Spring boot using frontend-maven-plugin? - reactjs

Question

I create a spring boot project and added a react app (created using create react-app) into it. I want to bundle the REST Api and the frontend in single build (fat jar).
Created spring boot web project, at the root added the frontend folder containing the react code. Here is the plugins inside pom.xml
<?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>
<parent>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-parent</artifactId>
<version>2.5.2</version>
<relativePath/>
<!-- lookup parent from repository -->
</parent>
<groupId>com.example</groupId>
<artifactId>ppa-test</artifactId>
<version>0.0.1-SNAPSHOT</version>
<name>ppa-test</name>
<description>Demo project for Spring Boot</description>
<properties>
<java.version>11</java.version>
<frontend-src-dir>${project.basedir}/src/main/frontend</frontend-src-dir>
<node.version>v15.7.0</node.version>
<npm.version>7.14.0</npm.version>
<frontend-maven-plugin.version>1.7.6</frontend-maven-plugin.version>
</properties>
<dependencies>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-web</artifactId>
</dependency>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-test</artifactId>
<scope>test</scope>
</dependency>
</dependencies>
<build>
<plugins>
<plugin>
<groupId>com.github.eirslett</groupId>
<artifactId>frontend-maven-plugin</artifactId>
<version>${frontend-maven-plugin.version}</version>
<configuration>
<nodeVersion>${node.version}</nodeVersion>
<yarnVersion>${npm.version}</yarnVersion>
<workingDirectory>frontend</workingDirectory>
<installDirectory>${project.build.directory}</installDirectory>
</configuration>
<executions>
<execution>
<id>install-frontend-tools</id>
<goals>
<goal>install-node-and-npm</goal>
</goals>
</execution>
<execution>
<id>npm-install</id>
<goals>
<goal>npm</goal>
</goals>
<configuration>
<arguments>install</arguments>
</configuration>
</execution>
<execution>
<id>build-frontend</id>
<goals>
<goal>npm</goal>
</goals>
<phase>compile</phase>
<configuration>
<arguments>run-script build</arguments>
</configuration>
</execution>
</executions>
</plugin>
<plugin>
<artifactId>maven-resources-plugin</artifactId>
<executions>
<execution>
<id>copy-resources</id>
<phase>process-classes</phase>
<goals>
<goal>copy-resources</goal>
</goals>
<configuration>
<outputDirectory>${basedir}/target/classes/static</outputDirectory>
<resources>
<resource>
<directory>frontend/build</directory>
</resource>
</resources>
</configuration>
</execution>
</executions>
</plugin>
</plugins>
</build>
</project>
Here is the github repo link
The project is running on 8087 and http://localhost:80807 does render the App.js. But inside that I made an api call to http://localhost:8087/api/audits which is returning 404 error. I though the Rest controller can be used like this.
What am I doing wrong here?
#EnableWebMvc does expose the Rest endpoint but then the App.js content is not served by the build.

Answer 1

You were right, im sorry. I just cloned your repo and tried. It does just work. Response Code 200 with empty array.
Btw: you do not need the cors configuration. It is only needed if the frontend would be served by another webserver. But when deploying it alongside your spring in a fat-jar - its not necessary since it is not doing cors calls since its the same host.
I just clicked in to the repo and saw your front-end code. The path u
are querying within axios is just
axios.get("/audits")
but has to be
axios.get("/api/audits")
since the controller is annotated with a corresponding
RequestMapping.
#RequestMapping("/api")