Error on running mdn interactive-examples repo locally

Hi,
I would like to contribute to the interactive examples as requested. I followed the instructions on https://github.com/mdn/interactive-examples/blob/master/CONTRIBUTING.md but something goes wrong with the build scripts locally.

MacOS 10.13.3

Here is some error logging:

Error thrown while loading JSON { Error: ENOENT: no such file or directory, open './docs/pages/css/scale3d.html'
    at Object.fs.openSync (fs.js:663:18)
    at Object.fs.writeFileSync (fs.js:1314:33)
    at Object.outputFileSync (/Users/marcusgustafsson/repos/interactive-examples-2/node_modules/fs-extra/lib/output/index.js:31:29)
    at Object.buildPages (/Users/marcusgustafsson/repos/interactive-examples-2/lib/pageBuilder.js:68:13)
    at /Users/marcusgustafsson/repos/interactive-examples-2/index.js:38:29
    at <anonymous>
  errno: -2,
  code: 'ENOENT',
  syscall: 'open',
  path: './docs/pages/css/scale3d.html' }
(node:6906) UnhandledPromiseRejectionWarning: Unhandled promise rejection (rejection id: 1): Error: ENOENT: no such file or directory, open '/Users/marcusgustafsson/repos/interactive-examples-2/js/editor-css-bundle.js'
(node:6906) [DEP0018] DeprecationWarning: Unhandled promise rejections are deprecated. In the future, promise rejections that are not handled will terminate the Node.js process with a non-zero exit code.
(node:6906) UnhandledPromiseRejectionWarning: Unhandled promise rejection (rejection id: 2): Error: ENOENT: no such file or directory, open '/Users/marcusgustafsson/repos/interactive-examples-2/js/editor-js-bundle.js'
(node:6906) UnhandledPromiseRejectionWarning: Unhandled promise rejection (rejection id: 3): Error: ENOENT: no such file or directory, open '/Users/marcusgustafsson/repos/interactive-examples-2/js/editor-bundle.js'

