Excalidraw inside a jail

logo

We are going to configure a jail to install excalidraw locally and solve the FreeBSD architecture problem.

We create the jail first with Bastille and add in the jails.conf the typical lines

allow.mlock;
allow.raw_sockets;

Installing Excalidraw

According to their website the following steps should work but we have errors, in my case on the architecture, when trying to boot with yarn.

yarn start failure

This is just one of the present errors

Error: Your current platform "freebsd" and architecture "x64" combination is not yet supported by the native Rollup build. Please use the WASM build "@rollup/wasm-node" instead.
yarn start
yarn run v1.22.19
$ yarn --cwd ./excalidraw-app start
$ yarn && vite
[1/5] Validating package.json...
[2/5] Resolving packages...
warning Resolution field "strip-ansi@6.0.1" is incompatible with requested version "strip-ansi@^7.0.1"
warning Resolution field "strip-ansi@6.0.1" is incompatible with requested version "strip-ansi@^7.0.1"
warning Resolution field "strip-ansi@6.0.1" is incompatible with requested version "strip-ansi@^7.0.1"
warning Resolution field "strip-ansi@6.0.1" is incompatible with requested version "strip-ansi@^3.0.0"
success Already up-to-date.
/root/excalidraw/node_modules/vite/node_modules/rollup/dist/native.js:84
	throw new Error(
	      ^

Error: Your current platform "freebsd" and architecture "x64" combination is not yet supported by the native Rollup build. Please use the WASM build "@rollup/wasm-node" instead.

The following platform-architecture combinations are supported:
android-arm
android-arm64
darwin-arm64
darwin-x64
linux-arm
linux-arm (musl)
linux-arm64
linux-arm64 (musl)
linux-ppc64
linux-riscv64
linux-s390x
linux-x64
linux-x64 (musl)
win32-arm64
win32-ia32
win32-x64

If this is important to you, please consider supporting Rollup to make a native build for your platform and architecture available.
    at throwUnsupportedError (/root/excalidraw/node_modules/vite/node_modules/rollup/dist/native.js:84:8)
    at getPackageBase (/root/excalidraw/node_modules/vite/node_modules/rollup/dist/native.js:75:3)
    at Object.<anonymous> (/root/excalidraw/node_modules/vite/node_modules/rollup/dist/native.js:37:21)
    at Module._compile (node:internal/modules/cjs/loader:1364:14)
    at Module._extensions..js (node:internal/modules/cjs/loader:1422:10)
    at Module.load (node:internal/modules/cjs/loader:1203:32)
    at Module._load (node:internal/modules/cjs/loader:1019:12)
    at ModuleWrap.<anonymous> (node:internal/modules/esm/translators:203:29)
    at ModuleJob.run (node:internal/modules/esm/module_job:195:25)
    at async ModuleLoader.import (node:internal/modules/esm/loader:337:24)

Node.js v18.20.6
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

Updating package.json

When using yarn, we must edit our package.json and add the following:

"resolutions": {
  "@types/react": "18.2.0",
  "strip-ansi": "6.0.1",
  "rollup": "npm:@rollup/wasm-node" (1)
}
1 This line must be added.
"rollup": "npm:@rollup/wasm-node"

Here rollup is being redirected to a specific package in npm called @rollupwasm-node. This means that, instead of installing the standard version of rollup, the version packaged as @rollupwasm-node (probably optimized for environments using WebAssembly or Node.js) will be used.

It is necessary to delete the node_modules directory and the yarn.lock after adding the previous line of the wasm.

Make it available on local network

yarn start
yarn run v1.22.19
$ yarn --cwd ./excalidraw-app start
$ yarn && vite
[1/5] Validating package.json...
[2/5] Resolving packages...
warning Resolution field "strip-ansi@6.0.1" is incompatible with requested version "strip-ansi@^7.0.1"
warning Resolution field "strip-ansi@6.0.1" is incompatible with requested version "strip-ansi@^7.0.1"
warning Resolution field "strip-ansi@6.0.1" is incompatible with requested version "strip-ansi@^7.0.1"
warning Resolution field "strip-ansi@6.0.1" is incompatible with requested version "strip-ansi@^3.0.0"
success Already up-to-date.
                                                                                                                                                                     18:37:39
  VITE v5.0.12  ready in 2036 ms

(1)
  ➜  Local:   http://localhost:3000/                                                                                                                                 18:37:39
  ➜  Network: use --host to expose                                                                                                                                   18:37:39
  ➜  press h + enter to show help                                                                                                                                    18:37:39
node:events:495
      throw er; // Unhandled 'error' event
      ^

Error: spawn xdg-open ENOENT
    at ChildProcess._handle.onexit (node:internal/child_process:284:19)
    at onErrorNT (node:internal/child_process:477:16)
    at process.processTicksAndRejections (node:internal/process/task_queues:82:21)
Emitted 'error' event on ChildProcess instance at:
    at ChildProcess._handle.onexit (node:internal/child_process:290:12)
    at onErrorNT (node:internal/child_process:477:16)
    at process.processTicksAndRejections (node:internal/process/task_queues:82:21) {
  errno: -2,
  code: 'ENOENT',
  syscall: 'spawn xdg-open',
  path: 'xdg-open',
  spawnargs: [ 'http://localhost:3000/' ]
}

Node.js v18.20.6
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
1 This line could go out, because we just need to do a yarn start --host to make it available on our local network.

Problems with xdg-open

Apparently the problem can persist because of the xdg-open that tries to open the excalidraw with the browser, but we don’t have it installed, we could solve it by installing it or ignoring its use by means of a parameter to yarn.

yarn start --host
yarn run v1.22.19
$ yarn --cwd ./excalidraw-app start --host
$ yarn && vite --host
[1/5] Validating package.json...
[2/5] Resolving packages...
warning Resolution field "strip-ansi@6.0.1" is incompatible with requested version "strip-ansi@^7.0.1"
warning Resolution field "strip-ansi@6.0.1" is incompatible with requested version "strip-ansi@^7.0.1"
warning Resolution field "strip-ansi@6.0.1" is incompatible with requested version "strip-ansi@^7.0.1"
warning Resolution field "strip-ansi@6.0.1" is incompatible with requested version "strip-ansi@^3.0.0"
success Already up-to-date.
                                                                                                                                                                     18:38:15
  VITE v5.0.12  ready in 1996 ms

  ➜  Local:   http://localhost:3000/                                                                                                                                 18:38:15
  ➜  Network: http://192.168.1.28:3000/                                                                                                                              18:38:15
  ➜  press h + enter to show help                                                                                                                                    18:38:15
node:events:495
      throw er; // Unhandled 'error' event
      ^

Error: spawn xdg-open ENOENT (1)
    at ChildProcess._handle.onexit (node:internal/child_process:284:19)
    at onErrorNT (node:internal/child_process:477:16)
    at process.processTicksAndRejections (node:internal/process/task_queues:82:21)
Emitted 'error' event on ChildProcess instance at:
    at ChildProcess._handle.onexit (node:internal/child_process:290:12)
    at onErrorNT (node:internal/child_process:477:16)
    at process.processTicksAndRejections (node:internal/process/task_queues:82:21) {
  errno: -2,
  code: 'ENOENT',
  syscall: 'spawn xdg-open',
  path: 'xdg-open',
  spawnargs: [ 'http://localhost:3000/' ]
}

Node.js v18.20.6
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
1 This line is an error that we must resolve.

How to solve the fuck xdg-open

yarn start --host --no-open (1)
1 Mode without browser and do not try to open the url, allowing the excalidraw to start. Or, if we do not use the --no-open parameter we will have to install it.
pkg install xdg-utils-1.1.3_4

Then try yarn start --host again and excalidraw should start up.

Adding excalidraw for startup

In the rc.d we create our file with excalidraw execution permissions to be able to start it with tranquility lmao…​.

#!/bin/sh

# PROVIDE: excalidraw
# REQUIRE: LOGIN
# KEYWORD: shutdown

. /etc/rc.subr

name="excalidraw"
rcvar="excalidraw_enable"

start_cmd="${name}_start"
stop_cmd=":"

excalidraw_start() {
    echo "Iniciando Excalidraw..."
    cd /root/excalidraw || exit 1
    (1)
    su -m root -c "env PATH=/usr/local/bin:/usr/bin:/bin /usr/local/bin/yarn start --host --no-open > /var/log/excalidraw.log 2>&1 &" (2)
}

load_rc_config $name
: ${excalidraw_enable:=no}
run_rc_command "$1"
1 This is so, because the yarn will require us to node.
2 The /var/log/excalidraw.log file will tell us something in case of error.