create-fff-app 0.1.0

package/template/src/server/Endpoints/Pages/Templates.fs

@@ -0,0 +1,45 @@
+module App.Server.Endpoints.Pages.Templates
+
+open Fable.Core
+open Fable.Core.JsInterop
+
+// ── Compiled FJSX page template modules ──────────────────────────────────────
+// These static imports are resolved at Worker startup.
+// The FJSX files must be compiled first:
+//   fjsx --dir src/server/Endpoints/Pages --out dist/server/Endpoints/Pages
+
+[<ImportAll("./Layout.js")>]
+let private layoutMod : obj = jsNative
+
+[<ImportAll("./EmployeeList.js")>]
+let private employeeListMod : obj = jsNative
+
+[<ImportAll("./EmployeeNew.js")>]
+let private employeeNewMod : obj = jsNative
+
+[<ImportAll("./About.js")>]
+let private aboutMod : obj = jsNative
+
+
+[<ImportAll("./EmployeeEdit.js")>]
+let private employeeEditMod : obj = jsNative
+// ── Render helpers ────────────────────────────────────────────────────────────
+
+let renderLayout       (data: obj) : string = layoutMod?renderToHtml $ data
+let renderEmployeeList (data: obj) : string = employeeListMod?renderToHtml $ data
+let renderEmployeeNew  (data: obj) : string = employeeNewMod?renderToHtml $ data
+let renderAbout        ()          : string = aboutMod?renderToHtml $ (createObj [])
+
+let renderEmployeeEdit (data: obj) : string = employeeEditMod?renderToHtml $ data
+
+/// Full-page HTML shell.
+/// title      — page title shown in <title> tag
+/// activePath — used to highlight the active nav link
+/// body       — raw HTML injected into <main>
+let shell (title: string) (activePath: string) (body: string) : string =
+    renderLayout (createObj [
+        "title"       ==> title
+        "homeActive"  ==> (activePath = "/")
+        "aboutActive" ==> (activePath = "/about")
+        "body"        ==> body
+    ])

package/template/src/server/Server.fsproj

@@ -0,0 +1,28 @@
+<Project Sdk="Microsoft.NET.Sdk">
+
+  <PropertyGroup>
+    <TargetFramework>net9.0</TargetFramework>
+    <RootNamespace>App.Server</RootNamespace>
+  </PropertyGroup>
+
+  <ItemGroup>
+    <!-- Domain — pure types, no side effects -->
+    <Compile Include="Domain/Employees/Employee.fs" />
+
+    <!-- Workflows — business logic (may use Infrastructure) -->
+    <Compile Include="Workflows/Employees/EmployeeWorkflows.fs" />
+
+    <!-- Endpoints — HTTP layer (routes + page templates) -->
+    <Compile Include="Endpoints/Employees/Routes.fs" />
+    <Compile Include="Endpoints/Pages/Templates.fs" />
+    <Compile Include="Endpoints/Pages/Routes.fs" />
+
+    <!-- Entry point -->
+    <Compile Include="Worker.fs" />
+  </ItemGroup>
+
+  <ItemGroup>
+    <PackageReference Include="FffStack.Server" Version="0.1.0" />
+  </ItemGroup>
+
+</Project>

package/template/src/server/Worker.fs

@@ -0,0 +1,45 @@
+module App.Server.Worker
+
+open FffStack.Server
+open Fable.Core
+
+let router = Router()
+
+// ── API routes (JSON) ─────────────────────────────────────────────────────────
+Endpoints.Employees.Routes.register router
+
+// ── Page routes (HTML, MPA) ───────────────────────────────────────────────────
+Endpoints.Pages.Routes.register     router
+
+// ── Error pages ───────────────────────────────────────────────────────────────
+
+router.OnNotFound(fun _ctx ->
+    promise {
+        let body = """
+  <section class="card">
+    <div class="card-label">404</div>
+    <h2>Page not found</h2>
+    <p class="text-muted" style="margin-top:0.5rem">The page you were looking for doesn't exist.</p>
+    <a href="/" class="btn btn-primary" style="display:inline-block;margin-top:1.25rem">← Back to Employees</a>
+  </section>"""
+        return Response.html (Endpoints.Pages.Templates.shell "Not Found" "" body)
+    }) |> ignore
+
+router.OnError(fun _ctx ex ->
+    let msg = ex.Message
+    let body =
+        sprintf """
+  <section class="card">
+    <div class="card-label">500</div>
+    <h2>Something went wrong</h2>
+    <p class="text-muted" style="margin-top:0.5rem">%s</p>
+    <a href="/" class="btn btn-secondary" style="display:inline-block;margin-top:1.25rem">← Back to Employees</a>
+  </section>"""
+            msg
+    promise {
+        return Response.html (Endpoints.Pages.Templates.shell "Error" "" body)
+    }) |> ignore
+
+// ── Cloudflare Workers entry point ────────────────────────────────────────────
+
+router.ExportAsWorkerDefault()

