This is a template for using any external editor for Bitburner. This Template supports JS, JSX, TS and TSX out of the box.
- If you dont already have it installed, install NodeJS v20 or newer
- Clone this repository
- navigate to the template (
cd path/to/the/template) inside your console - run
npm installin your console to install all dependencies - run
npm startin your console to start the RemoteAPI server - open Bitburner and navigate to the settings
- open the tab labeled 'Remote API' and enter the port '12525'
- press connect
Now any changes made to scripts inside the server folders will automatically be uploaded to Bitburner.
For more in-depth details and a full list of options have a look at the plugin powering this template!
This template uses esbuild to bundle your scripts.
This template allows you to use the ingame instances of React and ReactDOM simply by importing them as ESModule as you usually would.
import React, {useState} from 'react';
export function MyComponent(){
const [count, setCount] = useState(0);
return <div>Count {count} <button onClick={() => setCount(count + 1)}>Add to count</button></div>;
}Simply create a new folder with the name of the server you want to develop on in the 'servers' directory to start developing on that server!
You can enable mirroring like this
const createContext = async () => await context({
entryPoints: [
'servers/**/*.js',
'servers/**/*.jsx',
'servers/**/*.ts',
'servers/**/*.tsx',
],
outbase: "./servers",
outdir: "./build",
plugins: [BitburnerPlugin({
port: 12525,
types: 'NetscriptDefinitions.d.ts',
mirror: {
'local/path': ['home', 'and/or other servers']
}
})],
bundle: true,
format: 'esm',
platform: 'browser',
logLevel: 'info'
});
let ctx = await createContext();
ctx.watch();This will mirror all listed servers for a path to a specified location. While mirroring, all changes in the game will be synced with your editor and vice versa.
You can specify folders with a list of servers to automatically distribute your files to these servers like this:
const createContext = async () => await context({
entryPoints: [
'servers/**/*.js',
'servers/**/*.jsx',
'servers/**/*.ts',
'servers/**/*.tsx',
],
outbase: "./servers",
outdir: "./build",
plugins: [BitburnerPlugin({
port: 12525,
types: 'NetscriptDefinitions.d.ts',
distribute: {
'build/home/dist': ['server-1', 'server-2', 'server-3']
}
})],
bundle: true,
format: 'esm',
platform: 'browser',
logLevel: 'info'
});
let ctx = await createContext();
ctx.watch();In this example all files that are developed in 'servers/home/dist' will not only be uploaded to 'home' but also 'server-1', 'server-2' and 'server-3'.
You can provide plugin extensions with hooks that trigger before and after certain events. Within hooks that gurantee that the plugin is connected to the game, you also get full access to the remote file API. Using extensions would look something like this:
import { context } from 'esbuild';
import { BitburnerPlugin } from 'esbuild-bitburner-plugin';
/** @type import('esbuild-bitburner-plugin').PluginExtension*/
const customExtension = {
setup() { console.log('setup'); }, //Run once on plugin startup
beforeConnect() { console.log('beforeConnect'); }, //Run once before the game connects
afterConnect(remoteAPI) { console.log('afterConnect'); }, //Run every time after the game (re)connects
beforeBuild() { console.log('beforeBuild'); }, //Run before every build process
afterBuild(remoteAPI) { console.log('afterBuild'); }, //Run after build results have been uploaded into the game
};
const createContext = async () => await context({
entryPoints: [
'servers/**/*.js',
'servers/**/*.jsx',
'servers/**/*.ts',
'servers/**/*.tsx',
],
outbase: "./servers",
outdir: "./build",
plugins: [
BitburnerPlugin({
port: 12525,
types: 'NetscriptDefinitions.d.ts',
extensions: [customExtension]
})
],
bundle: true,
format: 'esm',
platform: 'browser',
logLevel: 'info'
});
let ctx = await createContext();
ctx.watch();
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent