This is a simple builder for @netless/fastboard-full, used to generate ready-to-use JavaScript bundles for browser delivery.
- Supports packaging
@netless/fastboard-fullinto multiple JavaScript formats - Generates both modern IIFE and ES5 IIFE outputs
- Automatically handles dependencies
pnpm install- Install dependencies:
pnpm install- Run the build command:
pnpm buildAfter the build is complete, you can find the generated JavaScript files in the dist directory.
If you only need the legacy ES5 IIFE compatibility flow, you can also run:
bash es5iife.shThis script now reuses the standard build and will also produce dist/index.global.es5.js.
The build process will generate the following files:
dist/index.js- JavaScript file in CJS formatdist/index.mjs- JavaScript file in ESM formatdist/index.global.js- Minified IIFE bundle for modern browsersdist/index.global.es5.js- Minified ES5 IIFE bundle for Android 4.4 WebView, iOS 9, and other legacy browsers
The project provides example code demonstrating how to use the built files. You can find example files in the example directory.
<!DOCTYPE html>
<html>
<head>
<title>Fastboard Example</title>
</head>
<body>
<div id="fastboard" style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;"></div>
<script src="../dist/index.global.js"></script>
<script>
// Create a whiteboard instance
NetlessFastboard.createFastboard({
sdkConfig: {
appIdentifier: "Your App Identifier",
region: "cn-hz",
},
joinRoom: {
uid: "User ID",
uuid: "Room UUID",
roomToken: "Room Token",
},
managerConfig: {
cursor: true,
},
}).then((fastboard) => {
// Create UI interface
const container = document.getElementById('fastboard');
const ui = NetlessFastboard.createUI(fastboard, container);
// Mount UI
ui.mount(container, {
config: {
toolbar: {
items: ["clicker", "selector", "pencil", "text", "shapes", "eraser", "clear", "laserPointer"],
collapsed: true,
},
},
});
});
</script>
</body>
</html>For Android 4.4 WebView, iOS 9, or other legacy browser environments, replace:
<script src="../dist/index.global.js"></script>with:
<script src="../dist/index.global.es5.js"></script>- Make sure the build is complete
- Open the
example/index.htmlfile using a local server - Replace the following parameters in the example code:
appIdentifier: Your app identifieruid: User IDuuid: Room UUIDroomToken: Room Token
Taking app-slide as an example, add the dependency:
pnpm add @netless/app-slide import { register } from '@netless/fastboard-full';
import SlideApp, { addHooks } from "@netless/app-slide";
// Integrate SlideApp as needed
register({
kind: "Slide",
appOptions: { debug: false },
src: SlideApp,
addHooks,
}); // Add a slide app to the apps list
NetlessFastboard.apps.push({
icon: "https://api.iconify.design/mdi:file-powerpoint-box.svg?color=%237f7f7f",
kind: "Slide",
label: "Slide",
onClick: (app) => {
app.insertDocs({
fileType: "pptx",
scenePath: `/pptx/${taskId}`,
taskId,
title: "a.pptx",
url,
});
},
});@netless/fastboard-full: The bundled Fastboard entry used by this builderesbuild: Used for fast builds@swc/core: Used to transform the browser global bundle down to ES5
- Ensure your Node.js version is compatible with the project dependencies
- The build process may take some time, please be patient
- If you encounter build errors, please check if the Node.js version and dependency installation are complete
- When using the example code, make sure to replace the correct app identifier and room information
MIT