# effective-rsc documentation
Build Server Components and Server Functions with React, Schema, and Effect. These docs assume
familiarity with React and Effect; start with Getting started for a working application.
Define your application in `src/application.tsx`. Create its Pages, Layouts, Routes, and Server
Functions from one `Application.ersc()` instance, then export `ERSC.make(...)`.
Import authoring APIs from `effective-rsc` in server modules. Client Components use
`effective-rsc/client` for Server Function queries and streams. The package root cannot be imported
by Client Components.
## Getting started
Install Bun 1.4 or newer, then create an application with compatible dependencies and Tailwind:
```sh
bunx create-ersc-app my-application
cd my-application
bun run dev
```
Open `http://localhost:18193`. Omit the directory to use the interactive prompt; pass `--no-install`
to install dependencies yourself.
The application entry is `src/application.tsx`. It defines a root Layout containing the HTML
document, attaches Pages to Routes, and exports `ERSC.make(...)`. Other filenames are yours to choose.
### Styles and assets
Import CSS from the module that uses it. The starter's `src/styles.css` includes Tailwind; plain CSS
works too. Imported images, fonts, and media resolve to built asset URLs. Reference
`effective-rsc/types` in `src/environment.d.ts` so TypeScript recognizes these imports.
Files in `public/` are served from `/`.
### Production
```sh
bun run check
bun run build
bun run start
```
Both `ersc dev` and `ersc start` accept `--hostname` and `--port`. Flags override `HOST` and `PORT`;
defaults are `localhost` and `18193`.
### A minimal application
Define a root Layout and Page, then export the application with ERSC.make.
```tsx
import { Effect } from 'effect';
import { Application } from 'effective-rsc';
const ERSC = Application.ersc();
const RootLayout = ERSC.Layout.make({
render: ({ children }) =>
Effect.succeed(
{children}
,
),
});
const HomePage = ERSC.Page.make({
render: () => Effect.succeed(Hello from effective-rsc
),
});
export default ERSC.make({
routes: ERSC.Routes.make({ layout: RootLayout }).page('/', HomePage),
});
```
### More examples
- **[Importing styles](./docs/01-getting-started/20_styling.tsx)**: Import styles from the module that uses them.
## Manual installation
Create a Bun package and install the framework with its exact compatible peers:
```sh
mkdir my-effective-rsc-app
cd my-effective-rsc-app
bun init -y
bun add effective-rsc@0.1.4 \
effect@4.0.0-rc.113 \
@effect/platform-browser@4.0.0-rc.113 \
@effect/platform-bun@4.0.0-rc.113 \
react@19.3.0-canary-1d34f91d-20260909 \
react-dom@19.3.0-canary-1d34f91d-20260909 \
react-server-dom-rspack@0.1.0
bun add --dev \
typescript@7.0.2 \
@types/bun@^1.4.2 \
@types/react@19.3.0 \
@types/react-dom@19.3.0
```
Add the framework commands to `package.json`:
```json
{
"type": "module",
"scripts": {
"dev": "ersc dev",
"check": "tsc --noEmit",
"build": "ersc build",
"start": "ersc start"
}
}
```
Create `tsconfig.json`:
```json
{
"compilerOptions": {
"target": "ESNext",
"module": "ESNext",
"moduleResolution": "Bundler",
"jsx": "react-jsx",
"noEmit": true,
"strict": true,
"erasableSyntaxOnly": true,
"exactOptionalPropertyTypes": true,
"noUncheckedIndexedAccess": true,
"noUncheckedSideEffectImports": true,
"types": ["bun", "react", "react-dom", "react/canary"],
"lib": ["ESNext", "DOM", "DOM.Iterable"]
},
"include": ["src"]
}
```
Create `src/environment.d.ts` so TypeScript accepts stylesheet and asset imports:
```ts
///
```
Create `src/application.tsx` using the minimal application example, then run `bun run dev`.
To add Tailwind, install `tailwindcss@4.3.3` as a dev dependency and put
`@import 'tailwindcss';` in an imported stylesheet.
Keep the framework and its peers on a compatible release set when upgrading; the scaffold template
ships that set together.
## Guides
Familiarity with React Server Components and Effect is assumed.
## Server Functions
Export `ERSC.ServerFn.make({ input, handler })` from a module marked `'use server'`. `input` is a
Schema; `handler` returns an Effect and can use application services. Callers pass the Schema's
encoded type, and the handler receives its decoded type. Let the Schema infer handler parameters.
### Forms and mutations
Use `Schema.fromFormData(...)` for form input and return `void` to pass a function directly to
`