@farm.js/create-app 0.1.0-beta.3 → 0.1.0-beta.31

package/templates/_renderers/svelte/src/lib/api-client.ts

@@ -0,0 +1,4 @@
+import { createAPIClient } from "@farm.js/core/client";
+import type { APIRouter } from "./api.generated";
+
+export const api = createAPIClient<APIRouter>();

package/templates/_renderers/svelte/src/lib/api.generated.ts

@@ -0,0 +1,7 @@
+import type { POST as POST_greeting } from "../app/api/greeting/route";
+
+export type APIRouter = {
+  greeting: {
+    post: typeof POST_greeting;
+  };
+};

package/templates/_renderers/svelte/tsconfig.json

@@ -0,0 +1,23 @@
+{
+  "compilerOptions": {
+    "target": "ES2020",
+    "useDefineForClassFields": true,
+    "lib": ["ES2020", "DOM", "DOM.Iterable"],
+    "module": "ESNext",
+    "skipLibCheck": true,
+    "moduleResolution": "bundler",
+    "baseUrl": ".",
+    "paths": {
+      "@/*": ["./src/*"]
+    },
+    "allowImportingTsExtensions": true,
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "noEmit": true,
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": true
+  },
+  "include": ["src/**/*.ts", "src/**/*.svelte", "farm.config.ts"]
+}

package/templates/_renderers/vue/farm.config.ts

@@ -0,0 +1,12 @@
+import { defineConfig } from "@farm.js/core/config";
+import { vue } from "@farm.js/vue";
+
+export default defineConfig({
+  renderer: vue(),
+  theme: {
+    default: "dark",
+  },
+  deploy: {
+    target: "vercel",
+  },
+});

package/templates/_renderers/vue/package.json

@@ -0,0 +1,27 @@
+{
+  "name": "farm-app",
+  "version": "0.1.0",
+  "private": true,
+  "scripts": {
+    "dev": "farm dev",
+    "build": "farm build",
+    "deploy": "farm deploy",
+    "start": "farm start",
+    "type-check": "vue-tsc --noEmit"
+  },
+  "dependencies": {
+    "@farm.js/core": "0.1.0-beta.31",
+    "@farm.js/vue": "0.1.0-beta.26",
+    "@fontsource-variable/geist": "5.3.0",
+    "@fontsource-variable/geist-mono": "5.3.0",
+    "vue": "3.5.41",
+    "zod": "4.1.12"
+  },
+  "devDependencies": {
+    "@farm.js/cli": "0.1.0-beta.31",
+    "tailwindcss": "^4.0.0",
+    "typescript": "^5.3.3",
+    "vue-tsc": "3.3.9"
+  },
+  "packageManager": "pnpm@8.12.1"
+}

package/templates/_renderers/vue/src/app/api/greeting/route.ts

@@ -0,0 +1,15 @@
+import { createEndpoint } from "@farm.js/core";
+import { z } from "zod";
+
+export const POST = createEndpoint(
+  "/api/greeting",
+  {
+    method: "POST",
+    body: z.object({
+      name: z.string().trim().min(1).max(40),
+    }),
+  },
+  async ({ body }) => ({
+    message: `Hello, ${body.name}, from the FARMJS server.`,
+  }),
+);

package/templates/_renderers/vue/src/app/layout.vue

@@ -0,0 +1,21 @@
+<script lang="ts">
+import type { Metadata } from "@farm.js/core";
+import "./globals.css";
+import "./vue.css";
+
+export const metadata: Metadata = {
+  title: "FARMJS Vue App",
+  description: "A framework for product-integrated apps",
+  icons: {
+    icon: [{ url: "/favicon.svg", type: "image/svg+xml", sizes: "any" }],
+  },
+};
+</script>
+
+<script setup lang="ts">
+defineOptions({ inheritAttrs: false });
+</script>
+
+<template>
+  <slot />
+</template>

