Maven execution plugins for Frontend React Assets (#330)

Aiven-Open · Dec 15, 2022 · df40264 · df40264
1 parent 14a8f9f
commit df40264
Show file tree

Hide file tree

Showing 6 changed files with 104 additions and 2 deletions.
diff --git a/.github/workflows/coral-pr-pipeline.yml b/.github/workflows/coral-pr-pipeline.yml
@@ -13,7 +13,7 @@ permissions:
   contents: read
 
 env:
-  NODE_VERSION: 16
+  NODE_VERSION: 18
   PNPM_VERSION: 7.13.4
 
 jobs:

diff --git a/.github/workflows/maven.yml b/.github/workflows/maven.yml
@@ -3,6 +3,9 @@
 
 name: Java CI with Maven
 
+env:
+  NODE_VERSION: 18
+
 on:
   push:
     branches: ["main"]
@@ -24,6 +27,10 @@ jobs:
       - uses: actions/checkout@v3
         with:
           persist-credentials: false
+      - name: Setup node.js
+        uses: actions/setup-node@v3
+        with:
+          node-version: ${{ env.NODE_VERSION }}
       - name: Set up JDK ${{ matrix.java-version }}
         uses: actions/setup-java@v3
         with:

diff --git a/.gitignore b/.gitignore
@@ -44,6 +44,7 @@ node_modules/
 coral/dist*
 core/src/main/resources/static/assets/coral*
 core/src/main/resources/templates/coral*
+core/nodebuild*
 
 # Coral development mode against remote Klaw API
 coral/.env.remote-api

diff --git a/README.md b/README.md
@@ -23,6 +23,8 @@ For the versions available, see the [tags on this repository](https://github.com
 ## Features:
 
 - Topics (approval): Create, Update, Delete, Promote
+  - React UI - New look and feel for Browse topics
+
 - Acls (approval):  Create,Delete
 - Connectors (approval): Create
   - Any connector can be created as long as the required plugin libraries are installed on the server.  
@@ -46,7 +48,7 @@ For the versions available, see the [tags on this repository](https://github.com
 - Restore configuration (topics, acls)
 
 - Login 
-  - Active directory integration
+  - Azure / Active directory integration
   - Single Sign-on (OAuth2)
   - Based on database
 
@@ -100,6 +102,8 @@ For the versions available, see the [tags on this repository](https://github.com
 ### Manual
 mvn clean install
 
+Note - node, npm and pnpm are installed locally (required for React UI assets) through maven execution plugins.
+
 Builds two artifacts core/target/klaw-<version>.jar and cluster-api/target/cluster-api-<version>.jar
 
 and follow steps defined at https://klaw-project.io/docs or run the binaries like below

diff --git a/core/Makefile b/core/Makefile
@@ -0,0 +1,21 @@
+CORAL_ROOT = ../coral
+CORAL_DIST = $(CORAL_ROOT)/dist
+
+# This is installed as part of Maven
+PNPM = ../core/nodebuild/node/node_modules/.bin/pnpm
+
+$(CORAL_DIST): ../coral/index.html $(shell find $(CORAL_ROOT)/src)
+	cd $(CORAL_ROOT); $(PNPM) install --frozen-lockfile
+	cd $(CORAL_ROOT); $(PNPM) build --assetsDir assets/coral --mode springboot
+
+src/main/resources/templates/coral/index.html: $(CORAL_DIST)
+	mkdir -p $(shell dirname $@)
+	cp -r $(CORAL_DIST)/index.html $@
+
+src/main/resources/static/assets/coral: $(CORAL_DIST)
+	cp -r $(CORAL_DIST)/assets/* $@
+
+.PHONY: clean
+clean:
+	rm -rf src/main/resources/templates/coral/index.html
+	rm -rf src/main/resources/static/assets/coral
diff --git a/core/pom.xml b/core/pom.xml
@@ -24,9 +24,13 @@
         <apachepoi.version>5.2.3</apachepoi.version>
         <commons-text.version>1.10.0</commons-text.version>
         <exec-maven-plugin.version>3.1.0</exec-maven-plugin.version>
+        <front-end-maven-plugin.version>1.12.1</front-end-maven-plugin.version>
         <h2.version>2.1.214</h2.version>
         <jasyptencrypt.version>3.0.4</jasyptencrypt.version>
         <netty-all.version>4.1.80.Final</netty-all.version>
+        <node.version>v18.11.0</node.version>
+        <npm.version>8.19.2</npm.version>
+        <pnpm.version>7.14.0</pnpm.version>
         <snakeyaml.version>1.33</snakeyaml.version>
         <spring.azure.ad.version>4.4.1</spring.azure.ad.version>
     </properties>
@@ -156,6 +160,71 @@
                     </execution>
                 </executions>
             </plugin>
+            <!-- Install node and npm for React components -->
+            <plugin>
+                <groupId>com.github.eirslett</groupId>
+                <artifactId>frontend-maven-plugin</artifactId>
+                <version>${front-end-maven-plugin.version}</version>
+                <configuration>
+                    <workingDirectory>nodebuild</workingDirectory>
+                </configuration>
+                <executions>
+                    <execution>
+                        <id>install node and npm</id>
+                        <goals>
+                            <goal>install-node-and-npm</goal>
+                        </goals>
+                        <phase>generate-resources</phase>
+                        <configuration>
+                            <nodeVersion>${node.version}</nodeVersion>
+                            <npmVersion>${npm.version}</npmVersion>
+                        </configuration>
+                    </execution>
+                </executions>
+            </plugin>
+            <!-- Install pnpm. Clean and build React components -->
+            <plugin>
+                <groupId>org.codehaus.mojo</groupId>
+                <artifactId>exec-maven-plugin</artifactId>
+                <version>${exec-maven-plugin.version}</version>
+                <executions>
+                    <!-- Install pnpm for React components -->
+                    <execution>
+                        <id>Install pnpm</id>
+                        <phase>compile</phase>
+                        <goals>
+                            <goal>exec</goal>
+                        </goals>
+                        <configuration>
+                            <basedir>nodebuild/node</basedir>
+                            <executable>bash</executable>
+                            <commandlineArgs>npm install pnpm</commandlineArgs>
+                        </configuration>
+                    </execution>
+                    <execution>
+                        <id>Clean Coral assets before building</id>
+                        <goals>
+                            <goal>exec</goal>
+                        </goals>
+                        <phase>clean</phase>
+                        <configuration>
+                            <executable>make</executable>
+                            <commandlineArgs>clean</commandlineArgs>
+                        </configuration>
+                    </execution>
+                    <execution>
+                        <id>Compile and copy Coral assets</id>
+                        <goals>
+                            <goal>exec</goal>
+                        </goals>
+                        <phase>compile</phase>
+                        <configuration>
+                            <executable>make</executable>
+                            <commandlineArgs>src/main/resources/templates/coral/index.html src/main/resources/static/assets/coral</commandlineArgs>
+                        </configuration>
+                    </execution>
+                </executions>
+            </plugin>
         </plugins>
     </build>