f2e-server

2.20.13 verified Sat Apr 25 auth: no javascript maintenance

f2e-server 2 (v2.20.13) is a front-end development server with built-in support for Less compilation, Babel transpilation, live reload, and middleware-based plugin architecture. It provides CLI commands for starting a dev server (`f2e start`), building to output (`f2e build`), and generating config files (`f2e conf`). Unlike heavyweight dev servers like webpack-dev-server, f2e-server focuses on simplicity and runtime-build with proxy capabilities. It ships with TypeScript type definitions but is primarily configured via CommonJS config files. The project has been updated infrequently (last release likely 2021-2022) and may lack modern features like HMR or ESM native support. The server auto-detects ports starting from 2850 and supports HTTPS and custom hostnames. It is suitable for lightweight front-end projects that need a quick development environment with minimal configuration.

Common errors

error Error: listen EADDRINUSE :::2850 ↓

cause Port 2850 already in use.

fix

Start with a specific port: f2e start -p 2851

error Cannot find module 'marked' ↓

cause Marked is not installed but used in middleware.

fix

Install marked: npm install marked --save-dev

error TypeError: store._set is not a function ↓

cause Using store._set outside of onSet hook; store is only available in onSet.

fix

Use store._set only inside onSet handler.

error f2e: command not found ↓

cause f2e-server is not installed globally or not in PATH.

fix

Install globally: npm install -g f2e-server

Warnings

breaking f2e-server v2.x configuration is not compatible with v1.x. Middleware signature changed from (req, resp) to (conf). ↓

fix Update middleware to return an object and use conf parameter.

deprecated The 'request' package used in examples is deprecated and will not receive security updates. ↓

fix Replace with 'node-fetch' or 'axios' in your middleware.

gotcha If you omit 'return false' from onRoute, the request will continue to other middlewares and may cause double response. ↓

fix Always return false from onRoute if you are handling the response yourself.

gotcha The 'no_host' option is set to false by default. If you set a host in the config, requests that don't match the host header will be ignored. ↓

fix Set 'no_host: true' if you want to ignore host header and serve all requests.

Install

npm install f2e-server

yarn add f2e-server

pnpm add f2e-server

Imports

f2e server (CLI)
wrong
```
npm start
```
correct
```
npx f2e start
```
CLI is invoked via 'f2e' command, not npm scripts. Install globally or use npx.
Default config export
wrong
```
export default { ... }
```
correct
```
module.exports = { ... }
```
Config is CommonJS, not ESM. Use module.exports.
Middleware function
wrong
```
function middleware(conf) { } // missing return object
```
correct
```
(conf) => { return { onRoute, onSet, ... }; }
```
Middleware must return an object with lifecycle hooks. Forgetting the return object breaks server.

babel _rules

wrong

useBabel: { _rules: [ { only: ['file.js'] } ] } // missing getModuleId

correct

useBabel: { _rules: [ { only: ['file.js'], getModuleId: ... } ] }

Each rule requires 'getModuleId' function. Without it, rule may be ignored.

Quickstart

Basic f2e-server configuration file with live reload, Less, Babel, and a middleware that proxies ES6 routes and compiles Markdown to HTML.

// .f2econfig.js
const path = require('path');
module.exports = {
  livereload: true,
  useLess: { compress: false },
  useBabel: { getModuleId: p => p.replace(/\\+/g, '/') },
  gzip: true,
  range_size: 1024 * 1024,
  middlewares: [
    (conf) => {
      return {
        onRoute(pathname, req, resp, memory) {
          if (pathname.match(/^es6/)) {
            const request = require('request');
            request(pathname.replace('es6', 'http://es6.ruanyifeng.com')).pipe(resp);
            return false;
          }
        },
        onSet(pathname, data, store) {
          if (pathname.match(/\.md$/)) {
            const res = require('marked')(data.toString());
            store._set(pathname.replace(/\.md$/, '.html'), res);
          }
        },
        buildWatcher(eventType, pathname, build) {
          console.log(new Date().toLocaleString(), eventType, pathname);
        }
      };
    }
  ]
}