feat: add nextjs skeleton for the ui

.github/workflows/main.yml

@@ -9,7 +9,7 @@ on:
       - main
 
 jobs:
-  build:
+  go-build:
     runs-on: ubuntu-latest
     steps:
       - uses: actions/checkout@v4
@@ -20,7 +20,22 @@ jobs:
 
       - name: Build
         run: go build ./...
+  nextjs-build:
+    runs-on: ubuntu-latest
+    defaults:
+      run:
+        working-directory: ui
+    steps:
+      - uses: actions/checkout@v3
+      - name: Use Bun
+        uses: oven-sh/setup-bun@v1
+        with:
+          bun-version: latest
 
+      - name: Build frontend
+        run: |
+          bun install
+          bun run build
   go-vet:
     runs-on: ubuntu-latest
     steps:
@@ -47,7 +62,7 @@ jobs:
         with:
           version: v1.54
 
-  unit-tests:
+  go-unit-tests:
     runs-on: ubuntu-latest
     steps:
       - uses: actions/checkout@v4
@@ -59,12 +74,31 @@ jobs:
       - name: Unit tests
         run: go test -cover ./...
 
+  nextjs-unit-tests:
+    runs-on: ubuntu-latest
+    defaults:
+      run:
+        working-directory: ui
+    steps:
+      - uses: actions/checkout@v3
+      - name: Use Bun
+        uses: oven-sh/setup-bun@v1
+        with:
+          bun-version: latest
+
+      - name: Execute Unit tests
+        run: |
+          bun install
+          bun run test
+
   rock-build:
     needs: 
-      - build
+      - go-build
+      - nextjs-build
       - go-vet
       - lint
-      - unit-tests
+      - go-unit-tests
+      - nextjs-unit-tests
     uses: ./.github/workflows/build-rock.yaml
 
   rock-scan:

.gitignore

@@ -2,4 +2,35 @@
 *.pem
 *config.yaml
 
-.DS_Store
+.DS_Store
+
+# dependencies
+ui/node_modules
+ui/.pnp
+ui/*.pnp.js
+ui/*.yarn/install-state.gz
+
+# testing
+ui/coverage
+
+# next.js
+ui/.next/
+ui/out/
+
+# production
+ui/build
+
+# debug
+ui/npm-debug.log*
+ui/yarn-debug.log*
+ui/yarn-error.log*
+
+# local env files
+ui/.env*.local
+
+# vercel
+ui/.vercel
+
+# typescript
+ui/*.tsbuildinfo
+ui/next-env.d.ts

internal/api/handlers.go

@@ -22,13 +22,20 @@ func NewGoCertRouter(env *Environment) http.Handler {
 	router.HandleFunc("POST /certificate_requests/{id}/certificate/reject", RejectCertificate(env))
 	router.HandleFunc("DELETE /certificate_requests/{id}/certificate", DeleteCertificate(env))
 
+	frontend := newFrontendFileServer(env.FrontendDir)
+
 	v1 := http.NewServeMux()
 	v1.HandleFunc("GET /status", HealthCheck)
 	v1.Handle("/api/v1/", http.StripPrefix("/api/v1", router))
+	v1.Handle("/", frontend)
 
 	return logging(v1)
 }
 
+func newFrontendFileServer(dir string) http.Handler {
+	return http.FileServer(http.Dir(dir))
+}
+
 // the health check endpoint simply returns a http.StatusOK
 func HealthCheck(w http.ResponseWriter, r *http.Request) {
 	w.WriteHeader(http.StatusOK) //nolint:errcheck

internal/api/server.go

@@ -22,14 +22,16 @@ type ConfigYAML struct {
 }
 
 type Config struct {
-	Key    []byte
-	Cert   []byte
-	DBPath string
-	Port   int
+	Key         []byte
+	Cert        []byte
+	DBPath      string
+	FrontendDir string
+	Port        int
 }
 
 type Environment struct {
-	DB *certdb.CertificateRequestsRepository
+	DB          *certdb.CertificateRequestsRepository
+	FrontendDir string
 }
 
 // validateConfigFile opens and processes the given yaml file, and catches errors in the process
@@ -65,6 +67,7 @@ func validateConfigFile(filePath string) (Config, error) {
 	config.Key = key
 	config.DBPath = c.DBPath
 	config.Port = c.Port
+	config.FrontendDir = "ui/out"
 	return config, nil
 }
 
@@ -85,6 +88,7 @@ func NewServer(configFile string) (*http.Server, error) {
 
 	env := &Environment{}
 	env.DB = db
+	env.FrontendDir = config.FrontendDir
 	router := NewGoCertRouter(env)
 
 	s := &http.Server{

rockcraft.yaml

@@ -1,7 +1,7 @@
 name: gocert
 base: bare
 build-base: [email protected]
-version: '0.0.1'
+version: '0.0.2'
 summary: A certificate management tool
 description: |
   A certificate management tool.
@@ -17,11 +17,19 @@ services:
     startup: enabled
 
 parts:
+  frontend:
+    source: ./ui
+    plugin: npm
+    build-snaps:
+      - node/20/stable
+    override-build: |
+      npm install
+      npm run build
   gocert:
     source: .
     plugin: go
     build-snaps:
       - go/1.22/stable
     stage-packages:
       - ca-certificates_data
-      - libc6_libs
+      - libc6_libs

ui/.eslintrc.json

@@ -0,0 +1,3 @@
+{
+  "extends": "next/core-web-vitals"
+}

ui/README.md

@@ -0,0 +1,17 @@
+## Development
+
+First, run the development server:
+
+```bash
+npm run dev
+# or
+yarn dev
+# or
+pnpm dev
+# or
+bun dev
+```
+
+Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
+
+You can start editing the page by modifying `src/app/page.tsx`. The page auto-updates as you edit the file.

ui/next.config.mjs

@@ -0,0 +1,6 @@
+/** @type {import('next').NextConfig} */
+const nextConfig = {
+    output: "export"
+};
+
+export default nextConfig;

