add static build support

alfio-event · May 5, 2024 · 8c9feaf · 8c9feaf
1 parent 523144f
commit 8c9feaf
Show file tree

Hide file tree

Showing 7 changed files with 54 additions and 8 deletions.
diff --git a/build.gradle b/build.gradle
@@ -372,8 +372,19 @@ tasks.register('frontendBuild', NpmTask) {
     outputs.dir("${project.projectDir}/frontend/dist")
 }
 
+tasks.register('frontendAdminNpmInstall', NpmTask) {
+    args = ['--prefix', "${project.projectDir}/frontend/admin", 'ci']
+}
+
+tasks.register('frontendAdminBuild', NpmTask) {
+    dependsOn frontendAdminNpmInstall
+    args = ['--prefix', "${project.projectDir}/frontend/admin", 'run', 'build']
+    outputs.dir("${project.projectDir}/frontend/admin/dist")
+}
+
 clean.doFirst {
     delete "${project.projectDir}/frontend/dist"
+    delete "${project.projectDir}/frontend/admin/dist"
 }
 
 tasks.register('publicFrontendIndexTransform', FrontendIndexTransformTask) {
@@ -429,6 +440,9 @@ bootJar {
     from(tasks.named("frontendBuild")) {
         into 'BOOT-INF/classes/resources/'
     }
+    from(tasks.named("frontendAdminBuild")) {
+        into 'resources/alfio-admin-frontend/'
+    }
     from(tasks.named("publicFrontendIndexTransform")) {
         rename 'alfio-public-frontend-index.html', 'BOOT-INF/classes/alfio-public-frontend-index.html'
     }

diff --git a/frontend/admin/README.md b/frontend/admin/README.md
@@ -17,8 +17,6 @@ Then you can launch alf.io normally and go to localhost:8080/admin/ -> all the c
 ## todo
 
  - find a decent way to inline the icons as data uri
- - static build integration
-
 
  ## vscode plugins
 

diff --git a/frontend/admin/package.json b/frontend/admin/package.json
@@ -5,7 +5,7 @@
   "type": "module",
   "scripts": {
     "dev": "vite",
-    "build": "tsc && vite build",
+    "build": "tsc && vite build --mode production",
     "preview": "vite preview"
   },
   "dependencies": {

diff --git a/frontend/admin/src/main.ts b/frontend/admin/src/main.ts
@@ -12,8 +12,13 @@ import '@shoelace-style/shoelace/dist/components/button/button.js';
 import '@shoelace-style/shoelace/dist/components/icon/icon.js';
 import '@shoelace-style/shoelace/dist/components/alert/alert';
 
-// see https://vitejs.dev/guide/env-and-mode
-const baseUrl = import.meta.env.MODE ? 'http://localhost:5173/' : '';
-setBasePath(`${baseUrl}shoelace/`);
 
+
+// see https://vitejs.dev/guide/env-and-mode
+if (import.meta.env.MODE === 'development') {
+    const baseUrl = import.meta.env.MODE ? 'http://localhost:5173/' : '';
+    setBasePath(`${baseUrl}shoelace/`);
+} else if (import.meta.env.MODE === 'production') {
+    setBasePath(`${document.getElementById('lit-js')?.getAttribute('src')?.replace(/assets.*/g, '')}shoelace/`);
+}
 export { NewElement } from './new-element';
diff --git a/frontend/admin/src/new-element.ts b/frontend/admin/src/new-element.ts
@@ -8,7 +8,7 @@ export class NewElement extends LitElement {
         return html`<h1>Hello world</h1>
         <sl-card>
           <sl-rating></sl-rating>
-          <sl-button>plop</sl-button>
+          <sl-button>plop2</sl-button>
           <sl-alert open>
             <sl-icon slot="icon" name="info-circle"></sl-icon>
             This is a standard alert. You can customize its content and even the icon.

diff --git a/src/main/java/alfio/controller/AdminIndexController.java b/src/main/java/alfio/controller/AdminIndexController.java
@@ -21,6 +21,8 @@
 import alfio.manager.system.ConfigurationManager;
 import alfio.model.user.Role;
 import alfio.util.TemplateManager;
+import com.fasterxml.jackson.core.type.TypeReference;
+import com.fasterxml.jackson.databind.ObjectMapper;
 import org.springframework.beans.factory.annotation.Value;
 import org.springframework.core.env.Environment;
 import org.springframework.core.io.ClassPathResource;
@@ -35,26 +37,41 @@
 import java.io.IOException;
 import java.security.Principal;
 import java.util.Collection;
+import java.util.List;
+import java.util.Map;
 
 import static alfio.controller.Constants.*;
 import static alfio.model.system.ConfigurationKeys.SHOW_PROJECT_BANNER;
 
 @Controller
 public class AdminIndexController {
 
+    public record ManifestEntry(List<String> css, String file) {
+    }
+
     private final ConfigurationManager configurationManager;
     private final Environment environment;
     private final CSPConfigurer cspConfigurer;
     private final TemplateManager templateManager;
+    private final ManifestEntry manifestEntry;
 
     public AdminIndexController(ConfigurationManager configurationManager,
                                 Environment environment,
                                 CSPConfigurer cspConfigurer,
-                                TemplateManager templateManager) {
+                                TemplateManager templateManager,
+                                ObjectMapper objectMapper) throws IOException {
         this.configurationManager = configurationManager;
         this.environment = environment;
         this.cspConfigurer = cspConfigurer;
         this.templateManager = templateManager;
+        var cpr = new ClassPathResource("/resources/alfio-admin-frontend/.vite/manifest.json");
+        if (cpr.exists()) {
+            try (var descriptor = cpr.getInputStream()) {
+                this.manifestEntry = objectMapper.readValue(descriptor, new TypeReference<Map<String, ManifestEntry>>() {}).get("src/main.ts");
+            }
+        } else {
+            manifestEntry = null;
+        }
     }
 
     @GetMapping("/admin")
@@ -83,6 +100,12 @@ public void adminHome(Model model, @Value("${alfio.version}") String version, Ht
         model.addAttribute("displayProjectBanner", isAdmin && configurationManager.getForSystem(SHOW_PROJECT_BANNER).getValueAsBooleanOrDefault());
         //
 
+        model.addAttribute("litAdminStatic", manifestEntry != null);
+        if (manifestEntry != null) {
+            model.addAttribute("lit-css", manifestEntry.css);
+            model.addAttribute("lit-js", manifestEntry.file);
+        }
+
         try (var os = response.getOutputStream()) {
             response.setContentType(TEXT_HTML_CHARSET_UTF_8);
             response.setCharacterEncoding(UTF_8);

diff --git a/src/main/resources/alfio/web-templates/admin-index.ms b/src/main/resources/alfio/web-templates/admin-index.ms
@@ -11,6 +11,12 @@
     <script type="module" src="http://localhost:5173/@vite/client" nonce="{{nonce}}"></script>
     <script type="module" src="http://localhost:5173/src/main.ts" nonce="{{nonce}}"></script>
     {{/devModeEnabled}}
+    {{#litAdminStatic}}
+        <script type="module" src="{{contextPath}}/resources/alfio-admin-frontend/{{lit-js}}" id="lit-js" nonce="{{nonce}}"></script>
+        {{#lit-css}}
+        <link rel="stylesheet" href="{{contextPath}}/resources/alfio-admin-frontend/{{.}}" />
+        {{/lit-css}}
+    {{/litAdminStatic}}
 
     <link rel="stylesheet" href="{{contextPath}}/resources/css/source-sans-pro.css" />
     <link rel="stylesheet" href="{{contextPath}}/resources/css/bootstrap-admin.min.css" />