package/templates/_renderers/vue/src/app/page.vue

@@ -0,0 +1,69 @@
+<script lang="ts">
+export const hydrate = true;
+</script>
+
+<script setup lang="ts">
+import { ref } from "vue";
+import ResourceLinks from "../components/resource-links.vue";
+import { api } from "../lib/api-client";
+
+defineOptions({ inheritAttrs: false });
+
+const message = ref("Call a typed server function");
+const pending = ref(false);
+const failed = ref(false);
+
+async function callServer() {
+  pending.value = true;
+  failed.value = false;
+  try {
+    const result = await api.greeting.post({
+      body: { name: "Vue" },
+    });
+    if (result.error) throw result.error;
+    if (!result.data) throw new Error("The server returned no greeting");
+    message.value = result.data.message;
+  } catch {
+    failed.value = true;
+    message.value = "Try the server call again";
+  } finally {
+    pending.value = false;
+  }
+}
+</script>
+
+<template>
+  <main class="landing-main">
+    <section class="hero-section">
+      <div class="hero-copy">
+        <div class="eyebrow-row">
+          <span>00</span>
+          <span>FARMJS / Vue starter</span>
+        </div>
+
+        <h1>Edit <code>page.vue</code> to begin.</h1>
+
+        <div class="command-list" aria-label="Getting started">
+          <div class="command-row">
+            <span>01</span>
+            <code>pnpm dev</code>
+          </div>
+          <div class="command-row">
+            <span>02</span>
+            <button
+              type="button"
+              class="server-call"
+              :class="{ 'server-call-error': failed }"
+              :disabled="pending"
+              @click="callServer"
+            >
+              {{ pending ? "Calling…" : message }}
+            </button>
+          </div>
+        </div>
+
+        <ResourceLinks class="resource-links" />
+      </div>
+    </section>
+  </main>
+</template>

package/templates/_renderers/vue/src/app/vue.css

@@ -0,0 +1,26 @@
+.server-call {
+  appearance: none;
+  width: fit-content;
+  border: 0;
+  padding: 0;
+  color: var(--ink);
+  background: transparent;
+  cursor: pointer;
+  font-family: var(--font-mono);
+  font-size: 0.75rem;
+  text-align: left;
+}
+
+.server-call:hover:not(:disabled) {
+  text-decoration: underline;
+  text-underline-offset: 0.25rem;
+}
+
+.server-call:disabled {
+  color: var(--ink-soft);
+  cursor: wait;
+}
+
+.server-call-error {
+  color: #fca5a5;
+}

package/templates/_renderers/vue/src/components/resource-links.vue

@@ -0,0 +1,33 @@
+<template>
+  <nav aria-label="Starter resources">
+    <span class="resource-link-item">
+      <a href="https://farm.js.dev">
+        <svg
+          class="resource-icon"
+          viewBox="0 0 24 24"
+          fill="none"
+          stroke="currentColor"
+          stroke-width="1.8"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+          aria-hidden="true"
+        >
+          <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>
+        <span>Docs</span>
+      </a>
+    </span>
+    <span class="resource-link-item">
+      <span class="resource-separator" aria-hidden="true">/</span>
+      <a href="https://github.com/farming-labs/farm.js">
+        <svg class="resource-icon" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
+          <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>
+        <span>GitHub</span>
+      </a>
+    </span>
+  </nav>
+</template>

package/templates/_renderers/vue/src/env.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="vite/client" />
+
+declare module "*.vue" {
+  import type { DefineComponent } from "vue";
+  const component: DefineComponent<Record<string, never>, Record<string, never>, unknown>;
+  export default component;
+}

package/templates/_renderers/vue/src/lib/api-client.ts

@@ -0,0 +1,4 @@
+import { createAPIClient } from "@farm.js/core/client";
+import type { APIRouter } from "./api.generated";
+
+export const api = createAPIClient<APIRouter>();

package/templates/_renderers/vue/src/lib/api.generated.ts