ui/package.json

@@ -0,0 +1,33 @@
+{
+  "name": "gocert",
+  "version": "0.1.0",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "dev": "next dev",
+    "build": "next build",
+    "start": "next start",
+    "lint": "next lint",
+    "test": "vitest run"
+  },
+  "dependencies": {
+    "react": "^18",
+    "react-dom": "^18",
+    "next": "14.2.3"
+  },
+  "devDependencies": {
+    "@testing-library/react": "^15.0.4",
+    "@types/node": "^20",
+    "@types/react": "^18",
+    "@types/react-dom": "^18",
+    "@vitejs/plugin-react": "^4.2.1",
+    "eslint": "^8",
+    "eslint-config-next": "14.2.3",
+    "jsdom": "^24.0.0",
+    "typescript": "^5",
+    "vitest": "^1.5.2"
+  },
+  "overrides": {
+    "rollup": "npm:@rollup/wasm-node@*"
+  }
+}

ui/src/app/layout.tsx

@@ -0,0 +1,18 @@
+import type { Metadata } from "next";
+
+export const metadata: Metadata = {
+  title: "GoCert",
+  description: "A certificate management application",
+};
+
+export default function RootLayout({
+  children,
+}: Readonly<{
+  children: React.ReactNode;
+}>) {
+  return (
+    <html lang="en">
+      <body>{children}</body>
+    </html>
+  );
+}

ui/src/app/page.test.tsx

@@ -0,0 +1,8 @@
+import { expect, test } from 'vitest'
+import { render, screen } from '@testing-library/react'
+import Page from './page'
+
+test('Page', () => {
+    render(<Page />)
+    expect(screen.getByRole('heading', { level: 1, name: 'Hello from the Frontend' })).toBeDefined()
+})

ui/src/app/page.tsx

@@ -0,0 +1,7 @@
+export default function Home() {
+  return (
+    <main>
+      <h1>Hello from the Frontend</h1>
+    </main>
+  );
+}

ui/tsconfig.json

@@ -0,0 +1,26 @@
+{
+  "compilerOptions": {
+    "lib": ["dom", "dom.iterable", "esnext"],
+    "allowJs": true,
+    "skipLibCheck": true,
+    "strict": true,
+    "noEmit": true,
+    "esModuleInterop": true,
+    "module": "esnext",
+    "moduleResolution": "bundler",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "jsx": "preserve",
+    "incremental": true,
+    "plugins": [
+      {
+        "name": "next"
+      }
+    ],
+    "paths": {
+      "@/*": ["./src/*"]
+    }
+  },
+  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
+  "exclude": ["node_modules"]
+}

ui/vitest.config.ts

@@ -0,0 +1,10 @@
+import { defineConfig } from 'vitest/config'
+import react from '@vitejs/plugin-react'
+
+export default defineConfig({
+    plugins: [react()],
+    test: {
+        environment: 'jsdom',
+        reporters: ['default', 'github-actions']
+    },
+})