Spring Flux and ReactJs Integration not working

Question

I am developing a micro service application.Micro Services are deployed in Azure Cloud.I am using Eureka as service registry and Spring Cloud Gateway as api gateway.Now Both my react code and Spring Boot code is packeged inside single jar.

Now I am using Thymeleaf for redirecting to react index.html file for login screen

  thymeleaf:
   cache: false
   enabled: true
   prefix: classpath:/static/
   suffix: .html

WebFlux Security Config is as follows:

@Bean
public SecurityWebFilterChain springSecurityFilterChain(ServerHttpSecurity http, MyJwtAuthConverter myJwtAuthConverter) {
    MyAuthManager myJwtAuthManager = new MyJwtAuthManager(authService, myJwtTokenUtility);
    myJwtAuthManager.setPasswordEncoder(bCryptPasswordEncoder());
    AuthenticationWebFilter authenticationWebFilter = new AuthenticationWebFilter(myJwtAuthManager);
    authenticationWebFilter.setServerAuthenticationConverter(myJwtAuthConverter);
    return http.csrf().disable()
            .authorizeExchange()
            .pathMatchers("/myContext/myloginUrl",
                    "/myContext/static/**").permitAll()
            .anyExchange().authenticated()
            .and()
            .formLogin().loginPage("myloginUrl").authenticationSuccessHandler(new RedirectServerAuthenticationSuccessHandler("/loginSuccess"))
            .authenticationFailureHandler((exchange, exception) -> Mono.error(exception))
            .and().securityContextRepository(NoOpServerSecurityContextRepository.getInstance())
            .addFilterAt(authenticationWebFilter, SecurityWebFiltersOrder.AUTHENTICATION).
            logout(logout-> logout.logoutSuccessHandler(logoutSuccessHandler("/mylogout")))
            .build();
}

My controller file declaration as below

@GetMapping("/myloginUrl")
public ModelAndView loginPage(){
    return new ModelAndView("index");
}

Now url change happening fine,whenever I am hitting any protected url it is redirecting to login page url as below

http://localhost:8765/myContext/user-login

But actual login page which is developed in react is not getting rendered.React Router config as below

   <BrowserRouter basename="/myContext">
        <Routes>
            <Route path="/" element={<Login />} />
            <Route path="/myloginUrl" element={<Login />} />
            <Route path="/user" element={<User/>} />
        </Routes>
    </BrowserRouter>

In my build.gradle I have configured following thing

processResources {
dependsOn buildFrontend
from("${projectDir}/frontend/build/") {
    into 'static'
}

}

The error I am getting is as below:

{"view":null,"model":{},"status":null,"empty":false,"viewName":"index","modelMap":{},"reference":true}

Can anyone help why thymeleaf not able to redirect to react index.html???

Answer 1

For Spring WebFlux we need to configure following router function

@Bean
public RouterFunction<ServerResponse> customRouter(@Value("classpath:/static/index.html") Resource html) {
    return RouterFunctions.route(
            GET("/*"),
            request -> ServerResponse.ok().contentType(MediaType.TEXT_HTML).bodyValue(html)
    );
}