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.

完整安装指南与集成提示词将在购买后解锁。

Audiobookshelf Self-Hosted Audiobook and Podcast Server

PHP, Laravel & Business Scripts

免费