Add strcalc/src/main/frontend

This adds a JavaScript project built using Node.js, the pnpm package
manager, and the Vite development and packaging environment, and
node-gradle/gradle-node-plugin:

- https://nodejs.org/
- https://pnpm.io/
- https://vitejs.dev/
- https://github.com/node-gradle/gradle-node-plugin

The `./gradlew pnpm_build` task emits the compiled HTML and JavaScript
into `strcalc/build/webapp`. Reconfigured the Gradle War plugin's `war`
task to add files from this directory into
`strcalc/build/libs/strcalc.war`.

I need to finish documenting this (added a TODO in README.md) and to add
tests specifically for the JavaScript code. However, the entire project
is building and testing successfully with this new infrastructure.

.github/workflows/run-tests.yaml

@@ -16,9 +16,24 @@ jobs:
           java-version: 21
           check-latest: true
 
+      - name: Install pnpm
+        uses: pnpm/action-setup@v2
+        with:
+          version: 8
+
+      - name: Setup Node
+        uses: actions/setup-node@v4
+        with:
+          node-version: 20
+          cache: 'pnpm'
+          cache-dependency-path: 'strcalc/src/main/frontend/pnpm-lock.yaml'
+
       - name: Setup Gradle
         uses: gradle/gradle-build-action@v2
 
+      - name: Install Node packages
+        run: ./gradlew pnpmInstall
+
       - name: Build and test
         run: ./gradlew build
 

.gitignore

@@ -8,3 +8,9 @@ tmp
 
 # IDEA coverage report dir
 htmlReport
+
+# The strcalc/main/frontend project will write files to strcalc/src/main/webapp
+# for the War plugin to package into strcalc/build/libs/strcalc.war.
+strcalc/src/main/webapp
+
+node_modules

README.md

@@ -605,6 +605,16 @@ plugin:
 
 Coming soon...
 
+TODO(mbland): Document how the following are configured:
+
+- [Gradle WAR Plugin][] - now writes to/includes files from `strcalc/build/webapp`
+- [Selenium WebDriver][]
+- [TestTomcat](./strcalc/src/test/java/com/mike_bland/training/testing/utils/TestTomcat.java)
+  (for medium tests)
+- [Vite JavaScript development environment][]
+- [pnpm Node.js package manager][]
+- [node-gradle/gradle-node-plugin][]
+
 ## Implementing core logic using Test Driven Development and unit tests
 
 Coming soon...
@@ -678,3 +688,6 @@ Coming soon...
 [coverallsapp/github-action GitHub Actions plugin]: https://github.com/coverallsapp/github-action
 [GitHub Actions marketplace]: https://github.com/marketplace?type=actions
 [JaCoCo related GitHub Actions plugins]: https://github.com/marketplace?category=&type=actions&verification=&query=jacoco
+[Vite JavaScript development environment]: https://vitejs.dev/
+[pnpm Node.js package manager]: https://pnpm.io/
+[node-gradle/gradle-node-plugin]: https://github.com/node-gradle/gradle-node-plugin

strcalc/build.gradle.kts

@@ -7,6 +7,7 @@
 plugins {
     war
     jacoco
+    id("com.github.node-gradle.node") version "7.0.1"
 }
 
 repositories {
@@ -43,6 +44,10 @@ jacoco {
     toolVersion = "0.8.11"
 }
 
+node {
+    nodeProjectDir = file("src/main/frontend")
+}
+
 // The small/medium/large test schema is implemented via JUnit5 composite tags
 // and custom Test tasks. See:
 //
@@ -67,8 +72,14 @@ val smallTests = tasks.named<Test>("test") {
     setCommonTestOptions(this)
 }
 val testClasses = tasks.named("testClasses")
+val pnpmBuild = tasks.named("pnpm_build")
 val war = tasks.named("war")
 
+tasks.war {
+    dependsOn(pnpmBuild)
+    from(project.layout.buildDirectory.dir("webapp").get())
+}
+
 val setLargerTestOptions = { testTask: Test ->
     testTask.group = "verification"
     testTask.dependsOn(testClasses)
@@ -93,13 +104,15 @@ val mediumCoverageTests = tasks.register<Test>("test-medium-coverage") {
     description = "Runs medium integration tests annotated with " +
             "@MediumCoverageTest."
     setLargerTestOptions(this)
+    dependsOn(pnpmBuild)
     useJUnitPlatform { includeTags("medium & coverage") }
     shouldRunAfter(smallTests)
 }
 
 val mediumTests = tasks.register<Test>("test-medium") {
     description = "Runs medium integration tests annotated with @MediumTest."
     setLargerTestOptions(this)
+    dependsOn(pnpmBuild)
     useJUnitPlatform { includeTags("medium & !coverage") }
     shouldRunAfter(smallTests, mediumCoverageTests)
     extensions.configure(JacocoTaskExtension::class) {

strcalc/src/main/frontend/.gitignore

@@ -0,0 +1,24 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?

strcalc/src/main/frontend/index.html

@@ -0,0 +1,11 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>String Calculator - Mike Bland Training</title>
+  </head>
+  <body>
+    <div id="app"></div><script type="module" src="/main.js"></script>
+  </body>
+</html>

strcalc/src/main/frontend/main.js

@@ -0,0 +1,5 @@
+import './style.css'
+
+document.querySelector('#app').innerHTML = `
+  <p class="placeholder">Hello, World!</p>
+`

strcalc/src/main/frontend/package.json

@@ -0,0 +1,14 @@
+{
+  "name": "frontend",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "preview": "vite preview"
+  },
+  "devDependencies": {
+    "vite": "^4.4.5"
+  }
+}