@farm.js/create-app 0.1.0-beta.21 → 0.1.0-beta.23

package/templates/basic/src/app/globals.css

@@ -1 +1,242 @@
+@import "@fontsource-variable/geist/wght.css";
+@import "@fontsource-variable/geist-mono/wght.css";
 @import "tailwindcss";
+
+:root {
+  --paper: #000000;
+  --paper-soft: #080808;
+  --ink: #f5f5f5;
+  --ink-soft: #a1a1a1;
+  --ink-faint: #686868;
+  --line: rgb(255 255 255 / 0.12);
+  --line-strong: rgb(255 255 255 / 0.22);
+  --focus: #ffffff;
+  --font-sans: "Geist Variable", ui-sans-serif, system-ui, sans-serif;
+  --font-mono: "Geist Mono Variable", ui-monospace, monospace;
+  color-scheme: dark;
+  color: var(--ink);
+  font-family: var(--font-sans);
+  font-synthesis: none;
+}
+
+* {
+  box-sizing: border-box;
+}
+
+html {
+  min-width: 320px;
+  min-height: 100%;
+  background: var(--paper);
+}
+
+body {
+  min-height: 100vh;
+  margin: 0;
+  background: var(--paper);
+  color: var(--ink);
+  font-family: var(--font-sans);
+  text-rendering: optimizeLegibility;
+}
+
+button,
+input {
+  font: inherit;
+}
+
+a {
+  color: inherit;
+  text-decoration: none;
+  -webkit-tap-highlight-color: transparent;
+}
+
+code {
+  font-family: var(--font-mono);
+}
+
+::selection {
+  background: white;
+  color: black;
+}
+
+:focus-visible {
+  outline: 2px solid var(--focus);
+  outline-offset: 3px;
+}
+
+.landing-main {
+  position: relative;
+  isolation: isolate;
+  width: 100%;
+  min-height: 100vh;
+  overflow: hidden;
+  background: var(--paper);
+}
+
+.hero-section {
+  position: relative;
+  display: flex;
+  width: 100%;
+  overflow: hidden;
+  min-height: 100vh;
+  align-items: center;
+  justify-content: flex-start;
+  padding: clamp(2rem, 6vh, 4rem) clamp(1.25rem, 7vw, 6rem);
+}
+
+.hero-section::before,
+.hero-section::after {
+  position: absolute;
+  width: 9px;
+  height: 9px;
+  border-color: rgb(255 255 255 / 0.3);
+  content: "";
+  pointer-events: none;
+}
+
+.hero-section::before {
+  top: -1px;
+  left: -1px;
+  border-top: 1px solid;
+  border-left: 1px solid;
+}
+
+.hero-section::after {
+  right: 0;
+  bottom: -1px;
+  border-right: 1px solid;
+  border-bottom: 1px solid;
+}
+
+.hero-copy {
+  width: min(100%, 680px);
+  margin: 0;
+}
+
+.eyebrow-row {
+  display: flex;
+  align-items: center;
+  gap: 0.65rem;
+  color: var(--ink-faint);
+  font-family: var(--font-mono);
+  font-size: 0.67rem;
+  text-transform: uppercase;
+}
+
+.eyebrow-row span:first-child {
+  color: var(--ink);
+}
+
+.hero-copy h1 {
+  max-width: 620px;
+  margin: 1.4rem 0 0;
+  font-size: clamp(1.85rem, 4vw, 3.2rem);
+  font-weight: 510;
+  letter-spacing: -0.05em;
+  line-height: 1.05;
+}
+
+.hero-copy h1 code {
+  border: 1px solid var(--line);
+  background: rgb(255 255 255 / 0.07);
+  padding: 0.04em 0.2em;
+  font-size: 0.78em;
+  font-weight: 450;
+  letter-spacing: -0.035em;
+  white-space: nowrap;
+}
+
+.command-list {
+  max-width: 520px;
+  margin-top: 1.75rem;
+  border-block: 1px solid var(--line);
+}
+
+.command-row {
+  display: grid;
+  min-width: 0;
+  grid-template-columns: auto minmax(0, 1fr);
+  align-items: center;
+  gap: 0.8rem;
+  padding: 0.9rem 0;
+}
+
+.command-row + .command-row {
+  border-top: 1px solid var(--line);
+}
+
+.command-row > span {
+  color: var(--ink-faint);
+  font-family: var(--font-mono);
+  font-size: 0.62rem;
+}
+
+.command-row code {
+  color: var(--ink);
+  font-size: 0.75rem;
+  overflow-wrap: anywhere;
+}
+
+.resource-links {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.65rem;
+  margin-top: 1.5rem;
+  color: var(--ink-soft);
+  font-family: var(--font-mono);
+  font-size: 0.68rem;
+  text-transform: uppercase;
+}
+
+.resource-link-item {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.65rem;
+  white-space: nowrap;
+}
+
+.resource-separator {
+  color: var(--ink-faint);
+  user-select: none;
+}
+
+.resource-links a {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.45rem;
+  border-bottom: 1px solid transparent;
+  padding-block: 0.2rem;
+  transition:
+    border-color 150ms ease,
+    color 150ms ease;
+}
+
+.resource-icon {
+  width: 0.85rem;
+  height: 0.85rem;
+  flex: 0 0 auto;
+}
+
+.resource-links a:hover {
+  border-color: currentColor;
+  color: var(--ink);
+}
+
+@media (max-width: 620px) {
+  .hero-section {
+    padding: 2rem 1.25rem;
+  }
+
+  .hero-copy h1 {
+    font-size: clamp(1.85rem, 9vw, 2.5rem);
+    overflow-wrap: anywhere;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  *,
+  *::before,
+  *::after {
+    scroll-behavior: auto !important;
+    transition-duration: 0.01ms !important;
+  }
+}

package/templates/basic/src/app/layout.tsx

@@ -2,7 +2,7 @@ import type { LayoutProps, Metadata } from "@farm.js/core";
 import "./globals.css";
 
 export const metadata: Metadata = {
-  title: "Farm.js App",
+  title: "FARMJS App",
   description: "A modern React meta-framework built on Vite",
   icons: {
     icon: [{ url: "/favicon.svg", type: "image/svg+xml", sizes: "any" }],
@@ -16,9 +16,7 @@ export default function RootLayout({ children }: LayoutProps) {
         <meta charSet="utf-8" />
         <meta name="viewport" content="width=device-width, initial-scale=1" />
       </head>
-      <body className="bg-gray-50 antialiased">
-        <main className="min-h-screen">{children}</main>
-      </body>
+      <body>{children}</body>
     </html>
   );
 }

package/templates/basic/src/app/page.tsx

@@ -1,70 +1,29 @@
-import { Link } from "@farm.js/core/client";
-import { FARM_VERSION } from "@farm.js/core/version";
+import { ResourceLinks } from "../components/resource-links";
 
 export default function HomePage() {
   return (
-    <div className="min-h-screen flex items-center justify-center p-8">
-      <div className="max-w-4xl mx-auto text-center space-y-8">
-        <div>
-          <h1 className="text-6xl font-bold mb-4">
-            <span className="bg-gradient-to-r from-blue-600 to-purple-600 bg-clip-text text-transparent">
-              🚜 Welcome to Farm.js v{FARM_VERSION}
-            </span>
-          </h1>
-
-          <p className="text-xl text-gray-600 max-w-2xl mx-auto">
-            A modern React meta-framework built on Vite with Next.js-like semantics
-          </p>
-        </div>
+    <main className="landing-main">
+      <section className="hero-section">
+        <div className="hero-copy">
+          <div className="eyebrow-row">
+            <span>00</span>
+            <span>FARMJS / Basic starter</span>
+          </div>
 
-        <div className="flex gap-4 justify-center flex-wrap">
-          <Link
-            href="/about"
-            className="px-6 py-3 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors font-medium shadow-md hover:shadow-lg"
-          >
-            About Page
-          </Link>
+          <h1>
+            Edit <code>page.tsx</code> to begin.
+          </h1>
 
-          <a
-            href="https://farm.js.dev"
-            target="_blank"
-            rel="noopener noreferrer"
-            className="px-6 py-3 border-2 border-blue-600 text-blue-600 rounded-lg hover:bg-blue-50 transition-colors font-medium"
-          >
-            Documentation
-          </a>
-        </div>
+          <div className="command-list" aria-label="Development command">
+            <div className="command-row">
+              <span>01</span>
+              <code>pnpm dev</code>
+            </div>
+          </div>
 
-        <div className="bg-white rounded-lg shadow-xl p-8 text-left">
-          <h2 className="text-2xl font-bold mb-6 text-gray-900">Features</h2>
-          <ul className="space-y-3">
-            <li className="flex items-start gap-3">
-              <span className="text-2xl">🚀</span>
-              <span className="text-gray-700">Blazing fast development with Vite</span>
-            </li>
-            <li className="flex items-start gap-3">
-              <span className="text-2xl">⚛️</span>
-              <span className="text-gray-700">React Server Components support</span>
-            </li>
-            <li className="flex items-start gap-3">
-              <span className="text-2xl">🎯</span>
-              <span className="text-gray-700">Next.js-like file-based routing</span>
-            </li>
-            <li className="flex items-start gap-3">
-              <span className="text-2xl">🎨</span>
-              <span className="text-gray-700">Tailwind CSS built-in</span>
-            </li>
-            <li className="flex items-start gap-3">
-              <span className="text-2xl">📦</span>
-              <span className="text-gray-700">Zero configuration setup</span>
-            </li>
-            <li className="flex items-start gap-3">
-              <span className="text-2xl">🧪</span>
-              <span className="text-gray-700">AI-friendly code structure</span>
-            </li>
-          </ul>
+          <ResourceLinks className="resource-links" />
         </div>
-      </div>
-    </div>
+      </section>
+    </main>
   );
 }

package/templates/basic/src/components/resource-links.tsx

@@ -0,0 +1,78 @@
+interface ResourceLinkAction {
+  href: string;
+  label: string;
+}
+
+interface ResourceLinksProps {
+  className: string;
+  primary?: ResourceLinkAction;
+}
+
+function DocsIcon() {
+  return (
+    <svg
+      className="resource-icon"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="1.8"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      aria-hidden="true"
+      focusable="false"
+    >
+      <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8Z" />
+      <path d="M14 2v6h6M8 13h8M8 17h6" />
+    </svg>
+  );
+}
+
+function GitHubIcon() {
+  return (
+    <svg
+      className="resource-icon"
+      viewBox="0 0 24 24"
+      fill="currentColor"
+      aria-hidden="true"
+      focusable="false"
+    >
+      <path d="M12 .7a11.5 11.5 0 0 0-3.64 22.41c.58.1.79-.25.79-.56v-2.23c-3.22.7-3.9-1.37-3.9-1.37-.52-1.34-1.28-1.69-1.28-1.69-1.05-.72.08-.7.08-.7 1.16.08 1.77 1.19 1.77 1.19 1.03 1.77 2.7 1.26 3.36.96.1-.75.4-1.26.73-1.55-2.57-.29-5.27-1.29-5.27-5.68 0-1.26.45-2.28 1.18-3.09-.12-.29-.51-1.47.11-3.05 0 0 .96-.31 3.16 1.18A10.95 10.95 0 0 1 12 6.1c.98 0 1.95.13 2.87.39 2.2-1.49 3.16-1.18 3.16-1.18.62 1.58.23 2.76.11 3.05.74.81 1.18 1.83 1.18 3.09 0 4.4-2.71 5.38-5.29 5.67.42.36.79 1.07.79 2.16v3.27c0 .31.21.67.8.56A11.5 11.5 0 0 0 12 .7Z" />
+    </svg>
+  );
+}
+
+function ResourceSeparator() {
+  return (
+    <span className="resource-separator" aria-hidden="true">
+      /
+    </span>
+  );
+}
+
+export function ResourceLinks({ className, primary }: ResourceLinksProps) {
+  return (
+    <nav className={className} aria-label="Starter resources">
+      {primary ? (
+        <span className="resource-link-item">
+          <a className="resource-link-primary" href={primary.href}>
+            {primary.label}
+          </a>
+        </span>
+      ) : null}
+      <span className="resource-link-item">
+        {primary ? <ResourceSeparator /> : null}
+        <a href="https://farmjs.dev">
+          <DocsIcon />
+          <span>Docs</span>
+        </a>
+      </span>
+      <span className="resource-link-item">
+        <ResourceSeparator />
+        <a href="https://github.com/farming-labs/farm.js">
+          <GitHubIcon />
+          <span>GitHub</span>
+        </a>
+      </span>
+    </nav>
+  );
+}

package/templates/better-auth/.env.example

@@ -0,0 +1,3 @@
+BETTER_AUTH_URL=http://localhost:3000
+BETTER_AUTH_SECRET=replace-with-a-random-secret-at-least-32-characters
+DATABASE_URL=postgresql://user:password@your-neon-pooler-host/database?sslmode=require

package/templates/better-auth/README.md

@@ -0,0 +1,87 @@
+# FARMJS Better Auth Starter
+
+A standalone authentication starter built with FARMJS, Better Auth, React, and Neon Postgres.
+
+This project was generated from the Better Auth template included with `@farm.js/create-app`.
+
+## Included
+
+- email and password sign-up and sign-in
+- Better Auth session cookies
+- a server-middleware-protected `/dashboard`
+- pooled Postgres persistence and automatic Better Auth migrations
+- a dark-first, one-page welcome screen set in Geist Sans and Geist Mono
+- pending, error, unauthorized, loading, and not-found states
+- responsive starter UI
+- exact FARMJS beta dependencies for reproducible installs
+
+## Quick start
+
+```bash
+pnpm create @farm.js/app@beta my-app --template better-auth --typescript
+cd my-app
+cp .env.example .env.local
+```
+
+Generate a secret and place it in `BETTER_AUTH_SECRET`:
+
+```bash
+openssl rand -base64 32
+```
+
+Then install and start the app:
+
+```bash
+pnpm install
+pnpm dev
+```
+
+Open [http://localhost:3000](http://localhost:3000), create an account, and continue to the protected dashboard.
+
+## How it is wired
+
+- [`src/lib/auth.ts`](./src/lib/auth.ts) creates the Better Auth instance, configures the pooled
+  Postgres connection, and runs programmatic migrations.
+- [`farm.config.ts`](./farm.config.ts) mounts that instance through `@farm.js/better-auth`.
+- [`src/lib/auth-client.ts`](./src/lib/auth-client.ts) exposes the browser client.
+- [`src/lib/session.ts`](./src/lib/session.ts) resolves the current request session on the server.
+- [`src/app/dashboard/middleware.ts`](./src/app/dashboard/middleware.ts) redirects unauthenticated requests before the dashboard route runs.
+- [`src/app/dashboard/page.tsx`](./src/app/dashboard/page.tsx) reads the already-authorized session and renders the account UI.
+
+FARMJS owns the catch-all integration route, so the starter does not need a manual API route:
+
+```text
+/api/auth/[...auth]
+```
+
+## Environment
+
+| Variable             | Purpose                                   |
+| -------------------- | ----------------------------------------- |
+| `BETTER_AUTH_URL`    | Public origin used by Better Auth         |
+| `BETTER_AUTH_SECRET` | Secret used to sign and encrypt auth data |
+| `DATABASE_URL`       | Pooled Postgres connection string         |
+
+Never commit `.env.local` or expose the database connection string.
+
+## Deployment note
+
+The starter uses `pg` with a small connection pool suitable for a pooled Neon endpoint. Add
+`DATABASE_URL`, `BETTER_AUTH_SECRET`, and the production `BETTER_AUTH_URL` to your deployment
+environment before building.
+
+The FARMJS deployment target is configured in [`farm.config.ts`](./farm.config.ts) for Vercel.
+
+## Commands
+
+```bash
+pnpm dev         # start the development server
+pnpm type-check  # run TypeScript checks
+pnpm build       # create the production build
+pnpm check       # type-check and build
+pnpm run deploy -- --prod  # deploy the prebuilt Farm output to Vercel
+```
+
+## License
+
+MIT

package/templates/better-auth/farm.config.ts

@@ -0,0 +1,32 @@
+import { defineConfig } from "@farm.js/core";
+import { betterAuth } from "@farm.js/better-auth";
+import { auth } from "./src/lib/auth.ts";
+
+export default defineConfig({
+  srcDir: "src",
+  theme: {
+    default: "dark",
+  },
+  experimental: {
+    serverComponents: true,
+  },
+  vite: {
+    server: {
+      port: 3000,
+      strictPort: true,
+    },
+  },
+  integrations: {
+    auth: betterAuth({
+      instance: auth,
+      log(event) {
+        if (process.env.NODE_ENV !== "production") {
+          console.log("[better-auth]", event.phase, event.route?.path ?? "request");
+        }
+      },
+    }),
+  },
+  deploy: {
+    target: "vercel",
+  },
+});

package/templates/better-auth/gitignore

@@ -0,0 +1,10 @@
+node_modules
+.farm
+.vercel
+.data
+.env
+.env.local
+.env.*.local
+dist
+*.log
+.DS_Store

package/templates/better-auth/package.json

@@ -0,0 +1,34 @@
+{
+  "name": "farmjs-better-auth-starter",
+  "version": "0.1.0",
+  "private": true,
+  "scripts": {
+    "dev": "farm dev",
+    "build": "farm build",
+    "check": "pnpm type-check && pnpm build",
+    "deploy": "farm deploy",
+    "start": "farm start",
+    "type-check": "tsc --noEmit"
+  },
+  "dependencies": {
+    "@farm.js/better-auth": "0.1.0-beta.23",
+    "@farm.js/core": "0.1.0-beta.23",
+    "@fontsource-variable/geist": "5.3.0",
+    "@fontsource-variable/geist-mono": "5.3.0",
+    "better-auth": "1.6.25",
+    "better-call": "1.3.7",
+    "pg": "8.22.0",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0"
+  },
+  "devDependencies": {
+    "@farm.js/cli": "0.1.0-beta.23",
+    "@types/node": "20.19.9",
+    "@types/pg": "8.20.0",
+    "@types/react": "^19.0.0",
+    "@types/react-dom": "^19.0.0",
+    "tailwindcss": "^4.0.0",
+    "typescript": "^5.3.3"
+  },
+  "packageManager": "pnpm@11.18.0"
+}

package/templates/better-auth/pnpm-workspace.yaml

@@ -0,0 +1,13 @@
+packages:
+  - "."
+
+allowBuilds:
+  "@prisma/client": true
+  esbuild: true
+  sharp: true
+  vue-demi: true
+minimumReleaseAgeExclude:
+  - "@farm.js/better-auth"
+  - "@farm.js/cli"
+  - "@farm.js/core"
+  - "@farm.js/integration-utils"

package/templates/better-auth/src/app/dashboard/middleware.ts

@@ -0,0 +1,15 @@
+import { auth } from "../../lib/auth";
+
+export const config = {
+  runtime: "nodejs" as const,
+};
+
+export async function middleware(request: Request) {
+  const session = await auth.api.getSession({
+    headers: request.headers,
+  });
+
+  if (!session?.user) {
+    return Response.redirect(new URL("/sign-in", request.url), 307);
+  }
+}