How this React SpringBoot project works

To start use./gradlew bootRun

Be careful with yarn build because it will remove all files in spring boot src/main/resources/static/ directory Can setup different path(in gradle.build and Config.java) if you have some extra files you need to keep.

Implementation:

1. Create Spring gradle spring-boot-starter-data-rest project

   App.java

    package ru.varren;
   import org.springframework.boot.SpringApplication;
   import org.springframework.boot.autoconfigure.SpringBootApplication;
   @SpringBootApplication
   public class App {
   public static void main(String[] args) {
   SpringApplication.run(App.class, args);
   }
   }
   

   application.properties

    spring.data.rest.base-path=/api
   

2. Create react project

   npm install -g create-react-app
   create-react-app frontend
   cd frontend/
   

   1. Comment out registerServiceWorker(); in src/index.js for now.

3. Setup spring configuration

   @Configuration
   public class Config implements WebMvcConfigurer {
   @Override
   public void addResourceHandlers(ResourceHandlerRegistry registry) {
   ResourceResolver resolver = new ReactResourceResolver();
   registry.addResourceHandler("/**")
   .resourceChain(true)
   .addResolver(resolver);
   }
   public class ReactResourceResolver implements ResourceResolver {
   // this is the same directory you are using // in package.json "build-spring-linux",
   // example REACT_DIR/index.html
   private static final String REACT_DIR = "/static/";
   // this is directory inside REACT_DIR for react static files
   // example REACT_DIR/REACT_STATIC_DIR/js/
   // example REACT_DIR/REACT_STATIC_DIR/css/
   private static final String REACT_STATIC_DIR = "static";
   private Resource index = new ClassPathResource(REACT_DIR + "index.html");
   private List<String> rootStaticFiles = Arrays.asList("favicon.io",
   "asset-manifest.json", "manifest.json", "service-worker.js");
   @Override
   public Resource resolveResource(HttpServletRequest request, String requestPath,
   List<? extends Resource> locations, ResourceResolverChain chain) {
   return resolve(requestPath, locations);
   }
   @Override
   public String resolveUrlPath(String resourcePath, List<? extends Resource> locations, ResourceResolverChain chain) {
   Resource resolvedResource = resolve(resourcePath, locations);
   if (resolvedResource == null) {
   return null;
   }
   try {
   return resolvedResource.getURL().toString();
   } catch (IOException e) {
   return resolvedResource.getFilename();
   }
   }
   private Resource resolve(String requestPath, List<? extends Resource> locations) {
   System.out.println(requestPath);
   if (requestPath == null) return null;
   if (rootStaticFiles.contains(requestPath)
   || requestPath.startsWith(REACT_STATIC_DIR)) {
   return new ClassPathResource(REACT_DIR + requestPath);
   } else
   return index;
   }
   }
   }
   

4. Connecting gradle:bootRun with yarn build-spring-linux

   Add classpath "com.moowork.gradle:gradle-node-plugin:1.2.0" gradle plugin

   node {
   // If true, it will download node using above parameters.
   // If false, it will try to use globally installed node.
   download = true
   // Set the work directory where node_modules should be located
   nodeModulesDir = file("${project.projectDir}/frontend")
   }
   // build react with webpack
   task webpack(type: YarnTask, dependsOn: yarn) {
   inputs.files(fileTree("${project.projectDir}/frontend/"))
   outputs.dir("${project.projectDir}/src/main/resources/static/")
   args = ['build']
   }
   // copy react build to spring resourses
   task moveJStoSpring(type: Copy) {
   from "${project.projectDir}/frontend/build/"
   into "${project.projectDir}/src/main/resources/static/"
   }
   moveJStoSpring.dependsOn 'webpack'
   processResources.dependsOn 'moveJStoSpring'
   

   Can comment out processResources.dependsOn 'webpack' or implement some debug/production logic if you don't want gradle to recompile javascipt on each spring boot start