# @editframe/dev-server

Framework-agnostic Editframe dev media server. Handles JIT video transcoding, asset serving, local file APIs, and URL signing for local development — without requiring cloud API calls.

Used internally by `@editframe/vite-plugin` and `@editframe/nextjs-plugin`. Use this package directly when integrating Editframe into other build tools (Webpack, Rspack, custom Node.js servers, etc.).

## Install

```sh
npm install --save-dev @editframe/dev-server
```

## Usage

### Mounting onto a Connect/Express server

```ts
import connect from "connect";
import { createServer } from "http";
import {
  createEditframeRouter,
  createProdEfHandlers,
} from "@editframe/dev-server";
import {
  generateTrack,
  generateScrubTrack,
  generateTrackFragmentIndex,
  cacheImage,
  findOrCreateCaptions,
  md5FilePath,
} from "@editframe/assets";
import { Client, createURLToken } from "@editframe/api";

const app = connect();

app.use(
  createEditframeRouter(
    { root: "./src", cacheRoot: "./cache" },
    { generateTrack, generateScrubTrack, generateTrackFragmentIndex, cacheImage, findOrCreateCaptions, md5FilePath },
    createProdEfHandlers({
      createURLToken,
      getClient: () => new Client(process.env.EF_TOKEN),
    }),
  ),
);

createServer(app).listen(3001);
```

### Standalone sidecar server

```ts
import { createEditframeDevServer, createProdEfHandlers } from "@editframe/dev-server";
import { generateTrack, generateScrubTrack, generateTrackFragmentIndex, cacheImage, findOrCreateCaptions, md5FilePath } from "@editframe/assets";
import { Client, createURLToken } from "@editframe/api";

const server = createEditframeDevServer(
  { root: "./src", cacheRoot: "./cache" },
  { generateTrack, generateScrubTrack, generateTrackFragmentIndex, cacheImage, findOrCreateCaptions, md5FilePath },
  createProdEfHandlers({
    createURLToken,
    getClient: () => new Client(process.env.EF_TOKEN),
  }),
);

server.listen(3001, () => {
  console.log("Editframe dev server running on http://localhost:3001");
});
```

### HTML injection helper

```ts
import { injectApiHostScript } from "@editframe/dev-server";

const html = injectApiHostScript(originalHtml, "http://localhost:3001");
```

## API Routes

| Route | Description |
|---|---|
| `GET /api/v1/transcode/manifest.json?url=` | JIT transcode manifest |
| `GET /api/v1/transcode/{rendition}/init.m4s?url=` | Init segment |
| `GET /api/v1/transcode/{rendition}/{segmentId}.m4s?url=` | Media segment |
| `GET /api/v1/assets/image?src=` | Image proxy/cache |
| `GET /api/v1/assets/captions?src=` | Whisper caption generation |
| `GET /api/v1/files/index?src=` | Fragment index |
| `GET /api/v1/files/md5?src=` | MD5 of a local file |
| `GET /api/v1/files/track?src=&trackId=` | Raw track file |
| `DELETE /@ef-clear-cache` | Clear transcoding cache |
| `POST /@ef-sign-url` | Sign a playback URL |

See the [documentation](https://editframe.com/docs/cli/dev-server) and the [dev-server skill](https://editframe.com/skills/dev-server.md) for usage.