Introduction to Farm.js
Relevant source files
The following files were used as context for generating this wiki page:
Farm.js is a full-stack web framework designed for building product-integrated applications. It combines the instant development experience of Vite with a typed application directory routing system, React Server Components (RSC), and streaming Server-Side Rendering (SSR). The framework outputs production-ready code through Nitro-powered adapters, supporting deployment targets like Vercel and Cloudflare.
The framework emphasizes fast feedback loops, predictable full-stack boundaries, and typed conventions. While React is the default renderer, Farm.js provides adapters for Preact, Solid, Vue, and Svelte, maintaining consistent routing and server contracts across different UI libraries.
Sources: README.md:9-16, AGENTS.md:3-5, ARCHITECTURE.md:88-105
Core Architecture
Farm.js operates as a monorepo containing multiple packages that provide a unified framework experience. The architecture centers on the integration between a Vite-powered development server and a Nitro-backed production runtime.
High-Level Component Interaction
The diagram below illustrates how developer tools, routing, and rendering systems interact within the framework.
The Farm.js architecture connects the CLI and Vite plugin to a centralized Route Manager and Server Renderer to handle RSC and hydration.
Sources: ARCHITECTURE.md:8-25, ARCHITECTURE.md:43-58
Package Structure
Farm.js organizes its functionality into specific core packages:
| Package | Purpose |
|---|---|
packages/farm | Core framework containing routing, RSC rendering, and Vite integration. |
packages/farm-cli | Command-line interface for dev, build, and scaffolding. |
packages/create-farm-app | Project scaffolding tool with interactive templates. |
packages/farm-react | Default React renderer and experimental AOT compiler. |
Sources: ARCHITECTURE.md:30-58, README.md:292-310
Key Features
Farm.js provides several primitives for full-stack development, including typed routing and data mutations.
File-Based Routing
The framework uses a directory-based routing system similar to the Next.js App Router. Routes are defined by the file system structure within the src/app directory.
layout.tsx: Defines shared UI for a route segment.page.tsx: Defines the unique UI for a route.loading.tsx: Provides a Suspense fallback UI for the segment.error.tsx: Defines an error boundary for the segment.
Sources: README.md:144-155, skills/farmjs/SKILL.md:46-56, examples/basic/README.md:95-103
Server Components and Actions
Farm.js enables React Server Components by default, allowing developers to write server-only logic directly in components. Mutations are handled via Server Actions using the "use server" directive.
// Example Server Component
export default async function BlogPost({ params }: { params: { slug: string } }) {
const post = await getPostFromDatabase(params.slug);
return (
<article>
<h1>{post.title}</h1>
<p>{post.content}</p>
</article>
);
}
Sources: README.md:231-242, README.md:73-74
Request Flow
The request flow differs between development and production environments to optimize for speed and reliability respectively.
Execution Lifecycle
The sequence shows the transition from route matching to server rendering and final client-side hydration.
Sources: ARCHITECTURE.md:71-84, README.md:70-72
Configuration
Applications are configured via farm.config.ts using the defineConfig utility. This configuration controls deployment targets, experimental features, and integrations.
| Option | Description |
|---|---|
deploy.target | Specifies the output format (e.g., "vercel"). |
experimental.serverComponents | Enables the RSC rendering pipeline. |
renderer | Selects the UI adapter (React, Vue, Solid, etc.). |
md.expose | Lists routes to expose as markdown mirrors for AI agents. |
Sources: README.md:104-108, examples/basic/README.md:37-56, skills/farmjs/SKILL.md:86-114
Summary
Farm.js is a full-stack framework that prioritizes developer experience through Vite and application robustness through React Server Components and Nitro. By maintaining a renderer-neutral core, it allows developers to utilize various UI libraries while benefiting from a unified routing and deployment model. The framework is specifically built to support modern product requirements, including AI-friendly markdown mirrors and secure server-side mutations.
Sources: README.md:9-12, AGENTS.md:3-8