Using Babylon.js Editor CLI

Introduction

The Babylon.js Editor provides a package named babylonjs-editor-cli that can be installed as a dependency of a project. This package provides a command line interface (CLI) to generate all necessary assets and files in the public/scene folder without having to open the editor application.
In other words, it allows you to generate all necessary assets in your own CI/CD pipeline.

The package is available on NPM here.

Installing babylonjs-editor-cli

Starting from Babylon.js Editor v5.3.0, the babylonjs-editor-cli package is included as a dependency of newly generated projects. Therefore, if you have created your project with a previous version of the editor, you will need to install it manually:

# Using npm
npm install --save-dev babylonjs-editor-cli

# Using yarn
yarn add -D babylonjs-editor-cli

# Using pnpm
pnpm add -D babylonjs-editor-cli

# Using bun
bun add -d babylonjs-editor-cli

Then, in your package.json, you can add a script to easily run the CLI:

{
  "scripts": {
    ...
    "generate": "babylonjs-editor-cli pack"
    ...
  }
}

Packing project

The babylonjs-editor-cli package provides a command named pack that will generate all necessary assets and files in the public/scene folder of your project.
To run the command, simply use:

babylonjs-editor-cli pack

A cache is automatically saved locally in order to speed up the packing process on subsequent runs.

The pack command will also collect all scripts attached to entities in order to bundle them properly.
It is IMPORTANT to pack the project before building it so that all scripts (located at src/scripts.ts) are properly bundled.

Here is a simple example on how the CI/CD pipeline could look like:

# Clone the repository
git clone ...

# Do custom things

cd path/to/your/project

# Do custom things

npm i

# Equivalent to babylonjs-editor-cli pack
# It is important to run this command before running `npm run build`
npm run generate

npm run build

...