Set Up trouble with running locally

[carmandale]

I am following Getting Set Up | Babylon.js Documentation and trying to get the basic project set up.

I followed everything (I think exactly) and I get this error on ‘npm run start’

npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! babylonjs@1.0.0 start: webpack-dev-server --port 8080
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the babylonjs@1.0.0 start script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR! /Users/dalecarman/.npm/_logs/2020-12-09T15_13_18_033Z-debug.log

and this is the log…

0 info it worked if it ends with ok

1 verbose cli [

1 verbose cli ‘/Users/dalecarman/.nvm/versions/node/v15.0.1/bin/node’,

1 verbose cli ‘/Users/dalecarman/.nvm/versions/node/v15.0.1/bin/npm’,

1 verbose cli ‘run’,

1 verbose cli ‘start’

1 verbose cli ]

2 info using npm@6.14.8

3 info using node@v15.0.1

4 verbose run-script [ ‘prestart’, ‘start’, ‘poststart’ ]

5 info lifecycle babylonjs@1.0.0~prestart: babylonjs@1.0.0

6 info lifecycle babylonjs@1.0.0~start: babylonjs@1.0.0

7 verbose lifecycle babylonjs@1.0.0~start: unsafe-perm in lifecycle true

8 verbose lifecycle babylonjs@1.0.0~start: PATH: /Users/dalecarman/.nvm/versions/node/v15.0.1/lib/node_modules/npm/node_modules/npm-lifecycle/node-gyp-bin:/Users/dalecarman/Dropbox (Groove Jones)/Projects/SMU/dev/babylonjs/node_modules/.bin:/Users/dalecarman/.nvm/versions/node/v15.0.1/bin:/usr/local/bin:/usr/bin:/bin:/usr/sbin:/sbin:/Library/Apple/usr/bin:/Users/dalecarman/.nvm/versions/node/v15.0.1/bin

9 verbose lifecycle babylonjs@1.0.0~start: CWD: /Users/dalecarman/Dropbox (Groove Jones)/Projects/SMU/dev/babylonjs

10 silly lifecycle babylonjs@1.0.0~start: Args: [ ‘-c’, ‘webpack-dev-server --port 8080’ ]

11 silly lifecycle babylonjs@1.0.0~start: Returned: code: 1 signal: null

12 info lifecycle babylonjs@1.0.0~start: Failed to exec start script

13 verbose stack Error: babylonjs@1.0.0 start: webpack-dev-server --port 8080

13 verbose stack Exit status 1

13 verbose stack at EventEmitter. (/Users/dalecarman/.nvm/versions/node/v15.0.1/lib/node_modules/npm/node_modules/npm-lifecycle/index.js:332:16)

13 verbose stack at EventEmitter.emit (node:events:327:20)

13 verbose stack at ChildProcess. (/Users/dalecarman/.nvm/versions/node/v15.0.1/lib/node_modules/npm/node_modules/npm-lifecycle/lib/spawn.js:55:14)

13 verbose stack at ChildProcess.emit (node:events:327:20)

13 verbose stack at maybeClose (node:internal/child_process:1048:16)

13 verbose stack at Process.ChildProcess._handle.onexit (node:internal/child_process:288:5)

14 verbose pkgid babylonjs@1.0.0

15 verbose cwd /Users/dalecarman/Dropbox (Groove Jones)/Projects/SMU/dev/babylonjs

16 verbose Darwin 20.1.0

17 verbose argv “/Users/dalecarman/.nvm/versions/node/v15.0.1/bin/node” “/Users/dalecarman/.nvm/versions/node/v15.0.1/bin/npm” “run” “start”

18 verbose node v15.0.1

19 verbose npm v6.14.8

20 error code ELIFECYCLE

21 error errno 1

22 error babylonjs@1.0.0 start: webpack-dev-server --port 8080

22 error Exit status 1

23 error Failed at the babylonjs@1.0.0 start script.

23 error This is probably not a problem with npm. There is likely additional logging output above.

24 verbose exit [ 1, true ]

[sebavan]

This is really strange, could you try from a fresh clone, just npm install in the tools/gulp folder and the npm start.

[HirangaG]

Hey guys, I’m having a similar issue, while following @RaananW starter file from: GitHub - RaananW/babylonjs-webpack-es6: Babylon.js basic scene with typescript, webpack, es6 modules, editorconfig, eslint, hot loading and more. Will even make coffee if you ask nicely.

Following the README instructions, I cloned it to my folder location, have run the npm install with no issues/warnings but npm start command gives this error [i have not edited the files that were cloned]

Any ideas what’s going wrong?

NPM start is failing:

PS D:\01_NFT\export-data\NPB Scripts\LEARN\NPB_babylon_raanan-tute> npm start
npm ERR! Missing script: "start"
npm ERR!
npm ERR! Did you mean one of these?
npm ERR!     npm star # Mark your favorite packages
npm ERR!     npm stars # View packages marked as favorites
npm ERR!
npm ERR! To see a list of scripts, run:
npm ERR!   npm run

