mdn / bob

Builder of Bits aka The MDN Web Docs interactive examples, example builder

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Testing interactive examples with new BOB changes

NiedziolkaMichal opened this issue · comments

In the past I was able to build interactive examples with local BOB build, using command mentioned in our README.md:
npx install-local ~/path/to/bob && node node_modules/.bin/mdn-bob

Unfortunately this solution stopped working with new webpack updates #889
Command builds only those CSS & JS files:
image
While this should be the result:
image

@queengooborg Do you know what command can I now use to test interactive examples with local BOB?

Sorry about that! I didn't consider the local installation for testing when migrating to Webpack. I would say that the following command should do the trick:

npx install-local ~/path/to/bob && npm explore mdn-bob -- npm run build

This throws following error: Error during build: Error: ENOENT: no such file or directory, lstat './live-examples/media', while the full path is for me C:\Repo\mdn\interactive-examples\node_modules\mdn-bob\lib\. I think I can make it working with simple npm install inside interactive-examples repository, but while doing that I discovered another problem. Build script inside interactive-examples is simply "build": "mdn-bob". It doesn't trigger webpack, so css & js directories are missing from built interactive-examples and I think they will cease working when BOB gets updated.

image

The build script is definitely not just mdn-bob -- if I remember correctly, I think that install-local has some weird caching issues and doesn't override the existing installation. I'd try removing the node_modules/mdn-bob folder and try again.

I am talking about the one in interactive examples package.
image

Ahh, hmm... Does the above command I suggested, npm explore mdn-bob -- npm run build, work there too?

It works, but all file dependencies are missing:
image

They can be found in node_modules/mdn-bob, but webpack is not run, so they are not attached to rest of the built files.

Can you double-check the node_modules/mdn-bob folder and make sure it's up to date? That above command should CD into the folder and run the build command from there, which includes running Webpack.

I had problems running some scripts locally with node 18 but with node 16 it worked. May be worth trying?

I have installed interactive-examples from scratch, then run npm install. Now BOB 2.2.0 is used, so npm run install built everything correctly with outdated BOB.

Now I run npx install-local ../bob && npm explore mdn-bob -- npm run build which successfully replaced whole content of node_modules/mdn-bob with new files, but it throws exception Error: ENOENT: no such file or directory, lstat './live-examples/media'. Using npm explore mdn-bob -- npm run build at this point also throws the same exception.

Using npm run build overrides local version of BOB with version from the repository and builds pages using old bob version.

Now I run npm install --save ../bob which replaces "mdn-bob" in "devDependencies" to "file:../bob" and updates node_modules/mdn-bob to newest version. npm run build in interactive-examples just builds the pages, without running webpack and css & js directories are missing in docs.
npm explore mdn-bob -- npm run build run from interactive-examples is simply building BOB + BOB pages + Runs Webpack and makes all of them be stored in node_modules\mdn-bob\docs.

Being able to use interactive-examples with local version of bob is not really that important to me. Could you please just make sure that interactive-examples repo will work successfully after BOB gets updated with all recent changes?

I've just opened up #925 to embed the Webpack run directly into the existing script, which will fix this whole issue!