Getting Set Up | Babylon.js Documentation

Questions
1

I was able to get a successful…

npm run build
npm run start

However, when I tried RUN > START DEBUGGING (F5), the latest release of Chrome browser gives me the following error, page. Firewall, Antivirus issue?

This site can’t be reached

localhost refused to connect.

Try:

Checking the connection
Checking the proxy and the firewall

ERR_CONNECTION_REFUSED

I’m guessing it’s probably a simple fix? Anyone with some ideas I can try?

I’m using Visual Studio Code (in a Workspace).

Thanks for any assistance you can share.

Side note: this broke VSC’s Go Live (button in lower right corner to test in browser) ability when I went with this way of testing Babylon JS 5.

2

Update.

This is still an issue. But I was able to test the dist folder of files on our server and it works, showing the default sphere. Also, if I double-click on the index.html file and run it in the default browser it shows properly locally. (or right click and launch it with the go live server, or select index.html and click the Go Live button in the lower right of the IDE, which now works properly, not sure why, but I’ll take it).

5

Not use newest Chrome!!!
Turn off automatic update!!!
I often meet this question (Once a month)

1 Like
6

Thanks @Moriy. I’ve tried it on a handful of browsers. All the same error. Non of them work unfortunately. Thanks your help though.

7

Oh no, I can’t debug too :fearful:

image

8

Same, yes.

9

cc @RaananW

10

That should not stop you from debugging.
Is debugging in the browser working?

11

Granted that’s just a Warning. But I’m still not able to debug with the F5, menu option or button on left-top side of VSC when it presents itself.

Same error today. Updated VSC to latest again.

8080 browser error page
8080 browser error page913×846 22.2 KB

launch chrome or other browser debug mode not working
launch chrome or other browser debug mode not working1060×387 28.7 KB

12

that’s your project setup, not the babylon repository, right?

13

Correct, on my local system. Trying to run it localhost as per the directions on the official website (link in previous post here). Then I sent it to our company server and it worked fine. But the interactive work of debugging is needed. Waiting to build and review is too time intensive for our needs.

14

Does running npm run start work? You will need to make sure this task runs as well in order to debug correctly. Did you get this launch configuration somewhere from our docs? I am trying to understand if we explain incorrectly, or you are missing a step.

15

(yes, I went through the official documentation from the link that titles this thread, thanks)

:\BabylonJS> npm run start

babylonjs@1.0.0 start
webpack-dev-server --port 8080

‘webpack-dev-server’ is not recognized as an internal or external command,
operable program or batch file.

16

Here’s the entire related console dump after ‘run’ for build and start.

[DRIVE]:\BabylonJS> npm run build

babylonjs@1.0.0 build
webpack

asset js/bundleName.js 24.5 MiB [compared for emit] (name: main)
asset index.html 190 bytes [compared for emit]
runtime modules 891 bytes 4 modules
modules by path ./node_modules/@babylonjs/core/ 10.2 MiB 1095 modules
modules by path ./node_modules/@babylonjs/gui/ 1.07 MiB
modules by path ./node_modules/@babylonjs/gui/3D/ 434 KiB 57 modules
modules by path ./node_modules/@babylonjs/gui/2D/ 663 KiB 42 modules
./node_modules/@babylonjs/gui/index.js 143 bytes [built] [code generated]
modules by path ./node_modules/@babylonjs/materials/ 342 KiB 60 modules
modules by path ./node_modules/@babylonjs/loaders/ 449 KiB 49 modules
modules by path ./node_modules/@babylonjs/serializers/ 281 KiB 28 modules
./src/app.ts 1.6 KiB [built] [code generated]
./node_modules/@babylonjs/inspector/dist/babylon.inspector.bundle.max.js 4.83 MiB [built] [code generated]
./node_modules/tslib/tslib.es6.js 12 KiB [built] [code generated]
./node_modules/@babylonjs/gui-editor/dist/babylon.guiEditor.max.js 3.53 MiB [built] [code generated]
webpack 5.73.0 compiled successfully in 7597 ms
[DRIVE]:\BabylonJS> npm run start

babylonjs@1.0.0 start
webpack-dev-server --port 8080

‘webpack-dev-server’ is not recognized as an internal or external command,
operable program or batch file.
[DRIVE]:\BabylonJS>

17

It looks like you only ran a regular npm install and so the optional packages that are used during development weren’t installed.

Since webpack-dev-server isn’t working, you should run npm install --include=dev to make sure that the package is present in your node_modules folder. This is assuming it’s indeed added as a development dependency and not a regular one (check devDependencies in your package.json).

Alternatively, you could try npx webpack-dev-server, although it shouldn’t be necessary to install it globally.

18

Thanks @rdw1, alas, same outcome. I tried all those steps now. back to build, start and…

babylonjs@1.0.0 start
webpack-dev-server --port 8080

‘webpack-dev-server’ is not recognized as an internal or external command,
operable program or batch file.

ERR_CONNECTION_REFUSED

19

SUCCESS!
I’m able to debug now in VSC with ‘F5’ (or menu option).

First I found on a net search and tried.

npx npm install webpack-dev-server --save-dev

I was here reviewing solutions.

I tried

npm install webpack-dev-server --save-dev (again)

But realized this next line and tried it.

npm install -g webpack-dev-server (I thought I had done that before?)

I did a npm run build and then npm run start.

Finally I saw what I was hoping for

babylonjs@1.0.0 start
webpack-dev-server --port 8080

[webpack-dev-server] Project is running at:
[webpack-dev-server] Loopback: http://localhost:8080/… (continued on).

Hit ‘F5’ when I saw 'webpack 5.73.0 compiled successfully in 643 ms (with no command prompt, just a tall rectangle icon, and I was in debug node with the sphere and background showing in the Chrome browser that popped up.

I hope this helps others that may run into this issue.

Thanks to everyone that helped me to work to solve this issue. Team work helped keep me motivated to a solution sooner than later. THANK YOU!
1 Like
20

Settup link in OPs first post.

1 Like