I also got this error log:
0 info it worked if it ends with ok
1 verbose cli [ ‘/usr/local/bin/node’, ‘/usr/local/bin/npm’, ‘run’, ‘build’ ]
2 info using npm@5.6.0
3 info using node@v9.2.0
4 verbose run-script [ ‘prebuild’, ‘build’, ‘postbuild’ ]
5 info lifecycle interactive-examples@1.0.0~prebuild: interactive-examples@1.0.0
6 info lifecycle interactive-examples@1.0.0~build: interactive-examples@1.0.0
7 verbose lifecycle interactive-examples@1.0.0~build: unsafe-perm in lifecycle true
8 verbose lifecycle interactive-examples@1.0.0~build: PATH: /usr/local/lib/node_modules/npm/node_modules/npm-lifecycle/node-gyp-bin:/Users/marcusgustafsson/repos/interactive-examples/node_modules/.bin:/usr/local/lib/node_modules/npm/node_modules/npm-lifecycle/node-gyp-bin:/Users/marcusgustafsson/repos/interactive-examples/node_modules/.bin:/usr/local/lib/node_modules/npm/node_modules/npm-lifecycle/node-gyp-bin:/Users/marcusgustafsson/repos/interactive-examples/node_modules/.bin:/Users/marcusgustafsson/anaconda3/bin:/usr/local/php5/bin:/Users/marcusgustafsson/bin:/usr/local/bin:/usr/bin:/bin:/usr/sbin:/sbin:/opt/X11/bin:/Library/Frameworks/Python.framework/Versions/3.6/bin:/usr/local/bin//Users/marcusgustafsson/bin:/usr/local/bin:/usr/bin:/bin:/usr/sbin:/sbin:/usr/local/share/dotnet:/opt/X11/bin:/Applications/Wireshark.app/Contents/MacOS:/Users/marcusgustafsson/…/…/Applications/android-sdk/tools:/Users/marcusgustafsson/…/…/Applications/android-sdk/platform-tools:/Library/Java/JavaVirtualMachines/jdk1.8.0_121.jdk/Contents/Home:/Users/marcusgustafsson/.composer/vendor/bin:/Users/marcusgustafsson/.composer/vendor/bin/phpmd
9 verbose lifecycle interactive-examples@1.0.0~build: CWD: /Users/marcusgustafsson/repos/interactive-examples
10 silly lifecycle interactive-examples@1.0.0~build: Args: [ ‘-c’,
10 silly lifecycle ‘npm-run-all build-css-bundle build-js-bundle build-tabbed-js-bundle build-pages’ ]
11 silly lifecycle interactive-examples@1.0.0~build: Returned: code: 1 signal: null
12 info lifecycle interactive-examples@1.0.0~build: Failed to exec build script
13 verbose stack Error: interactive-examples@1.0.0 build: npm-run-all build-css-bundle build-js-bundle build-tabbed-js-bundle build-pages
13 verbose stack Exit status 1
13 verbose stack at EventEmitter. (/usr/local/lib/node_modules/npm/node_modules/npm-lifecycle/index.js:285:16)
13 verbose stack at EventEmitter.emit (events.js:159:13)
13 verbose stack at ChildProcess. (/usr/local/lib/node_modules/npm/node_modules/npm-lifecycle/lib/spawn.js:55:14)
13 verbose stack at ChildProcess.emit (events.js:159:13)
13 verbose stack at maybeClose (internal/child_process.js:943:16)
13 verbose stack at Process.ChildProcess._handle.onexit (internal/child_process.js:220:5)
14 verbose pkgid interactive-examples@1.0.0
15 verbose cwd /Users/marcusgustafsson/repos/interactive-examples
16 verbose Darwin 17.4.0
17 verbose argv “/usr/local/bin/node” “/usr/local/bin/npm” “run” "build"
18 verbose node v9.2.0
19 verbose npm v5.6.0
20 error code ELIFECYCLE
21 error errno 1
22 error interactive-examples@1.0.0 build: npm-run-all build-css-bundle build-js-bundle build-tabbed-js-bundle build-pages
22 error Exit status 1
23 error Failed at the interactive-examples@1.0.0 build script.
23 error This is probably not a problem with npm. There is likely additional logging output above.
24 verbose exit [ 1, true ]

I’m not sure what this is, sorry :(.

Which npm command is giving you this error? What’s the context of it? I mean is there any successful logging that happens before it, and which commands did you run beforehand, just git clone and npm install?

Hi, thank you for helping!

I figured out that I can’t run Atom with the repo open, at the same time as running the local server.

If I do, it keeps rebuilding and throwing errors, looping forever the build scripts.
But I can make my changes, then close Atom, and then run the server.

But – I don’t see the changes I made. I tried adding a folder and a file to /live-examples/css-examples/. When I go to localhost:8080/pages/css/ I can’t see the new folder.

I also looked in live-examples/css-examples/, no changes there either, just the old repo files that I cloned.

I tried npm run build and npm start, and it says that the pages built successfully, but my new files don’t show.

Not sure what’s happening here.

But – I don’t see the changes I made. I tried adding a folder and a file to /live-examples/css-examples/. When I go to localhost:8080/pages/css/ I can’t see the new folder.

You won’t see the folder - all the built CSS examples are just flat under localhost:8080/pages/css/. So for instance, if you have an entry in meta.json like this:

"fontStyle": {
    "baseTmpl": "tmpl/live-css-tmpl.html",
    "cssExampleSrc":
         "../../live-examples/css-examples/fonts/font-style.css",
    "exampleCode": "live-examples/css-examples/fonts/font-style.html",
    "fileName": "font-style.html",
    "title": "CSS Demo: font-style",
    "type": "css"
}

…then you should see the example in your browser at localhost:8080/pages/css/font-style.html

I also looked in live-examples/css-examples/, no changes there either, just the old repo files that I cloned.

When you say “I looked”, do you mean you looked in the Finder, or in your text editor?