npx electron-rebuild

Project setup

1. Copy the source/ directory into your project root, e.g. ./cncjs-src/.

2. Add Babel config to handle JSX, ESM import syntax, and .styl stylus files:

{
  "presets": ["@babel/preset-env", "@babel/preset-react"],
  "plugins": ["@babel/plugin-transform-modules-commonjs"]
}

3. Add path aliases in your bundler (webpack/vite) so app/ imports resolve:

{
  "resolve": {
    "alias": {
      "app": "<rootDir>/cncjs-src/app"
    }
  }
}

4. For TypeScript projects, add to tsconfig.json:

{
  "compilerOptions": {
    "paths": {
      "app/*": ["./cncjs-src/app/*"]
    },
    "allowJs": true,
    "jsx": "react"
  }
}

5. Set required environment variables before starting the server:

export NODE_ENV=production
export SECRET=your_jwt_secret_here
export PORT=8000

6. To launch only the HTTP server (no Electron):

node cncjs-src/server-cli.js --port 8000

Public API

signin

function signin(options: {
  token?: string;
  name?: string;
  password?: string;
}): Promise<superagent.Response>

Sends a POST to /api/signin with credentials or a pre-existing JWT token. Use this as the first call when bootstrapping a custom UI: store the returned token in session state and attach it to all subsequent requests via the bearer middleware already wired into authrequest.

getLatestVersion

function getLatestVersion(): Promise<superagent.Response>

Sends an authenticated GET to /api/version/latest. Use this to display upgrade notices in a custom dashboard. The authrequest instance automatically injects Authorization: Bearer <token> from the Redux store and appends a cache-busting timestamp to the query string.

authrequest (the superagent instance)

const authrequest: superagent.SuperAgentStatic
// .use(bearer) — attaches Authorization header from store.session.token
// .use(noCache) — sets Cache-Control: no-cache and appends _ timestamp on GET/HEAD

The configured superagent instance exported implicitly via all API functions. Import individual API methods from app/api/index.js; they all share this single instance. Use it when adding custom API endpoints that must carry the same auth and cache-control headers.

Working examples

Scenario - Authenticate and fetch server version

Authenticate with username/password, save the token, then poll the latest version endpoint.

import api from './cncjs-src/app/api/index.js';
import store from './cncjs-src/app/store/index.js';

async function init() {
  try {
    const res = await api.signin({ name: 'admin', password: 'secret' });
    const token: string = res.body.token;
    store.set('session.token', token);

    const versionRes = await api.getLatestVersion();
    console.log('Latest CNCjs version:', versionRes.body.version);
  } catch (err) {
    console.error('Auth or version fetch failed:', err);
  }
}

init();

Scenario - Render the React app inside an existing layout

Mount the CNCjs React UI into a div within a larger React application.

import React from 'react';
import ReactDOM from 'react-dom';
import { HashRouter as Router, Route } from 'react-router-dom';
import { Provider as GridSystemProvider } from './cncjs-src/app/components/GridSystem';
import App from './cncjs-src/app/containers/App';
import ProtectedRoute from './cncjs-src/app/components/ProtectedRoute';
import Login from './cncjs-src/app/containers/Login';

function CNCjsPanel() {
  return (
    <GridSystemProvider
      breakpoints={[576, 768, 992, 1200]}
      containerWidths={[540, 720, 960, 1140]}
      columns={12}
      gutterWidth={0}
      layout="floats"
    >
      <Router>
        <div>
          <Route path="/login" component={Login} />
          <ProtectedRoute path="/" component={App} />
        </div>
      </Router>
    </GridSystemProvider>
  );
}

ReactDOM.render(<CNCjsPanel />, document.getElementById('cnc-root'));

Scenario - Launch the CNCjs HTTP server from Node.js

Embed the server into an existing Express app or standalone Node process.

import launchServer from './cncjs-src/server-cli.js';

launchServer({
  port: 8000,
  host: '0.0.0.0',
  backlog: 511,
  config: './cncjs.json',
  verbosity: 2,
  watchDirectory: './gcode',
}, (err: Error | null, data: { address: string; port: number }) => {
  if (err) {
    console.error('Server failed to start:', err);
    return;
  }
  console.log(`CNCjs server running at http://${data.address}:${data.port}`);
});

