Link spring boot with react

Question

I followed this tutorial for creating a web app using react and spring boot.

I followed the exact same steps, but in my react app I introduced webpack. The react app is on and running.

The pom.xml file looks like this:

<?xml version="1.0" encoding="UTF-8"?>

http://maven.apache.org/xsd/maven-4.0.0.xsd"> 4.0.0

<groupId>com.example</groupId>
<artifactId>ema</artifactId>
<version>0.0.1-SNAPSHOT</version>
<packaging>jar</packaging>

<name>ema</name>
<description>Demo project for Spring Boot</description>

<parent>
    <groupId>org.springframework.boot</groupId>
    <artifactId>spring-boot-starter-parent</artifactId>
    <version>1.5.3.RELEASE</version>
    <relativePath/> <!-- lookup parent from repository -->
</parent>

<properties>
    <project.build.sourceEncoding>UTF-8</project.build.sourceEncoding>
    <project.reporting.outputEncoding>UTF-8</project.reporting.outputEncoding>
    <java.version>1.8</java.version>
</properties>

<dependencies>
    <dependency>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter</artifactId>
    </dependency>

    <dependency>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-test</artifactId>
        <scope>test</scope>
    </dependency>
</dependencies>

<build>
<plugins>
    <plugin>
    <groupId>org.springframework.boot</groupId>
    <artifactId>spring-boot-maven-plugin</artifactId>
    </plugin>


    <plugin>
    <groupId>com.github.eirslett</groupId>
    <artifactId>frontend-maven-plugin</artifactId>
    <version>1.2</version>
    </plugin>

    <plugin>
    <artifactId>maven-resources-plugin</artifactId>
    <version>3.0.2</version>
    <executions>
    <execution>
    <id>Copy frontend production build to resources</id>
    <phase>package</phase>
    <goals>
    <goal>copy-resources</goal>
    </goals>
    <configuration>
    <outputDirectory>${basedir}/target/classes</outputDirectory>
    <resources>
    <resource>
    <directory>src/main/app/build/</directory>
    <filtering>true</filtering>
    </resource>
    </resources>
    </configuration>
    </execution>
    </executions>
    </plugin>


    </plugins>
</build>

I got to the last steps of the tutorial:

mvn clean package
java -jar target/cra-demo-0.0.1-SNAPSHOT.jar

But I see that my spring server is closig:

 :: Spring Boot ::        (v1.5.3.RELEASE)

2017-04-27 15:01:33.740  INFO 28295 --- [           main] com.example.EmaApplication               : Starting EmaApplication v0.0.1-SNAPSHOT on robucslvm03 with PID 28295 (/home/gecobici/EMA/target/ema-0.0.1-SNAPSHOT.jar started by gecobici in /home/gecobici/EMA)
2017-04-27 15:01:33.748  INFO 28295 --- [           main] com.example.EmaApplication               : No active profile set, falling back to default profiles: default
2017-04-27 15:01:33.860  INFO 28295 --- [           main] s.c.a.AnnotationConfigApplicationContext : Refreshing org.springframework.context.annotation.AnnotationConfigApplicationContext@255316f2: startup date [Thu Apr 27 15:01:33 EEST 2017]; root of context hierarchy
2017-04-27 15:01:34.936  INFO 28295 --- [           main] o.s.j.e.a.AnnotationMBeanExporter        : Registering beans for JMX exposure on startup
2017-04-27 15:01:34.958  INFO 28295 --- [           main] com.example.EmaApplication               : Started EmaApplication in 2.06 seconds (JVM running for 2.877)
2017-04-27 15:01:34.958  INFO 28295 --- [       Thread-2] s.c.a.AnnotationConfigApplicationContext : Closing org.springframework.context.annotation.AnnotationConfigApplicationContext@255316f2: startup date [Thu Apr 27 15:01:33 EEST 2017]; root of context hierarchy
2017-04-27 15:01:34.959  INFO 28295 --- [       Thread-2] o.s.j.e.a.AnnotationMBeanExporter        : Unregistering JMX-exposed beans on shutdown

I am new to spring and react, I don't know how to get the spring server up and running and interact with my react app.

Edit: In the pom.xml i have:

<directory>src/main/app/build/</directory>

I create production build with webpack -p but i see no build folder. How can I do to generate production build in a build folder?

Answer 1

You introduced webpack witch is not bad at all, what you can do to simplify the usage of your React app with spring, is to setup Webpack Proxy to intercept all HTTP request in a specific port, this is how I do it:

'webpack-dev-server': {
      options: {
        webpack: webpackConfig,
        inline: true,
      },
      start: {
        host: '0.0.0.0',
        port: '<%= config.webpackDevServerPort %>',
        contentBase: '<%= config.dist %>',
        webpack: {
          devtool: 'inline-source-map',
          debug: true,
        },
        proxy: {
          '/myapp': {
            target: 'http://localhost:' + (grunt.option('proxy-port') || config.connectPort),
            secure: false,
          },
        },
      },
    },

one last thing in your Spring app you have to allow the following :

  /**
   * Register WebSocket publisher
   *
   * @param registry where the handler will be registered
   */
  @Override
  public void registerWebSocketHandlers(WebSocketHandlerRegistry registry) {
    registry.addHandler(publisher, webSocketPath).setAllowedOrigins("*");
  }

if you don't setAllowedOrigins("*"); rest calls from outside spring server will not be intercepted, this is just for dev and have to be disabled when the app goes to production.