Add ReactController for serving React app and static assets (#114)

* Add ReactController for serving React app and static assets

Introduce a dedicated `ReactController` to serve the React app, handle client-side routing, and deliver static resources like favicon and assets. Remove redundant logic from `StaticResource` and adjust `application.yml` by removing the unused webapp mapping.

* Replace StaticResourceTest with ReactControllerTest

Migrated tests from `StaticResourceTest` to a new `ReactControllerTest` to better align with updated resource handling logic. The new tests cover scenarios for serving the React index.html file and handling missing resources.

Author: gjong

fintrack-api/src/main/java/com/jongsoft/finance/rest/ReactController.java

@@ -0,0 +1,93 @@
+package com.jongsoft.finance.rest;
+
+import io.micronaut.core.io.ResourceResolver;
+import io.micronaut.http.HttpResponse;
+import io.micronaut.http.MediaType;
+import io.micronaut.http.annotation.Controller;
+import io.micronaut.http.annotation.Get;
+import io.micronaut.http.server.types.files.StreamedFile;
+import io.micronaut.security.annotation.Secured;
+import io.micronaut.security.rules.SecurityRule;
+
+import java.io.InputStream;
+import java.nio.charset.StandardCharsets;
+import java.util.Optional;
+
+@Controller("/ui")
+@Secured(SecurityRule.IS_ANONYMOUS)
+public class ReactController {
+
+    private final ResourceResolver resourceResolver;
+
+    public ReactController(ResourceResolver resourceResolver) {
+        this.resourceResolver = resourceResolver;
+    }
+
+    /**
+     * Serves the React app's index.html file.
+     *
+     * @return The index.html file
+     */
+    @Get(produces = MediaType.TEXT_HTML)
+    public HttpResponse<?> index() {
+        Optional<InputStream> indexHtml = resourceResolver.getResourceAsStream("classpath:public/index.html");
+        if (indexHtml.isPresent()) {
+            return HttpResponse.ok(new StreamedFile(indexHtml.get(), MediaType.TEXT_HTML_TYPE));
+        } else {
+            return HttpResponse.notFound("React app not found");
+        }
+    }
+
+    /**
+     * Catch-all route to serve the React app for any path under /react/.
+     * This allows the React Router to handle client-side routing properly.
+     *
+     * @return The index.html file
+     */
+    @Get(uri = "/{path:.*}", produces = MediaType.TEXT_HTML)
+    public HttpResponse<?>catchAll(String path) {
+        return index();
+    }
+
+    @Get(uri = "/favicon.ico")
+    public HttpResponse<?> favicon() {
+        return loadResource("favicon.ico");
+    }
+
+    @Get(uri = "/manifest.json")
+    public HttpResponse<?> manifest() {
+        return loadResource("manifest.json");
+    }
+
+    @Get(uri = "/logo192.png")
+    public HttpResponse<?> logo() {
+        return loadResource("logo192.png");
+    }
+
+    @Get(uri = "/logo512.png")
+    public HttpResponse<?> logo_512() {
+        return loadResource("logo512.png");
+    }
+
+    @Get(uri = "/assets/{path:.*}")
+    public HttpResponse<?> getAsset(String path) {
+        return loadResource("assets/" + path);
+    }
+
+    @Get(uri = "/images/{path:.*}")
+    public HttpResponse<?> getImage(String path) {
+        return loadResource("images/" + path);
+    }
+
+    private HttpResponse<?> loadResource(String path) {
+        var assetFile = resourceResolver.getResource("classpath:public/" + path);
+        if (assetFile.isPresent()) {
+            var streamedFile = new StreamedFile(assetFile.get());
+            return HttpResponse.ok(streamedFile.getInputStream())
+                    .contentType(streamedFile.getMediaType())
+                    .characterEncoding(StandardCharsets.UTF_8);
+        } else {
+            return HttpResponse.notFound("React app not found");
+        }
+    }
+}

fintrack-api/src/main/java/com/jongsoft/finance/rest/StaticResource.java

@@ -1,13 +1,10 @@
 package com.jongsoft.finance.rest;
 
-import com.jongsoft.finance.core.exception.StatusException;
 import io.micronaut.core.io.ResourceResolver;
 import io.micronaut.http.HttpResponse;
 import io.micronaut.http.MediaType;
 import io.micronaut.http.annotation.Controller;
 import io.micronaut.http.annotation.Get;
-import io.micronaut.http.annotation.PathVariable;
-import io.micronaut.http.annotation.Produces;
 import io.micronaut.http.server.types.files.StreamedFile;
 import io.micronaut.security.annotation.Secured;
 import io.micronaut.security.rules.SecurityRule;
@@ -16,18 +13,18 @@
 import org.slf4j.Logger;
 import org.slf4j.LoggerFactory;
 
-import java.io.IOException;
+import java.io.InputStream;
 import java.net.URI;
 import java.net.URISyntaxException;
-import java.net.URL;
+import java.util.Optional;
 
 @Controller
 @Secured(SecurityRule.IS_ANONYMOUS)
 public class StaticResource {
     private final Logger log = LoggerFactory.getLogger(StaticResource.class);
 
     @Inject
-    ResourceResolver res;
+    ResourceResolver resourceResolver;
 
     @Get
     @Operation(hidden = true)
@@ -38,39 +35,11 @@ public HttpResponse<?> index() throws URISyntaxException {
     @Get("/favicon.ico")
     @Operation(hidden = true)
     public HttpResponse<?> favicon() {
-        return resource("assets/favicon.ico");
-    }
-
-    @Operation(hidden = true)
-    @Get("/ui/{path:([^\\.]+)$}")
-    @Produces(MediaType.TEXT_HTML)
-    public HttpResponse<?> refresh(@PathVariable String path) {
-        return resource("index.html");
-    }
-
-    @Operation(hidden = true)
-    @Get("/ui/{path:(.+)\\.[\\w]+$}")
-    public HttpResponse<?> resource(@PathVariable String path) {
-        log.info("Loading static resource: {}", path);
-
-        var resource = res.getResource("classpath:public/" + path);
-        if (resource.isEmpty()) {
-            return HttpResponse.notFound("Resource at path " + path  + " is not found on the server");
-        }
-
-        return loadFromUri(resource.get());
-    }
-
-    private HttpResponse<?> loadFromUri(URL uri) {
-        var streamedFile = new StreamedFile(uri);
-
-        try {
-            return HttpResponse.ok(
-                    streamedFile.getInputStream().readAllBytes())
-                    .contentType(streamedFile.getMediaType())
-                    .characterEncoding("utf-8");
-        } catch (IOException e) {
-            throw StatusException.internalError(e.getMessage());
+        Optional<InputStream> indexHtml = resourceResolver.getResourceAsStream("classpath:public/assets/favicon.ico");
+        if (indexHtml.isPresent()) {
+            return HttpResponse.ok(new StreamedFile(indexHtml.get(), MediaType.IMAGE_X_ICON_TYPE));
+        } else {
+            return HttpResponse.notFound("Favicon not found");
         }
     }
 

fintrack-api/src/main/resources/application.yml

@@ -32,9 +32,7 @@ micronaut:
       swagger:
         paths: classpath:META-INF/swagger
         mapping: /spec/**
-      webapp:
-        paths: classpath:/public
-        mapping: /ui/**
+
   server:
     cors:
       enabled: true

fintrack-api/src/test/java/com/jongsoft/finance/rest/ReactControllerTest.java

@@ -0,0 +1,48 @@
+package com.jongsoft.finance.rest;
+
+import io.micronaut.core.io.ResourceResolver;
+import io.micronaut.http.HttpResponse;
+import io.micronaut.http.MediaType;
+import io.micronaut.http.server.types.files.StreamedFile;
+import org.junit.jupiter.api.Test;
+
+import java.io.ByteArrayInputStream;
+import java.io.InputStream;
+import java.util.Optional;
+
+import static org.junit.jupiter.api.Assertions.assertEquals;
+import static org.mockito.Mockito.*;
+
+class ReactControllerTest {
+
+    @Test
+    void testIndexReturnsStreamedFileWhenResourceExists() {
+        // Arrange
+        ResourceResolver resourceResolver = mock(ResourceResolver.class);
+        ReactController reactController = new ReactController(resourceResolver);
+        InputStream mockStream = new ByteArrayInputStream("<html>Mock index.html</html>".getBytes());
+        when(resourceResolver.getResourceAsStream("classpath:public/index.html")).thenReturn(Optional.of(mockStream));
+
+        // Act
+        HttpResponse<?> response = reactController.index();
+
+        // Assert
+        assertEquals(HttpResponse.ok().body(new StreamedFile(mockStream, MediaType.TEXT_HTML_TYPE)).getStatus(), response.getStatus());
+        verify(resourceResolver, times(1)).getResourceAsStream("classpath:public/index.html");
+    }
+
+    @Test
+    void testIndexReturnsNotFoundWhenResourceDoesNotExist() {
+        // Arrange
+        ResourceResolver resourceResolver = mock(ResourceResolver.class);
+        ReactController reactController = new ReactController(resourceResolver);
+        when(resourceResolver.getResourceAsStream("classpath:public/index.html")).thenReturn(Optional.empty());
+
+        // Act
+        HttpResponse<?> response = reactController.index();
+
+        // Assert
+        assertEquals(HttpResponse.notFound("React app not found").getStatus(), response.getStatus());
+        verify(resourceResolver, times(1)).getResourceAsStream("classpath:public/index.html");
+    }
+}

fintrack-api/src/test/java/com/jongsoft/finance/rest/StaticResourceTest.java

@@ -4,17 +4,14 @@
 import io.micronaut.core.io.scan.DefaultClassPathResourceLoader;
 import org.junit.jupiter.api.BeforeEach;
 import org.junit.jupiter.api.Test;
-import org.junit.jupiter.api.extension.ExtendWith;
 import org.mockito.InjectMocks;
 import org.mockito.MockitoAnnotations;
 import org.mockito.Spy;
 
-import java.io.IOException;
 import java.net.URISyntaxException;
 import java.util.List;
 
 import static org.assertj.core.api.Assertions.assertThat;
-import static org.junit.jupiter.api.Assertions.*;
 
 class StaticResourceTest {
 
@@ -37,24 +34,4 @@ void index() throws URISyntaxException {
         assertThat(response.getHeaders().get("Location")).isEqualTo("/ui/dashboard");
     }
 
-    @Test
-    void refresh() {
-        var response = subject.refresh("");
-
-        assertThat(new String((byte[]) response.body())).isEqualTo("It works!!!!");
-    }
-
-    @Test
-    void resource() {
-        var response = subject.resource("css/style.css");
-
-        assertThat(new String((byte[]) response.body())).isEqualTo("Style works");
-    }
-
-    @Test
-    void resource_notFound() {
-        var response = subject.resource("css/style-2.css");
-
-        assertThat(response.getStatus().getCode()).isEqualTo(404);
-    }
-}
+}