npm ERR! A complete log of this run can be found in:
npm ERR!     C:\Users\Hiranga\AppData\Local\npm-cache\_logs\2022-01-20T03_25_23_000Z-debug.log

[roland]

Hey @HirangaG !

What about npm run start?

[roland]

I’ve just tried it out:

Clone the repo

npm i and npm run start

Tadaaaa:

r.

[HirangaG]

UGH. Thanks dude. That bit was a critical instruction missing in the doc, for a noob like me.

Unfortunately, after trawling the web for an hour and nothing, I abandoned and started on another tutorial
But, now I’m stuck on another issue, following code, character by character… FreeCamera and HemisphericLight and even Vector3 is not being recognized by the … thingy … Vue? It’s not getting recognised by Vue? in my Scene.ts file. Any ideas of what is going wrong? Seems like something is not loading…

‘’’ const camera = new FreeCamera(“camera”, new Vector3(0, 1, 0), this.scene);
camera.attachControl();

    const hemiLight = new HemisphericLight("hemilight", new Vector3(0, 1, 0), this.scene);

‘’’

I’m following this tutorial: 01. Basic Scene in BabylonJS - YouTube
Stuck effectively at 18:57 01. Basic Scene in BabylonJS - YouTube

UPDATE: Found solution: so after typing out the object “FreeCamera”, I’m meant to hit Ctrl+Spacebar to Import the object in🤦🏾‍♂️
Is that bit written somewhere? Please tell me it’s written somewhere. feeling rly stupid 1hr later

[roland]

Shit happes dude

If you’re beginner in javascript/typescript/npm/etc I suggest you to look at these things first. You will be not able to shoot your weapon if you don’t even know how load it.

Or even better start here and create your first app without npm/webpack and use the most easiest way to create a BabylonJS app/page:

Getting Started - Chapter 1 - Setup Your First Web App | Babylon.js...

The video you’re watching is even more complicated because it uses Vue. So don’t bother to follow it unless you grasp the basic concepts.

[roland]

To be more precise: Create an html file on your disk. Let’s name it index.html.
Copy and paste this code into it (take from the docs, link above) and simply open the index.html file in your browser.

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">

    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
        <title>Babylon Template</title>

        <style>
            html, body {
                overflow: hidden;
                width: 100%;
                height: 100%;
                margin: 0;
                padding: 0;
            }

            #renderCanvas {
                width: 100%;
                height: 100%;
                touch-action: none;
            }
        </style>

        <script src="https://cdn.babylonjs.com/babylon.js"></script>
        <script src="https://cdn.babylonjs.com/loaders/babylonjs.loaders.min.js"></script>
        <script src="https://code.jquery.com/pep/0.4.3/pep.js"></script>
    </head>

   <body>

    <canvas id="renderCanvas" touch-action="none"></canvas> <!-- touch-action="none" for best results from PEP -->

    <script>
        const canvas = document.getElementById("renderCanvas"); // Get the canvas element
        const engine = new BABYLON.Engine(canvas, true); // Generate the BABYLON 3D engine

        // Add your code here matching the playground format
        const createScene = function () {
    
            const scene = new BABYLON.Scene(engine);  

            BABYLON.MeshBuilder.CreateBox("box", {})

            const camera = new BABYLON.ArcRotateCamera("camera", -Math.PI / 2, Math.PI / 2.5, 15, new BABYLON.Vector3(0, 0, 0));
            camera.attachControl(canvas, true);
            const light = new BABYLON.HemisphericLight("light", new BABYLON.Vector3(1, 1, 0));

            return scene;
        };

        const scene = createScene(); //Call the createScene function

        // Register a render loop to repeatedly render the scene
        engine.runRenderLoop(function () {
                scene.render();
        });

        // Watch for browser/canvas resize events
        window.addEventListener("resize", function () {
                engine.resize();
        });
    </script>

   </body>

</html>

You have to see this in your browser:

Don’t feel stupid just #RTFM (no offence here, just trying to be funny!)

If you get in trouble don’t hesitate to ask!

r.

[HirangaG]

Yeah thanks! I got there in the end - managed to get hold of a friend and figured it out haha. Slow progress, but getting there. Hopefully more familiar with everything across the next week.

[roland]

You definitely will! I like that you were trying to get your stuff working yourself and didn’t give up just right after you failed. There are ppl literally asking for complete working solutions on the forum and that makes me everytime nervous I am still a beginner here however already trying to do more advanced things and I tell you, sometimes it takes days to understand how things are working. I am studying the BabylonJS source code, it’s the best way for me to understand how can I approach different problems. Build your knowledge slowly, precisely, do not use code that you don’t understand and you will be awarded with many satisfying eureca moments as you dig deeper and deeper!

Keep coding dude!

[RaananW]

I am glad it is resolved!

[HirangaG]

Thanks dude! Starting to get the gist now…
Yeah I’ve kinda mapped out my elephant and eating it one bite at a time, with my ongoing thread here: How to create an Image(from URL) on a HUD / Screen / Holographic effect

Discovering the names of tools or functions is sometimes the hardest part but getting there…