OCPP WS UI
Framework Integration
Integrate ocpp-ws-board with Express, Hono, or NestJS using built-in adapters.
Framework Integration
ocpp-ws-board provides first-class adapters for popular Node.js frameworks. Choose the one that matches your backend.
Express / Connect
Installation
npm install express ocpp-ws-boardBasic Setup
import express from "express";
import { OCPPServer } from "ocpp-ws-io";
import { expressAdapter } from "ocpp-ws-board";
const app = express();
const server = new OCPPServer({ protocols: ["ocpp1.6"] });
// Create board with Express adapter
const { handler, plugin } = expressAdapter({
auth: { mode: "token", token: "secret" },
});
// Attach plugin to OCPP server
server.plugin(plugin);
// Mount board at /board path
app.use("/board", handler);
// Start servers
server.listen(5000);
app.listen(9000, () => {
console.log("Dashboard: http://localhost:9000/board");
});Hono
Installation
npm install hono ocpp-ws-boardBasic Setup
import { Hono } from "hono";
import { OCPPServer } from "ocpp-ws-io";
import { honoAdapter } from "ocpp-ws-board";
const app = new Hono();
const server = new OCPPServer({ protocols: ["ocpp1.6"] });
// Create board with Hono adapter
const { subApp, plugin } = honoAdapter({
auth: { mode: "token", token: "secret" },
});
// Attach plugin
server.plugin(plugin);
// Mount at /board
app.route("/board", subApp);
// Start servers
server.listen(5000);
Bun.serve({ fetch: app.fetch, port: 9000 });
console.log("Dashboard: http://localhost:9000/board");NestJS
Installation
npm install @nestjs/common @nestjs/core ocpp-ws-boardBasic Setup
import { Module } from "@nestjs/common";
import { BoardModule } from "ocpp-ws-board/nest";
@Module({
imports: [
BoardModule.register({
auth: { mode: "token", token: "secret" },
}),
],
})
export class AppModule {}Using the Main createBoard Function
If you prefer not to use adapters, you can use the createBoard() function directly:
import { createBoard } from "ocpp-ws-board";
const board = createBoard({
auth: { mode: "token", token: "secret" },
});
// Returns:
// - board.app: Hono app (REST API + static files)
// - board.plugin: OCPP plugin
// - board.store: In-memory store
// - board.cleanup(): Cleanup functionManual Mounting
// With Express
import { createNodeMiddleware } from "@hono/node-server";
app.use("/board", createNodeMiddleware(board.app));
// With Fastify
import fastifyHttpProxy from "@fastify/http-proxy";
fastify.register(fastifyHttpProxy, {
upstream: "http://localhost:3001", // board.app port
prefix: "/board",
});Configuration Options
| Option | Type | Default | Description |
|---|---|---|---|
auth | BoardAuthConfig | Required | Authentication configuration |
store | StoreOptions | {} | Ring buffer sizes |
sseHeartbeatMs | number | 15000 | SSE keepalive interval |
Store Options
interface StoreOptions {
maxMessages?: number; // Default: 5000
maxProxyEvents?: number; // Default: 1000
maxSmartChargeHistory?: number; // Default: 500
}Next Steps
- API Reference — Complete REST API documentation
- Architecture — Internal architecture and data flow
- Quick Start — Get started with the dashboard