webapp: initialize a react app (#49)

* webapp: init react app

* init a basic server

* refactor server command

* introduce webonly mode

* finally!

* fix docker build

* fix docker build

* avoid using alpine for node

* Revert "avoid using alpine for node"

This reverts commit 63b7830.

* git add the index html

* try fixing lint

* pin node to 18

* use latest node 18 version

* ci: build webapp in lint step

.github/workflows/lint.yml

@@ -17,6 +17,12 @@ jobs:
       - uses: actions/setup-go@v5
         with:
           go-version: stable
+      - uses: actions/setup-node@v3
+        with:
+          node-version: "18.x"
+      - name: Build webapp
+        working-directory: ./webapp
+        run: npm ci && npm run build
       - name: golangci-lint
         uses: golangci/golangci-lint-action@v6
         with:

.gitignore

@@ -45,7 +45,6 @@ hashes.json
 config/*.json
 scan_policy_curl.sh
 *.yaml
-*.html
 
 # TODO: figure out what this is and get rid of it
 listdirectory.go

Dockerfile

@@ -1,3 +1,16 @@
+FROM node:18-alpine3.20 AS frontend
+
+# Set the working directory
+WORKDIR /webapp
+
+COPY webapp/package.json webapp/package-lock.json ./
+
+RUN npm install
+
+COPY webapp/ /webapp/
+
+RUN npm run build
+
 # Stage 1: Build the Go binary using Alpine
 FROM golang:1.23-alpine AS builder
 
@@ -23,13 +36,14 @@ RUN go mod tidy
 # Copy the source code
 COPY . .
 
+COPY --from=frontend /webapp/dist /app/webapp/dist
+
 # Run the tests
 RUN go test -v ./...
 
 # Build the Go binary for amd64
 RUN GOARCH=amd64 go build -o gokakashi
 
-# Stage 2: Final image for running the application with Alpine
 FROM alpine:3.20
 
 # Ensure the build fails on any command failure

cmd/server.go

@@ -1,20 +1,23 @@
 package cmd
 
 import (
+	"fmt"
+	"log"
+	"os"
+	"os/signal"
+	"strings"
+	"syscall"
+	"time"
+
 	"github.com/robfig/cron/v3"
 	config "github.com/shinobistack/gokakashi/internal/config/v0"
 	configv1 "github.com/shinobistack/gokakashi/internal/config/v1"
 	restapi "github.com/shinobistack/gokakashi/internal/restapi/v0"
 	restapiv1 "github.com/shinobistack/gokakashi/internal/restapi/v1"
 	"github.com/shinobistack/gokakashi/pkg/utils"
 	"github.com/shinobistack/gokakashi/pkg/web"
+	"github.com/shinobistack/gokakashi/webapp"
 	"github.com/spf13/cobra"
-	"log"
-	"os"
-	"os/signal"
-	"strings"
-	"syscall"
-	"time"
 )
 
 var serverCmd = &cobra.Command{
@@ -26,12 +29,47 @@ var serverCmd = &cobra.Command{
 var serverConfigFilePath *string
 
 func runServer(cmd *cobra.Command, args []string) {
-	if *serverConfigFilePath != "" {
+	sigs := make(chan os.Signal, 1)
+	signal.Notify(sigs, syscall.SIGINT, syscall.SIGTERM)
+	done := make(chan bool, 1)
+	go func() {
+		sig := <-sigs
+		fmt.Println()
+		fmt.Println(sig)
+		done <- true
+	}()
+
+	go func() {
+		if os.Getenv("WEB_ONLY") != "" || *serverConfigFilePath == "" {
+			return
+		}
+
 		handleConfigV1()
-		return
-	}
-	// ToDo: To introduce config version. A way to support old and latest config
-	handleConfigV0()
+	}()
+
+	go func() {
+		webServerAddr := ":5555" // TODO make this come from a config
+		log.Println("Starting webapp server at", webServerAddr)
+		webServer, err := webapp.New(webServerAddr)
+		if err != nil {
+			log.Fatalln("Error creating web app server", err)
+		}
+		if err := webServer.ListenAndServe(); err != nil {
+			log.Fatalln("Error starting web server", err)
+		}
+	}()
+
+	go func() {
+		if os.Getenv("WEB_ONLY") != "" || *serverConfigFilePath != "" {
+			return
+		}
+
+		// TODO: get rid of the old config at some point.
+		handleConfigV0()
+	}()
+
+	<-done
+	log.Println("Exiting gokakashi. Bye!")
 }
 
 func handleConfigV1() {
@@ -51,13 +89,9 @@ func handleConfigV1() {
 	}
 	go s.Serve()
 
-	// Graceful shutdown handling
-	shutdown := make(chan os.Signal, 1)
-	signal.Notify(shutdown, syscall.SIGINT, syscall.SIGTERM)
-	<-shutdown
-
 	log.Println("Shutting down goKakashi gracefully...")
 }
+
 func handleConfigV0() {
 	log.Println("=== Starting goKakashi Tool ===")
 

webapp/.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?

webapp/README.md

@@ -0,0 +1,8 @@
+# React + Vite
+
+This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
+
+Currently, two official plugins are available:
+
+- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react/README.md) uses [Babel](https://babeljs.io/) for Fast Refresh
+- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh

webapp/eslint.config.js

@@ -0,0 +1,38 @@
+import js from '@eslint/js'
+import globals from 'globals'
+import react from 'eslint-plugin-react'
+import reactHooks from 'eslint-plugin-react-hooks'
+import reactRefresh from 'eslint-plugin-react-refresh'
+
+export default [
+  { ignores: ['dist'] },
+  {
+    files: ['**/*.{js,jsx}'],
+    languageOptions: {
+      ecmaVersion: 2020,
+      globals: globals.browser,
+      parserOptions: {
+        ecmaVersion: 'latest',
+        ecmaFeatures: { jsx: true },
+        sourceType: 'module',
+      },
+    },
+    settings: { react: { version: '18.3' } },
+    plugins: {
+      react,
+      'react-hooks': reactHooks,
+      'react-refresh': reactRefresh,
+    },
+    rules: {
+      ...js.configs.recommended.rules,
+      ...react.configs.recommended.rules,
+      ...react.configs['jsx-runtime'].rules,
+      ...reactHooks.configs.recommended.rules,
+      'react/jsx-no-target-blank': 'off',
+      'react-refresh/only-export-components': [
+        'warn',
+        { allowConstantExport: true },
+      ],
+    },
+  },
+]

webapp/index.html

@@ -0,0 +1,13 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Vite + React</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.jsx"></script>
+  </body>
+</html>