Now any changes made to scripts inside the server folders will automatically be uploaded to Bitburner. To upload new scripts steps 5-7 will have to be repeated after their creation. (I plan on improving that)

For more in-depth details have a look at the plugin powering this template!

Features

esbuild

This template uses esbuild to bundle your scripts.

Using React

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 MyComponent(){
  const [count, setCount] = useState(0);

  return <div>Count {count} <button onClick={() => setCount(count + 1)}>Add to count</button></div>;
}

Developing on multiple servers

Simply create a new folder with the name of the server you want in the 'servers' directory to develop on to start developing on that server!

Bidirectional Mirroring

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.

Automatic Distribution

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'.