Add xef-server web app (#350)

* Add deps and server web app tasks

* Add web project

---------

Co-authored-by: Raúl Raja Martínez <[email protected]>

gradle/libs.versions.toml

@@ -16,6 +16,7 @@ testcontainers = "1.18.3"
 hikari = "5.0.1"
 dokka = "1.8.20"
 logback = "1.4.11"
+node-gradle = "5.0.0"
 kotlinx-coroutines = "1.7.3"
 scalaMultiversion = "2.0.4"
 circe = "0.14.5"
@@ -138,3 +139,4 @@ semver-gradle = { id="com.javiersc.semver", version.ref="semverGradle" }
 suspend-transform-plugin = { id="love.forte.plugin.suspend-transform", version.ref="suspend-transform" }
 resources = { id="com.goncalossilva.resources", version.ref="resources-kmp" }
 detekt = { id="io.gitlab.arturbosch.detekt", version.ref="detekt"}
+node-gradle = { id = "com.github.node-gradle.node", version.ref = "node-gradle" }

server/build.gradle.kts

@@ -1,6 +1,7 @@
 plugins {
     id(libs.plugins.kotlin.jvm.get().pluginId)
     id(libs.plugins.kotlinx.serialization.get().pluginId)
+    alias(libs.plugins.node.gradle)
 }
 
 repositories {
@@ -15,6 +16,10 @@ java {
     }
 }
 
+node {
+    nodeProjectDir.set(file("${project.projectDir}/web"))
+}
+
 dependencies {
     implementation(libs.flyway.core)
     implementation(libs.hikari)
@@ -46,4 +51,10 @@ tasks.getByName<Copy>("processResources") {
     into("$buildDir/resources/main")
 }
 
-
+task<JavaExec>("web-app") {
+    dependsOn("npm_run_build")
+    group = "Execution"
+    description = "xef-server web application"
+    classpath = sourceSets.main.get().runtimeClasspath
+    mainClass.set("com.xebia.functional.xef.server.WebApp")
+  }

server/src/main/kotlin/com/xebia/functional/xef/server/Web.kt

@@ -0,0 +1,20 @@
+package com.xebia.functional.xef.server
+
+import io.ktor.server.engine.*
+import io.ktor.server.http.content.*
+import io.ktor.server.netty.*
+import io.ktor.server.routing.*
+
+object WebApp {
+
+    @JvmStatic
+    fun main(args: Array<String>) {
+        embeddedServer(Netty, port = 8080) {
+            routing {
+                singlePageApplication {
+                    react("web/dist")
+                }
+            }
+        }.start(wait = true)
+    }
+}

server/web/.eslintignore

@@ -0,0 +1,4 @@
+node_modules/
+dist/
+env.d.ts
+vite-env.d.ts

server/web/.eslintrc.cjs

@@ -0,0 +1,78 @@
+module.exports = {
+  env: { browser: true, es2020: true },
+  extends: [
+    'eslint:recommended',
+    'plugin:@typescript-eslint/recommended',
+    'plugin:react-hooks/recommended',
+    'prettier',
+    'plugin:import/recommended',
+    'plugin:import/typescript',
+  ],
+  parser: '@typescript-eslint/parser',
+  parserOptions: { ecmaVersion: 'latest', sourceType: 'module' },
+  plugins: ['@typescript-eslint', 'prettier', 'react-refresh', 'import'],
+  rules: {
+    'prettier/prettier': 'error',
+    'import/no-unresolved': ['error', { ignore: ['^@/'] }],
+    'import/order': [
+      'error',
+      {
+        groups: [
+          'builtin',
+          'external',
+          'internal',
+          'parent',
+          'sibling',
+          'index',
+          'object',
+          'type',
+        ],
+        pathGroups: [
+          {
+            pattern: '@/components/**',
+            group: 'internal',
+            position: 'after',
+          },
+          {
+            pattern: '@/state/**',
+            group: 'internal',
+            position: 'after',
+          },
+          {
+            pattern: '@/utils/**',
+            group: 'internal',
+            position: 'after',
+          },
+          {
+            pattern: '@/styles/**',
+            group: 'internal',
+            position: 'after',
+          },
+          {
+            pattern: '@/assets/**',
+            group: 'internal',
+            position: 'after',
+          },
+        ],
+        distinctGroup: true,
+        pathGroupsExcludedImportTypes: ['@/**'],
+        warnOnUnassignedImports: true,
+        'newlines-between': 'always',
+      },
+    ],
+    '@typescript-eslint/no-unused-vars': [
+      'error',
+      { argsIgnorePattern: '^_', varsIgnorePattern: '^_' },
+    ],
+  },
+  settings: {
+    'import/parsers': {
+      '@typescript-eslint/parser': ['.ts', '.tsx'],
+    },
+    'import/resolver': {
+      typescript: {
+        alwaysTryTypes: true,
+      },
+    },
+  },
+};

server/web/.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?

server/web/.prettierignore

@@ -0,0 +1,6 @@
+dist
+node_modules
+.yarn
+build
+coverage
+.docusaurus

server/web/.prettierrc

@@ -0,0 +1,10 @@
+{
+  "arrowParens": "always",
+  "bracketSpacing": true,
+  "bracketSameLine": true,
+  "printWidth": 80,
+  "proseWrap": "never",
+  "semi": true,
+  "singleQuote": true,
+  "trailingComma": "all"
+}

server/web/index.html

@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/xef-brand-icon.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>xef Dashboard</title>
+  </head>
+  <body>
+    <div id="root" class="root-container"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>