File walkthrough

• source/main.js - Electron main process: creates BrowserWindow with nodeIntegration: true, enforces single-instance lock, sets up IPC handlers, power-save blocker, and application menus.
• source/server-cli.js - Exports a launchServer function that starts the Express HTTP/WebSocket server; called by both the Electron main process and direct CLI invocations.
• source/electron-app/ - Menu template builders (createApplicationMenuTemplate, inputMenuTemplate, selectionMenuTemplate) used exclusively in the Electron context.
• source/app/index.jsx - Bootstraps i18next with HTTP backend and language detection, initialises Google Analytics 4, then calls ReactDOM.render with the full router/provider tree.
• source/app/api/index.js - All REST API calls (signin, getLatestVersion, and many more not shown) built on a shared superagent instance with Bearer auth and no-cache middleware.
• source/app/components/ - Re-exports of @trendmicro/react-* UI primitives (Anchor, Blink, Buttons, Modal, etc.) plus custom components (Hoverable, RepeatButton, Webcam, Widget, etc.).
• source/app/containers/ - Top-level React page containers: App (main workspace) and Login.
• source/app/store/ - Redux store setup and defaultState definition.
• source/app/widgets/ - Individual CNC control widgets (Axes, Console, GCode, Laser, Probe, Spindle, Webcam, etc.).
• source/app/lib/ - Shared utilities: controller (WebSocket machine controller), i18n, log, portal, promisify, user, promise-series.
• source/app/config/ - Static settings (settings.js) and app-level configuration constants.
• source/server/ - Express route handlers, WebSocket server, serial port controller instances, JWT auth middleware, and file-based config persistence.
• source/package.json - Canonical dependency list and npm scripts (build, start, electron).

Common pitfalls and fixes

• bcrypt-nodejs native build fails on Node 18+: Replace with bcryptjs (pure JS) and update source/server/ imports accordingly; bcrypt-nodejs is deprecated.
• serialport binary mismatch in Electron: Always run npx electron-rebuild after npm install; mismatched Node ABI versions cause silent crashes on port open.
• contextIsolation: false + nodeIntegration: true security warning: Required by main.js for renderer-side require(); do not enable for internet-facing windows—keep the CNCjs window localhost-only.
• Stylus .styl files not resolved: Add stylus-loader to your webpack config; the UI imports .styl files directly and will fail without it.
• app/ alias not resolved at runtime: The source uses bare app/components/... imports; if your bundler alias is missing, all component imports will throw Module not found.
• SECRET env var missing: The JWT middleware in source/server/ throws on startup if SECRET is not set; always export it before launching the server.

Vibe-coding prompt template

I have purchased the CNCjs 1.11.1 full-stack source block. The source is in
the `./cncjs-src/` directory of my project. There is a USAGE.md in the same
directory as this prompt.

Upstream npm package: user@example.com

Please help me integrate this source into my existing Node.js/TypeScript/React
project step-by-step:

1. Read USAGE.md fully before making any changes.
2. Install all required dependencies listed in USAGE.md §"Required dependencies".
3. Configure path aliases so `app/*` resolves to `./cncjs-src/app/*` in both
   the bundler config and tsconfig.json.
4. Wire the `launchServer` export from `./cncjs-src/server-cli.js` into my
   existing Express app startup, using port 8000 and the SECRET env var.
5. Add the CNCjs React UI as a `/cnc` sub-route in my existing React Router
   setup, using the GridSystemProvider and ProtectedRoute as shown in USAGE.md.
6. Demonstrate the `signin` and `getLatestVersion` API calls with real imports
   from `./cncjs-src/app/api/index.js`.
7. Call out any native module rebuild steps needed for my platform.

Do not invent new APIs. Only use symbols documented in USAGE.md or visible in
the source files under ./cncjs-src/.

License and credit

CNCjs is released under the MIT License. See source/LICENSE if present, or refer to the upstream repository at https://www.npmjs.com/package/cncjs and https://github.com/cncjs/cncjs. Original author: Cheton Wu and the CNCjs contributors.

This product’s unique contribution is clean room implementation of valuable code block into AVCP compatible standard.

The full install guide and integration prompts unlock after purchase.

Audiobookshelf Self-Hosted Audiobook and Podcast Server

PHP, Laravel & Business Scripts

Free