Build Node Material Editor for local development

Hello world !

I’m trying to tackle an issue / feature request about the NME (node material editor).
But I’m still new to this and I can’t seem to run in locally. Here is what I did :slight_smile:

  • I forked and cloned babylon.js
  • I ran npm install from /Tools/Gulp/

The file nodeEditor/public/index.html does show the node material editor, but it won’t recognize my local changes in the nodeEditor/src/ folder. Then I figured out it was fetching the nme script from the preview release.


I assumed I need to build the local files in order to access the nme source built at dist/nodeEditor/babylon.nodeEditor.js and put that in the script “src” attribute. However, when I try to run npm run build, the command gets stuck on an error. Here is the npm log. (I also got the complete console ouput, but it’s reaally long, being the entire build of the source code)

0 verbose cli [
0 verbose cli   'C:\\Program Files\\nodejs\\node.exe',
0 verbose cli   'C:\\Users\\Faber\\AppData\\Roaming\\npm\\node_modules\\npm\\bin\\npm-cli.js',
0 verbose cli   'link',
0 verbose cli   '@babylonjs/loaders'
0 verbose cli ]
1 info using npm@7.20.1
2 info using node@v12.18.3
3 timing npm:load:whichnode Completed in 1ms
4 timing config:load:defaults Completed in 1ms
5 timing config:load:file:C:\Users\Faber\AppData\Roaming\npm\node_modules\npm\npmrc Completed in 3ms
6 timing config:load:builtin Completed in 3ms
7 timing config:load:cli Completed in 2ms
8 timing config:load:env Completed in 1ms
9 timing config:load:file:B:\Babylon.js\.temp\packageES6Dev\inspector\.npmrc Completed in 0ms
10 timing config:load:project Completed in 3ms
11 timing config:load:file:C:\Users\Faber\.npmrc Completed in 1ms
12 timing config:load:user Completed in 1ms
13 timing config:load:file:C:\Users\Faber\AppData\Roaming\npm\etc\npmrc Completed in 0ms
14 timing config:load:global Completed in 0ms
15 timing config:load:validate Completed in 1ms
16 timing config:load:credentials Completed in 0ms
17 timing config:load:setEnvs Completed in 1ms
18 timing config:load Completed in 13ms
19 timing npm:load:configload Completed in 13ms
20 timing npm:load:setTitle Completed in 0ms
21 timing npm:load:setupLog Completed in 1ms
22 timing config:load:flatten Completed in 2ms
23 timing npm:load:cleanupLog Completed in 3ms
24 timing npm:load:configScope Completed in 0ms
25 timing npm:load:projectScope Completed in 1ms
26 timing npm:load Completed in 21ms
27 timing arborist:ctor Completed in 1ms
28 timing arborist:ctor Completed in 0ms
29 timing arborist:ctor Completed in 1ms
30 verbose shrinkwrap failed to load node_modules/.package-lock.json missing from lockfile: ../gui/node_modules/tslib
31 verbose shrinkwrap failed to load node_modules/.package-lock.json missing from lockfile: ../gui/node_modules/tslib
32 timing idealTree:init Completed in 40ms
33 warn old lockfile The package-lock.json file was created with an old version of npm,
33 warn old lockfile so supplemental metadata must be fetched from the registry.
33 warn old lockfile
33 warn old lockfile This is a one-time fix-up, please be patient...
34 silly inflate node_modules/babylonjs-gltf2interface
35 silly inflate node_modules/csstype
36 silly inflate node_modules/tslib
37 silly inflate node_modules/@babylonjs/loaders
38 silly inflate node_modules/@babylonjs/serializers
39 silly inflate node_modules/@types/prop-types
40 silly inflate node_modules/@types/react-dom
41 silly inflate node_modules/@babylonjs/materials
42 silly inflate node_modules/@types/react
43 silly inflate node_modules/@types/scheduler
44 silly inflate node_modules/@babylonjs/gui
45 silly inflate ../gui
46 silly inflate ../gui/node_modules/tslib
47 http fetch GET 200 https://registry.npmjs.org/tslib 60ms (cache hit)
48 silly inflate ../gui/node_modules/@babylonjs/core
49 silly inflate ../core
50 timing idealTree Completed in 108ms
51 timing command:link Completed in 139ms
52 verbose stack Error: Tracker "idealTree:inflate:" already exists
52 verbose stack     at Arborist.[_onError] (C:\Users\Faber\AppData\Roaming\npm\node_modules\npm\node_modules\@npmcli\arborist\lib\tracker.js:101:11)
52 verbose stack     at Arborist.addTracker (C:\Users\Faber\AppData\Roaming\npm\node_modules\npm\node_modules\@npmcli\arborist\lib\tracker.js:28:21)
52 verbose stack     at Array.<anonymous> (C:\Users\Faber\AppData\Roaming\npm\node_modules\npm\node_modules\@npmcli\arborist\lib\arborist\build-ideal-tree.js:699:14)
52 verbose stack     at run (C:\Users\Faber\AppData\Roaming\npm\node_modules\npm\node_modules\promise-call-limit\index.js:30:26)
52 verbose stack     at C:\Users\Faber\AppData\Roaming\npm\node_modules\npm\node_modules\promise-call-limit\index.js:33:7
53 verbose cwd B:\Babylon.js\.temp\packageES6Dev\inspector
54 verbose Windows_NT 10.0.19042
55 verbose argv "C:\\Program Files\\nodejs\\node.exe" "C:\\Users\\Faber\\AppData\\Roaming\\npm\\node_modules\\npm\\bin\\npm-cli.js" "link" "@babylonjs/loaders"
56 verbose node v12.18.3
57 verbose npm  v7.20.1
58 error Tracker "idealTree:inflate:" already exists
59 verbose exit 1

What do you guys make out of this ?
Also, this took about 20 minutes, do I have to build every time I’d like to check out what I just edited in my code ?

I tried to simply do npm run start, hoping it would watch for changes and hot-reload, but my modification seem to be ignored just the same. I’ve read the doc, but while they explain how to contribute to the API, the playground, the material library, etc, there is no article about the NME.

Sorry if the answers are obvious ^^

1 Like

By following the instructions from here:

You should be able to setup everything you need (I can see you already saw this doc).

Once you have started the server (I start it by choosing Terminal => Run Task… => run in Visual Studio Code) , you can start the NME by browsing http://localhost:1338/nodeEditor/public/index-local.html

No you don’t need to do that. Webpack will serve the .ts automatically and will recompile the files on the fly if/when they change.

2 Likes

Hi, thanks for the help !

Yeah, I read this guide, but the node material editor is not mentioned once, so I don’t really have a clue about my issue.
I tried what you said, but index-local.html just gives a blank page. I only get the nme when opening index.html.

There is no error though, so I don’t get what’s going on.

EDIT : Okay, weird thing. The page now works, but I wasn’t doing anything. I tried and when it was done loading, it just was blank and empty (I tried many times, emptying cache, re starting the server, waiting a few minutes…). So I went on doing something else. And just now I came back to it and it was displaying the nme correctly. And it was indeed showing my local changes. \o/
No idea what happened though… :confused:

1 Like

Starting the server takes quite a long time, between 3 and 4mn on my computer: you won’t see anything until the server is completely started. It’s hard to know when it’s ready because there’s no specific message in the console: I know it when I try to a browse a page and it displays correctly :slight_smile:

2 Likes