@@ -0,0 +1,7 @@
+import type { POST as POST_greeting } from "../app/api/greeting/route";
+
+export type APIRouter = {
+  greeting: {
+    post: typeof POST_greeting;
+  };
+};

package/templates/_renderers/vue/tsconfig.json

@@ -0,0 +1,23 @@
+{
+  "compilerOptions": {
+    "target": "ES2020",
+    "useDefineForClassFields": true,
+    "lib": ["ES2020", "DOM", "DOM.Iterable"],
+    "module": "ESNext",
+    "skipLibCheck": true,
+    "moduleResolution": "bundler",
+    "baseUrl": ".",
+    "paths": {
+      "@/*": ["./src/*"]
+    },
+    "allowImportingTsExtensions": true,
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "noEmit": true,
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": true
+  },
+  "include": ["src/**/*.ts", "src/**/*.vue", "farm.config.ts"]
+}

package/templates/auth/.env.example

@@ -0,0 +1,6 @@
+# FARMJS Auth needs no environment variables in local development.
+# Configure these values in the production deployment environment.
+
+# FARM_AUTH_URL=https://your-app.example.com
+# FARM_AUTH_SECRET=replace-with-a-random-secret-at-least-32-characters
+# DATABASE_URL=postgresql://user:password@your-postgres-host/database?sslmode=require

package/templates/auth/README.md

