Spring Boot 和 React 无法加载 index.html

Question

I'm trying to create a simple web application using create-react-app and Spring Boot, but spring can't find index.html in resources.

React's build folder is copied to target by maven-resources-plugin :

<plugin>
    <artifactId>maven-resources-plugin</artifactId>
           ...
            <phase>package</phase>
                <goals>
                    <goal>copy-resources</goal>
                </goals>
                ...
                <outputDirectory>${basedir}/target/classes</outputDirectory>
                    <resources>
                        <resource>
                            <directory>src/main/app/build</directory>
                            <filtering>true</filtering>
                        </resource>
                    </resources>
                ...     
</plugin>

This is my project structure:

Controller:

@Controller
public class BasicController {
   @RequestMapping(value = "/", method = RequestMethod.GET)
   public String index() {
      return "index";
   }
}

Get request to localhost:8080 returns 404 . Could you please point me where am i mistaken.

UPDATE:

Managed to make it working by changing React's build output directory in maven plugin to ${basedir}/src/main/resources/META-INF/resources and return "index" to return index.html .

Answer 1

Well, it's maybe not the precise answer your question, but I would try example from the docs .

Spring Boot will automatically add static web resources located within any of the following directories:

/META-INF/resources/

/resources/

/static/

/public/

In the case of the Consuming a RESTful Web Service with jQuery guide, we included index.html and hello.js files in the /public/ folder. This means that not only does Spring Boot offer a simple approach to building Java or Groovy apps, you can also use it to easily deploy client-side JavaScript code and test it within a real web server environment!

Just copy the content of CRA build directory to Spring Boot public directory (make sure index.html is at the /public/index.html ).

If this works then try to automate the process.

Answer 2

I had the same issue. Spring boot backend with reactjs frontend. I solved it by adding a view resolver (thymeleaf) and copying the generated react build resources to outputDirectory/templates directory like below

<plugin>
                <artifactId>maven-antrun-plugin</artifactId>
                <executions>
                    <execution>
                        <phase>generate-resources</phase>
                        <configuration>
                            <target>
                                <copy todir="${project.build.outputDirectory}/templates">
                                    <fileset
                                        dir="${project.basedir}/src/main/javascript/build" />
                                </copy>
                            </target>
                        </configuration>
                        <goals>
                            <goal>run</goal>
                        </goals>
                    </execution>
                </executions>
            </plugin>