Spring Boot and React can't load 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.

I kept my index.html in the static dir but just tacked on ".html" to index when integrating my react app like so: @RequestMapping(value = "/") public String index() { return "index.html"; }. I am still not sure why "index" alone was not enough. Most examples I have seen just say "index". Perhaps it's because I don't have webMvc set? I have a pure restful back end. — logixplayer
– logixplayer, Commented Jan 27, 2019 at 7:16

Community · Accepted Answer · 2020-06-20 09:12:55Z

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.

edited Jun 20, 2020 at 9:12

CommunityBot

11 silver badge

answered Oct 5, 2017 at 16:45

Tomasz Mularczyk

36.4k19 gold badges118 silver badges176 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

anon ymous · Accepted Answer · 2019-05-08 14:56:51Z

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>

Collectives™ on Stack Overflow

Spring Boot and React can't load index.html

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related