package/template/src/server/Workflows/Employees/EmployeeWorkflows.fs

@@ -0,0 +1,86 @@
+module App.Server.Workflows.Employees
+
+open FffStack.Server
+open Fable.Core
+open Fable.Core.JsInterop
+open App.Server.Domain.Employees
+
+[<Emit("crypto.randomUUID()")>]
+let private newId () : string = jsNative
+
+let getAll (db: ID1Database) : JS.Promise<Employee list> =
+    queryAll<Employee> db
+        "SELECT id, name, email, department, role, status, joined_at as joinedAt \
+         FROM employees ORDER BY name ASC"
+        [||]
+
+let getById (db: ID1Database) (id: string) : JS.Promise<Employee option> =
+    queryOne<Employee> db
+        "SELECT id, name, email, department, role, status, joined_at as joinedAt \
+         FROM employees WHERE id = ?"
+        [| id |]
+
+let create
+    (db:         ID1Database)
+    (rawName:    string)
+    (rawEmail:   string)
+    (department: string)
+    (role:       string)
+    (status:     string)
+    : JS.Promise<Result<Employee, string>> =
+    promise {
+        match EmployeeName.create rawName, WorkEmail.create rawEmail with
+        | Error e, _         -> return Error e
+        | _, Error e         -> return Error e
+        | Ok name, Ok email  ->
+            let id  = newId ()
+            let n   = EmployeeName.value name
+            let em  = WorkEmail.value email
+            let dep = department.Trim()
+            let rol = role.Trim()
+            let st  = if status = "inactive" then "inactive" else "active"
+            do! execute db
+                    "INSERT INTO employees (id, name, email, department, role, status, joined_at) \
+                     VALUES (?, ?, ?, ?, ?, ?, date('now'))"
+                    [| id; n; em; dep; rol; st |]
+                |> Promise.map ignore
+            return Ok { id = id; name = n; email = em; department = dep
+                        role = rol; status = st; joinedAt = "" }
+    }
+
+let update
+    (db:         ID1Database)
+    (id:         string)
+    (rawName:    string)
+    (rawEmail:   string)
+    (department: string)
+    (role:       string)
+    (status:     string)
+    : JS.Promise<Result<Employee, string>> =
+    promise {
+        match EmployeeName.create rawName, WorkEmail.create rawEmail with
+        | Error e, _         -> return Error e
+        | _, Error e         -> return Error e
+        | Ok name, Ok email  ->
+            let n   = EmployeeName.value name
+            let em  = WorkEmail.value email
+            let dep = department.Trim()
+            let rol = role.Trim()
+            let st  = if status = "inactive" then "inactive" else "active"
+            do! execute db
+                    "UPDATE employees SET name = ?, email = ?, department = ?, role = ?, status = ? WHERE id = ?"
+                    [| n; em; dep; rol; st; id |]
+                |> Promise.map ignore
+            return Ok { id = id; name = n; email = em; department = dep
+                        role = rol; status = st; joinedAt = "" }
+    }
+
+let delete (db: ID1Database) (id: string) : JS.Promise<bool> =
+    promise {
+        match! getById db id with
+        | None -> return false
+        | Some _ ->
+            do! execute db "DELETE FROM employees WHERE id = ?" [| id |]
+                |> Promise.map ignore
+            return true
+    }

package/template/webpack.client.js

@@ -0,0 +1,18 @@
+import { createRequire } from 'module';
+import path from 'path';
+import { fileURLToPath } from 'url';
+
+const __dirname = path.dirname(fileURLToPath(import.meta.url));
+
+export default {
+  entry: './dist/client/fable/App.js',
+  output: {
+    path: path.resolve(__dirname, 'dist/client'),
+    filename: 'bundle.js',
+  },
+  mode: process.env.NODE_ENV === 'production' ? 'production' : 'development',
+  devtool: 'source-map',
+  resolve: {
+    extensions: ['.js'],
+  },
+};

package/template/wrangler.toml

@@ -0,0 +1,23 @@
+name            = "fff-stack-app"
+main            = "dist/server/Worker.js"
+compatibility_date = "2024-09-23"
+
+# Client assets served from Cloudflare Pages / Workers Static Assets
+[assets]
+directory = "./dist/client"
+binding   = "ASSETS"
+
+# Cloudflare D1 (SQLite)
+[[d1_databases]]
+binding      = "DB"
+database_name = "fff-stack-db"
+database_id  = "YOUR_D1_DATABASE_ID"   # replace after: wrangler d1 create fff-stack-db
+
+# Cloudflare R2 object storage
+[[r2_buckets]]
+binding     = "BUCKET"
+bucket_name = "fff-stack-bucket"            # replace with your bucket name
+# preview_bucket_name = "fff-stack-bucket-dev"  # optional local dev bucket
+
+[build]
+command = "bun run build"