Build from an editor project

[artteq]

Hi all,

I have a little question about building projects prepared with the editor on Windows 10.

So I export the project and then I follow the instructions described in the documentation:

npm i
npm run build

and at this point I get an error in the terminal which says that ‘rm’ command is unknown.

So that’s basically a Linux command, but I don’t understand, why does the editor generate a package.json with Linux commands if we work in an editor for Windows? So I don’t understand, do I need to change the commands in the package.json file to Windows analogues, or do I have to build it in Linux? Can anybody explain me what am I doing wrong and how to build the project correctly on Windows?

[Deltakosh]

Pinging @julien-moreau

[julien-moreau]

Hey @artteq!
You are totally right! I missed that issue as I’m using “Git Bash For Window” and the “rm” command exists in it.

I just fixed in this commit Fixed #127 to ignore source scene files when exporting a template and… · BabylonJS/Editor@b5700f8 · GitHub so you’ll be able to build without errors.

I copy/paste the fixed package.json so you can build until the release of the editor:

{
“name”: “babylonjs-editor-generated-template”,
“version”: “0.0.1”,
“description”: “Generated Template by BabylonJS Editor v3.0”,
“scripts”: {
“clean”: “rimraf .build && rimraf .declaration”,
“compile”: “tsc -p .”,
“build”: “npm run clean && npm run compile”,
“watch”: “tsc -p . --watch”,
“webserver”: “http-server -p 1338”
},
“license”: “(Apache-2.0)”,
“devDependencies”: {
“@types/systemjs”: “0.20.6”,
“@types/javascript-astar”: “~0.0.29”,
“typescript”: “~3.0.1”,
“http-server”: “^0.9.0”
},
“dependencies”: {
“systemjs-plugin-css”: “~0.1.35”,
“systemjs”: “~0.20.19”,
“rimraf”: “2.6.3”,
“es6-promise”: “4.1.0”,
“litegraph.js”: “0.7.0”,
“babylonjs”: “4.0.3”,
“babylonjs-gui”: “4.0.3”,
“babylonjs-loaders”: “4.0.3”,
“babylonjs-materials”: “4.0.3”,
“babylonjs-procedural-textures”: “4.0.3”,
“babylonjs-editor”: “3.1.0”,
“cannon”: “~0.6.2”,
“earcut”: “~2.1.3”
}
}

[julien-moreau]

Instead of using specific commands according to the current OS, I now simply use the package “rimraf” that will do that for us

[artteq]

Hi,

thanks for the update, I’ve tried to replace package.json with what you’ve shared, but unfortunately it still doesn’t build it. It shows the following error:

[artteq]

But then I’ve installed Git Bash too and tried to build it and it worked. But unfortunately when I run the build I get a blank window and the following errors in the console:

So do I do something wrong again?

[julien-moreau]

@artteq I think the problem comes from the server. It looks like the application cannot access “.build/src/game.js” (forbidden).
Is it working locally if you type “npm run webserver” and access http://localhost:1338 ?

[artteq]

Yeah, thanks for the hint @julien-moreau , I’ve tried it on a local server and it works, but when I put it on my web server it shows me the following errors:

And that’s rather strange, because all my other webpages work correctly. I’ve also tried resetting and changing permissions on files and folders, but no success.
Maybe you could point me to a possible solution? It’s because I’ve tried to look for it but haven’t found anything useful on the Internet.

[julien-moreau]

@artteq can you change the links from “.build” to “build” (without the dot)? Maybe it can generate errors in some cases.

Here is the tsconfig:

{
“compilerOptions”: {
“target”: “es5”,
“module”: “commonjs”,
“sourceMap”: true,
“declaration”: true,
“outDir”: “./build/src”,
“declarationDir”: “./declaration/src”,
“typeRoots” : [“node_modules/@types”],
“lib”: [
“es2015.promise”, “es2015”, “dom”
]
},
“exclude”: [
“./node_modules”,
“./.build”,
“./.declaration”
]
}

And in the index.html:

System.config({
paths: {
“babylonjs”: “./node_modules/babylonjs/babylon.max.js”,
“babylonjs-gui”: “./node_modules/babylonjs-gui/babylon.gui.min.js”,
“babylonjs-materials”: “./node_modules/babylonjs-materials/babylonjs.materials.js”,
“babylonjs-loaders”: “./node_modules/babylonjs-loaders/babylonjs.loaders.js”,
“babylonjs-serializers”: “./node_modules/babylonjs-serializers/babylonjs.serializers.js”,
“babylonjs-procedural-textures”: “./node_modules/babylonjs-procedural-textures/babylonjs.proceduralTextures.js”,

            "babylonjs-editor": "./node_modules/babylonjs-editor/dist/editor.extensions.js",

            "cannon": "./node_modules/cannon/build/cannon.js",
            "earcut": "./node_modules/earcut/dist/earcut.min.js",
            "oimo": "./node_modules/babylonjs/Oimo.js",
            "javascript-astar": "./node_modules/javascript-astar/astar.js",
            "litegraph.js": "./node_modules/litegraph.js/build/litegraph.js"
        },
        packages: {
            "./build/": {
                defaultExtension: "js"
            },
            "./node_modules/babylonjs-loaders/": {
                format: "cjs",
                main: "babylonjs.loaders.js",
                format: "global"
            }
        },
        map: {
            css: "./node_modules/systemjs-plugin-css/css.js"
        },
        meta: {
            "*.css": { loader: "css" },
            "cannon": { format: "global" },
            "javascript-astar": { format: "global" }
        },
        pluginFirst: true
    });

    System.import("./build/src/game.js").then(function (e) {                
        // Run game here
        var e = new e.default();
        e.run();
    });

Don’t forget to rebuild using “npm run build”

[artteq]

@julien-moreau yeah, thanks a lot, it have helped at last!
So looking forward for the updates in the editor! Thanks again for your great job!

[julien-moreau]

@artteq excellent !
I’m releasing today, will let you know once done!
Don’t hesitate to give feedbacks and report other bugs using the editor, it’s alsways a pleasure to have users

[julien-moreau]

@artteq version 3.1.1 has just been deployed! Getting Started - Babylon.js Documentation
Everything should work now
Don’t hesitate to provide any feedback, will always be happy to help

[artteq]

Thanks again! Will test it in a while!

[artteq]

Hey @julien-moreau
I’ve tried the new editor and it finishes the build now, but unfortunately I have this in the console when I run the build:

[julien-moreau]

@artteq damn!
I think you are experiencing the same issue as @the-simian (Saving and exporting into a web project from the Babylon Editor)

I’m releasing a fix ASAP and will remove the “Material Editor” as it generates problems at the moment.
To fix, can you remove the material created when you opened the tool “Material Editor” using the tool? This might solve the problem

Thanks

[artteq]

@julien-moreau yes it helps, confirm. Thanks for the hint!

[julien-moreau]

@artteq I also juste fixed the final exports to GLTF and GLB.
I’m releasing the 3.1.2 ASAP

[the-simian]

@julien-moreau thank you. I can’t wait to use the next version!! I know there’s been a lot of activity, but this is helping make the core workflow much more stable! Can’t wait!

[julien-moreau]

@artteq you can find the preview version here: http://editor.babylonjs.com/electron/preview/BabylonJS Editor Setup 3.1.1.exe

This removed the material editor tool and includes the latest user feedbacks. Thanks for your future feedbacks!