@@ -0,0 +1,95 @@
+# FARMJS Auth Starter
+
+A standalone email/password authentication starter using FARMJS built-in authentication and
+React.
+
+This project was generated from the FARMJS Auth template included with `@farm.js/create-app`.
+
+## Included
+
+- email/password sign-up and sign-in enabled by `auth: true`
+- database-backed, HTTP-only session cookies
+- a server-middleware-protected `/dashboard`
+- `@farm.js/auth/server` request helpers and the `@farm.js/auth/client` React hook
+- automatic local SQLite storage in `.farm/auth.sqlite`
+- production Postgres support through `DATABASE_URL`
+- a dark-first, one-page welcome screen set in Geist Sans and Geist Mono
+- pending, error, unauthorized, loading, and not-found states
+- exact FARMJS beta dependencies for reproducible installs
+
+## Quick start
+
+```bash
+pnpm create @farm.js/app@beta my-app --template auth --typescript
+cd my-app
+pnpm dev
+```
+
+Open [http://localhost:3000](http://localhost:3000), create an account, and continue to the
+protected dashboard. Local development needs no database or auth environment variables; FARMJS Auth
+creates and migrates `.farm/auth.sqlite` when auth is first used.
+
+## How it is wired
+
+- [`farm.config.ts`](./farm.config.ts) enables email/password authentication with `auth: true`.
+- [`src/app/page.tsx`](./src/app/page.tsx) reads the current session with
+  `auth.session()` from `@farm.js/auth/server`.
+- [`src/components/auth-form.tsx`](./src/components/auth-form.tsx) uses the built-in `signIn` and
+  `signUp` client functions.
+- [`src/app/dashboard/middleware.ts`](./src/app/dashboard/middleware.ts) redirects anonymous
+  requests before the dashboard route runs.
+- [`src/app/dashboard/page.tsx`](./src/app/dashboard/page.tsx) uses the built-in `useAuth` React
+  hook to render the current account and session.
+
+FARMJS owns the auth action routes, so the starter does not need an app-local Better Auth instance,
+client factory, database pool, or catch-all API route:
+
+```text
+/api/auth/*
+```
+
+## Production environment
+
+Local development uses safe defaults. Production requires these deployment environment variables:
+
+| Variable           | Purpose                                                     |
+| ------------------ | ----------------------------------------------------------- |
+| `FARM_AUTH_URL`    | Public application origin; inferred automatically on Vercel |
+| `FARM_AUTH_SECRET` | Random secret used to sign and encrypt auth data            |
+| `DATABASE_URL`     | Postgres connection string                                  |
+
+Generate a production secret with:
+
+```bash
+openssl rand -base64 32
+```
+
+Loading `farm.config.ts` and running `farm build` do not connect to the database. Apply the
+production auth schema before serving traffic:
+
+```bash
+pnpm auth:migrate
+```
+
+The FARMJS deployment target is configured in [`farm.config.ts`](./farm.config.ts) for Vercel.
+
+## Advanced authentication
+
+`auth: true` intentionally owns the common email/password path. If an application needs Better Auth
+plugins, adapters, social providers, or callbacks, replace the top-level auth option with an
+app-owned `integrations.auth` configuration using `@farm.js/better-auth`.
+
+## Commands
+
+```bash
+pnpm dev          # start the development server
+pnpm type-check   # run TypeScript checks
+pnpm build        # create the production build without connecting to the database
+pnpm check        # type-check and build
+pnpm auth:migrate # apply the production auth schema
+pnpm run deploy -- --prod
+```
+
+## License
+
+MIT

package/templates/auth/farm.config.ts

@@ -0,0 +1,14 @@
+import { defineConfig } from "@farm.js/core";
+
+export default defineConfig({
+  auth: true,
+  theme: {
+    default: "dark",
+  },
+  experimental: {
+    serverComponents: true,
+  },
+  deploy: {
+    target: "vercel",
+  },
+});

package/templates/auth/gitignore

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

package/templates/auth/package.json

@@ -0,0 +1,32 @@
+{
+  "name": "farmjs-auth-starter",
+  "version": "0.1.0",
+  "private": true,
+  "scripts": {
+    "dev": "farm dev",
+    "build": "farm build",
+    "auth:migrate": "farm auth migrate",
+    "check": "pnpm type-check && pnpm build",
+    "deploy": "farm deploy",
+    "start": "farm start",
+    "type-check": "tsc --noEmit"
+  },
+  "dependencies": {
+    "@farm.js/auth": "0.1.0-beta.31",
+    "@farm.js/core": "0.1.0-beta.31",
+    "@fontsource-variable/geist": "5.3.0",
+    "@fontsource-variable/geist-mono": "5.3.0",
+    "better-call": "1.3.2",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0"
+  },
+  "devDependencies": {
+    "@farm.js/cli": "0.1.0-beta.31",
+    "@types/node": "20.19.9",
+    "@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/auth/pnpm-workspace.yaml

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

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

@@ -0,0 +1,13 @@
+import { auth } from "@farm.js/auth/server";
+
+export const config = {
+  runtime: "nodejs" as const,
+};
+
+export async function middleware(request: Request) {
+  const user = await auth.user({ request });
+
+  if (!user) {
+    return Response.redirect(new URL("/sign-in", request.url), 307);
+  }
+}

package/templates/auth/src/app/dashboard/page.tsx

@@ -0,0 +1,140 @@
+"use client";
+
+import { useAuth } from "@farm.js/auth/client";
+import { useEffect } from "react";
+import { SignOutButton } from "../../components/sign-out-button";
+import { SiteHeader } from "../../components/site-header";
+
+export default function DashboardPage() {
+  const { isPending, session, user } = useAuth();
+
+  useEffect(() => {
+    if (!isPending && !user) {
+      window.location.replace("/sign-in");
+    }
+  }, [isPending, user]);
+
+  if (isPending) {
+    return (
+      <main className="loading-shell" aria-label="Loading account" aria-live="polite">
+        <div className="loading-block">
+          <span className="loading-label">Verifying protected session</span>
+          <div className="loading-line wide" />
+          <div className="loading-line" />
+          <div className="loading-grid">
+            <div />
+            <div />
+          </div>
+        </div>
+      </main>
+    );
+  }
+
+  if (!user || !session) {
+    return (
+      <main className="loading-shell" aria-label="Returning to sign in" aria-live="polite">
+        <div className="loading-block">
+          <span className="loading-label">Session unavailable</span>
+          <p className="loading-message">Returning you to the sign-in page…</p>
+        </div>
+      </main>
+    );
+  }
+
+  const createdAt = new Date(user.createdAt).toLocaleDateString("en", {
+    day: "numeric",
+    month: "short",
+    year: "numeric",
+  });
+  const expiresAt = new Date(session.expiresAt).toLocaleString("en", {
+    day: "numeric",
+    hour: "2-digit",
+    minute: "2-digit",
+    month: "short",
+  });
+
+  return (
+    <div className="site-frame">
+      <SiteHeader user={user} />
+
+      <main className="dashboard-shell">
+        <div className="dashboard-heading">
+          <div>
+            <span className="section-index">PROTECTED / MIDDLEWARE VERIFIED</span>
+            <h1>Welcome back, {user.name}.</h1>
+            <p>Farm route middleware verified your session before this dashboard loaded.</p>
+          </div>
+          <SignOutButton />
+        </div>
+
+        <section className="dashboard-grid" aria-label="Account overview">
+          <article className="account-panel">
+            <div className="panel-heading">
+              <span>Account</span>
+              <span className="status-badge">
+                <span className="status-dot" aria-hidden="true" />
+                Active
+              </span>
+            </div>
+            <dl className="detail-list">
+              <div>
+                <dt>Name</dt>
+                <dd>{user.name}</dd>
+              </div>
+              <div>
+                <dt>Email</dt>
+                <dd>{user.email}</dd>
+              </div>
+              <div>
+                <dt>Created</dt>
+                <dd>{createdAt}</dd>
+              </div>
+            </dl>
+          </article>
+
+          <article className="session-panel">
+            <div className="panel-heading">
+              <span>Current session</span>
+              <code>httpOnly cookie</code>
+            </div>
+            <dl className="detail-list">
+              <div>
+                <dt>Session ID</dt>
+                <dd className="mono truncate">{session.id}</dd>
+              </div>
+              <div>
+                <dt>Expires</dt>
+                <dd>{expiresAt}</dd>
+              </div>
+              <div>
+                <dt>Storage</dt>
+                <dd>SQLite locally / Postgres in production</dd>
+              </div>
+            </dl>
+          </article>
+        </section>
+
+        <section className="next-steps" aria-labelledby="next-steps-title">
+          <div className="section-heading compact">
+            <span className="section-index">NEXT / MAKE IT YOURS</span>
+            <h2 id="next-steps-title">The account boundary is ready for product work.</h2>
+          </div>
+          <div className="next-step-list">
+            <div>
+              <span>01</span>
+              <p>Set the production FARMJS Auth URL, secret, and database URL in your host.</p>
+            </div>
+            <div>
+              <span>02</span>
+              <p>Run the FARMJS Auth migration command before serving production traffic.</p>
+            </div>
+            <div>
+              <span>03</span>
+              <p>Build your first protected feature beside this dashboard route.</p>
+            </div>
+          </div>
+        </section>
+      </main>
+    </div>
+  );
+}

package/templates/auth/src/app/error.tsx

@@ -0,0 +1,25 @@
+"use client";
+
+import type { ErrorProps } from "@farm.js/core";
+
+export default function ErrorBoundary({ error, reset }: ErrorProps) {
+  const message = error instanceof Error ? error.message : "An unexpected error occurred.";
+
+  return (
+    <main className="error-shell">
+      <section className="error-panel">
+        <span className="section-index">ERROR / RECOVERABLE</span>
+        <h1>That route did not finish loading.</h1>
+        <p>{message}</p>
+        <div className="hero-actions">
+          <button className="button button-primary" onClick={reset} type="button">
+            Try again
+          </button>
+          <a className="button button-secondary" href="/">
+            Return home
+          </a>
+        </div>
+      </section>
+    </main>
+  );
+}