@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

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

Usage

Mounting onto a Connect/Express server

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", handleRemoteUrls: true },
    { generateTrack, generateScrubTrack, generateTrackFragmentIndex, cacheImage, findOrCreateCaptions, md5FilePath },
    createProdEfHandlers({
      createURLToken,
      getClient: () => new Client(process.env.EF_TOKEN),
    }),
  ),
);

createServer(app).listen(3001);

Standalone sidecar server

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", handleRemoteUrls: true },
  { 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

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 |