A Nodebox
is an interface to create and interact with a runtime evaluation context. It's responsible for attaching a bridge frame and orchestrating events between the bridge and the preview frames.
Nodebox connects to the provided deployed Nodebox runtime.
The Nodebox
interface is available directly from the @codesandbox/nodebox
package:
import { Nodebox } from '@codesandbox/nodebox';
options
<Object>
runtimeUrl
<string>
An absolute URL to the deployed Nodebox runtime.frame
<HTMLFrameElement>
Reference to the<iframe>
element on the page where the Nodebox should be mounted.
import { Nodebox } from '@codesandbox/nodebox';
const nodebox = new Nodebox({
iframe: document.getElementById('preview'),
});
Returns a Promise that resolves when a connection to the deployed Nodebox instance is established.
The connection must be awaited before operating with the Nodebox instance (e.g. writing files or creating shells).
nodebox.connect().then(() => {
console.log('Nodebox is ready!');
});
A reference to the File system API.
await nodebox.fs.init({
'file.js': `console.log('Hello world')`,
});
A reference to the Shell API.
const shell = nodebox.shell.create();
files
<Object>
A record of files and their content to write.- Returns:
<Promise>
Fulfills when all the specified files are successfully written.
Writes given files to the in-memory file system managed by Nodebox.
await nodebox.fs.init({
'index.js': `
import { greet } from './greet'
greet('Hello world')
`,
'greet.js': `
export function greet(message) {
console.log(message)
}
`,
});
path
<string>
encoding
<string | BufferEncoding>
- Returns:
<Promise>
Fulfills to either astring
orUint8Array
depending on theencoding
provided.
const content = await nodebox.fs.readFile('./index.js', 'utf8');
// "console.log('Hello world')
path
<string>
content
<string | Uint8Array>
options
<string | { encoding?: string, recursive?: boolean }>
- Returns:
<Promise>
Fulfills when the file content is successfully written.
await nodebox.fs.writeFile('./util.js', '');
path
<string>
options
<{ recursive?: boolean }>
- Returns:
<Promise>
Fulfills when the directory is successfully created.
await nodebox.fs.mkdir('./a/b/c', { recursive: true });
path
<string>
- Returns:
<Promise<string[]>>
Fulfills with a list of files in the directory.
await nodebox.fs.readdir('./a/b/c');
path
<string>
- Returns:
<Promise<FileStats>>
Fulfills with the stats of the provided file.
await nodebox.fs.stat('./index.js');
path
<string>
options
<Object | undefined>
recursive
<boolean | undefined>
remove all nested files/directories as wellforce
<boolean | undefined>
don't throw if file/directory does not exist
- Returns:
<Promise<void>>
Fulfills with the stats of the provided file.
await nodebox.fs.rm('./index.js', { recursive: true, force: true });
glob
<string>
A glob pattern of the files to watch.listener
<Function>
A listener to react to file watch events.event
<FileWatchEvent>
- Returns:
<Promise>
Fulfills to the control object with the following properties:dispose()
Removes the glob listener and stops watching the files.
Using the listener
function, you can handle the following file watch events:
create
path
<string>
change
path
<string>
rename
newPath
<string>
oldPath
<string>
remove
path
<string>
// Watch all JavaScript files in the project.
const watcher = nodebox.fs.watch('**/*.js', (event) => {
if (event.type === 'create') {
console.log('A new file created!', event.path);
}
});
// Stop watching the files.
watcher.dispose();
- Returns:
<Object>
A Shell instance.
Creates a new shell instance. Shell is used to run commands and control their execution.
const shell = nodebox.shell.create();
binary
<string>
Global name or a path to the binary.args
<Array>
List of arguments to pass to the commands.options
<Object>
cwd
<string>
Path to use as the current working directory.env
<Object>
await nodebox.fs.init({
'index.js': `console.log(process.env.DB_URL)`,
});
const shell = nodebox.shell.create();
await shell.runCommand('node', ['index.js'], {
env: {
DB_URL: 'https://example.com',
},
});
event
<string>
Event type to listen to.listener
Function
You can listen to the following events:
progress
status
<WorkerStatusUpdate>
exit
exitCode
<number>
shell.on('exit', (exitCode) => {
console.log(exitCode);
});
event
<string>
listener
<Function>
shell.stdout.on('data', (data) => {
console.log('Output:', data);
});
event
<string>
listener
<Function>
shell.stderr.on('data', (data) => {
console.log('Error:', data);
});
data
<string | Uint8Array>
shellProcess.stdin.write(data);
- Returns:
<Promise>
Fulfills when the shell successfully exits.
shellId
<string>
timeout
<number>
Duration of the timeout window. Default:10_000
milliseconds.- Returns:
<PreviewInfo>
Get a preview info object for the preview opened by the given shell. If there's no preview found by the given shell within the timeout
period, the function throws.
const previewInfo = await nodebox.preview.getByShellId('cjld2cjxh0000qzrmn831i7rn');
// {
// "url": "https://t3rmni-3000.preview.csb.app/",
// "sourceShellId": "cjld2cjxh0000qzrmn831i7rn",
// "port": 3000
// }
port
<number>
timeout
<number>
Duration of the timeout window. Default:10_000
milliseconds.- Returns:
<Promise>
Fulfills with the preview info object.
Get a preview info object for the preview at the given port. If there's no preview found open at the given port within the timeout
window, the function throws.
const shell = await nodebox.shell.create();
await shell.runCommand('node', ['start:docs']);
// Await a preview at the specific port.
const previewInfo = await nodebox.preview.waitForPort(3004);
console.log(previewInfo);
// {
// "url": "https://t3rmni-3004.preview.csb.app/",
// "sourceShellId": "cjld2cjxh0000qzrmn831i7rn",
// "port": 3004
// }