Document how to preview changes locally

[foolip]

Yesterday in https://chat.mozilla.org/#/room/#mdn:mozilla.org @Elchi3 shared how to preview changes of BCD locally. I've tried it out locally and it boils down to this:

Check out https://github.com/mdn/browser-compat-data, https://github.com/mdn/content and https://github.com/mdn/yari in the same directory. Then:

cd path/to/yari
yarn add link:../browser-compat-data
echo CONTENT_ROOT=../content/files > .env
yarn dev

Then find a page that includes the BCD table you've changed, which in my case is http://localhost:3000/en-US/docs/Web/API/DOMPoint#browser_compatibility.

Changes to BCD require stopping and starting the server.

Documenting this for all contributors would be nice. Even nicer would be wrapping it into something like npm run preview which would generate a page with any modified tables and open that. It would be a small step from there to providing preview as part of the CI system.

[teoli2003]

Note that because of heavy caching, this only work the first time. I have to do rm -rf node_modules/ to clean it when launching the second time (there may be a better, and quicker, way).

[foolip]

@teoli2003 I'm able to see BCD changes if I just restart. Are you using exactly the steps I wrote, or launching in some other way?

I did notice that yarn dev is quite slow and actually prints "Creating an optimized production build" so if there's something faster that also does no caching, that would be nice.

[teoli2003]

I was using yarn start.

[foolip]

Does it work with yarn dev then? How many ways of starting are there? :)

[teoli2003]

Yes, it did. (Forgot to tell you)

[caugner]

As of January 2025, it appears that linking local BCD from yari is not straight-forward, because the BCD package contents reside in /build, and yarn link just links the root directory.

So I ended up doing:

cd browser-compat-data/
ln -s $PWD/build ~/.config/yarn/link/@mdn/browser-compat-data

cd ../yarn
yarn link