Running examples

[LeXXik]

I can't seem to start the examples. After using npm install and npm run develop, I get the following error (Win11, VSCode, bash):

[1] 
[1] > examples-browser@0.0.0 serve
[1] > serve dist -l 5000 --no-request-logging --config ../serve.json
[1] 
[0] 
[0] > examples-browser@0.0.0 watch
[0] > npm run prebuild && cross-env concurrently --kill-others "npm run rollup:watch"
[0] 
[1]  UPDATE  The latest version of `serve` is 14.2.1
[1]  INFO  Accepting connections at http://localhost:5000
[0] 
[0] > examples-browser@0.0.0 prebuild
[0] > npm run build:example:data && npm run build:standalone && npm run build:directory
[0] 
[0] 
[0] > examples-browser@0.0.0 build:example:data
[0] > node ./scripts/example-data.mjs
[0] 
[0] 
[0] > examples-browser@0.0.0 build:standalone
[0] > node ./scripts/generate-standalone-files.mjs
[0] 
[0] 
[0] > examples-browser@0.0.0 build:directory
[0] > node ./scripts/example-directory.mjs
[0] 
[0] [0] 
[0] [0] > examples-browser@0.0.0 rollup:watch
[0] [0] > cross-env NODE_ENV=development rollup -c -w
[0] [0] 
[0] [0] [!] Error: EISDIR: illegal operation on a directory, read
[0] [0] Error: EISDIR: illegal operation on a directory, read
[0] [0]     at Object.readSync (node:fs:757:3)
[0] [0]     at tryReadSync (node:fs:438:20)
[0] [0]     at Object.readFileSync (node:fs:484:19)
[0] [0]     at Object.<anonymous> (E:\dev\playcanvas\esm\engine\examples\rollup.config.js:549:35)
[0] [0]     at Module._compile (node:internal/modules/cjs/loader:1267:14)
[0] [0]     at Object.require.extensions.<computed> [as .js] (E:\dev\playcanvas\esm\engine\examples\node_modules\rollup\dist\shared\loadConfigFile.js:621:20)
[0] [0]     at Module.load (node:internal/modules/cjs/loader:1125:32)
[0] [0]     at Function.Module._load (node:internal/modules/cjs/loader:965:12)
[0] [0]     at Module.require (node:internal/modules/cjs/loader:1149:19)
[0] [0]     at require (node:internal/modules/helpers:121:18)
[0] [0]

[kungfooman]

You still need:

cd engine
npm install
npm run build

[LeXXik]

Yeah, I did build the engine:

[LeXXik]

On Ubuntu the examples started, but getting lots of errors under WebGPU (Hello World example):

[kungfooman]

I cannot reproduce on my system, so I will answer based on this error:

[0] [0] [!] Error: EISDIR: illegal operation on a directory, read
[0] [0] Error: EISDIR: illegal operation on a directory, read
[0] [0]     at Object.readSync (node:fs:757:3)
[0] [0]     at tryReadSync (node:fs:438:20)
[0] [0]     at Object.readFileSync (node:fs:484:19)
[0] [0]     at Object.<anonymous> (E:\dev\playcanvas\esm\engine\examples\rollup.config.js:549:35)

The only readSync in examples\rollup.config.js is:

if (ENGINE_PATH) {
    const src = path.resolve(ENGINE_PATH);
    const content = fs.readFileSync(src, 'utf8');

Can you spawn a JS Debug Session and see what values you are getting here by adding a debugger?

You can go ahead with F10 and inspect along the way:

Are you on HEAD?

[LeXXik]

Yep, I am on HEAD. Something with env paths:

I have 2 folders:

E:/dev/playcanvas/engine   <- I usually do PRs from here
E:/dev/playcanvas/esm/engine <- made a clean clone to test ESM scripts

[kungfooman]

Thank you @LeXXik

So I can reproduce now via e.g. ENGINE_PATH=.. npm run develop

The ENGINE_PATH has to point to a JS file (e.g. index.js), but you seem to have ENGINE_PATH maybe set globally at some point in Windows "Computer"?

[LeXXik]

Thank you! I do have it there, yes. I really don't remember me adding it there. Can't find a reason to.

Well, after removing it, the examples start normally. WebGPU variant still crashes, though:

[mvaligursky]

It seems like your browser reports as supporting queries, but does not implement them. Try commenting out this line from the webgpu-graphics-device.js:

        this.supportsTimestampQuery = requireFeature('timestamp-query');

[LeXXik]

@mvaligursky it stops crashing there, but has another error and keeps loading forever:

Nevermind, I was loading, while it was building. Commenting that line out loads WebGPU example fine.

[LeXXik]

@kungfooman I was trying to get rid of all those pesky thumbnail-not-found errors. Is npm run build:thumbnails enough for this? I get ENOENT error:

PS E:\dev\playcanvas\esm\engine\examples> npm run build:thumbnails

> examples-browser@0.0.0 build:thumbnails
> npm run build && node ./scripts/thumbnails.mjs


> examples-browser@0.0.0 prebuild
> npm run build:example:data && npm run build:standalone && npm run build:directory


> examples-browser@0.0.0 build:example:data
> node ./scripts/example-data.mjs

build:example:data> skip hidden example: Graphics/LitMaterialExample

> examples-browser@0.0.0 build:standalone
> node ./scripts/generate-standalone-files.mjs


> examples-browser@0.0.0 build:directory
> node ./scripts/example-directory.mjs


> examples-browser@0.0.0 build
> npm run prebuild && cross-env NODE_ENV=production rollup -c


> examples-browser@0.0.0 prebuild
> npm run build:example:data && npm run build:standalone && npm run build:directory


> examples-browser@0.0.0 build:example:data
> node ./scripts/example-data.mjs

build:example:data> skip hidden example: Graphics/LitMaterialExample

> examples-browser@0.0.0 build:standalone
> node ./scripts/generate-standalone-files.mjs


> examples-browser@0.0.0 build:directory
> node ./scripts/example-directory.mjs


src/app/index.mjs → dist...
 Finished at: 16:22:50
created dist in 4.1s

src/static/index.html → dist/copy.tmp...
cross-env NODE_ENV=production ENGINE_PATH= npm run build:standalone
 Finished at: 16:22:50
created dist/copy.tmp in 192ms

../extras/index.js → dist/iframe/playcanvas-extras.js...
created dist/iframe/playcanvas-extras.js in 1.3s

../src/index.js → dist/iframe/playcanvas.js...
created dist/iframe/playcanvas.js in 9.5s
Spawn server on 12321
node:events:489
      throw er; // Unhandled 'error' event
      ^

Error: spawn serve ENOENT
    at ChildProcess._handle.onexit (node:internal/child_process:285:19)
    at onErrorNT (node:internal/child_process:483:16)
    at process.processTicksAndRejections (node:internal/process/task_queues:82:21)
Emitted 'error' event on ChildProcess instance at:
    at ChildProcess._handle.onexit (node:internal/child_process:291:12)
    at onErrorNT (node:internal/child_process:483:16)
    at process.processTicksAndRejections (node:internal/process/task_queues:82:21) {
  errno: -4058,
  code: 'ENOENT',
  syscall: 'spawn serve',
  path: 'serve',
  spawnargs: [
    'dist',
    '-l',
    '12321',
    '--no-request-logging',
    '--config',
    '../serve.json'
  ]
}

Node.js v20.1.0

[kungfooman]

Error: spawn serve ENOENT

engine/examples/scripts/thumbnails.mjs

Lines 76 to 92 in be04946

	async function main() {
	console.log('Spawn server on', port);
	// We need this kind of command:
	// npx serve dist --config ../serve.json
	// Reason: https://github.com/vercel/serve/issues/732
	// (who *ever* thought that stripping .html was a good idea in the first place...)
	const server = spawn('serve', ['dist', '-l', port, '--no-request-logging', '--config', '../serve.json']);
	await sleep(1000); // give a second to spawn server
	console.log("Starting puppeteer screenshot process");
	try {
	await takeScreenshots();
	} catch (e) {
	console.error(e);
	}
	console.log('Kill server on', port);
	server.kill();
	}

Looks like line 82 - serve process can't be started. So that seems to work on Linux, but not Windows and I'm not sure why - could you try rewriting it into:

const server = spawn('npx', ['serve', 'dist', '-l', port, '--no-request-logging', '--config', '../serve.json']);

?

IMO we need some kind of download script for thumbnails, the thumbnail generation takes quite some time... in the meantime, you can download them here: https://github.com/playcanvas/playcanvas.github.io/tree/main/thumbnails

Edit: maybe the easiest way is to replace serve with a standard JS API HTTP server.

[LeXXik]

@kungfooman hmm, didn't work:

On the same note - the original method worked under Ubuntu, though.

[LeXXik]

This one worked for me:

const npx = /^win/.test(process.platform) ? 'npx.cmd' : 'npx';
const server = spawn(npx, ['serve', 'dist', '-l', port, '--no-request-logging', '--config', '../serve.json']);