Pain points and suggestions to improve dev tooling for Yari

[schalkneethling]

On our Matrix channel, I noticed the following conversation between some of the contributors:

Question

I just did an update from git and a yarn install, it updated yari to 1.0.1 apparently but the search is now broken: “Error while rendering search. Check console for details.” and webkit inspector shows TypeError: undefined is not an object (evaluating ‘e.title.toLowerCase’) http://localhost:5042/static/js/main.f38a1cd5.js

Answer

try http://localhost:3000/en-US/

Question

nothing listening on that port. btw i wanted to figure out which part of the webpage was refreshing something every second
on the console where i do yarn start I see a message like “buildDocumentFromURL(/en-us/docs/web): 36.222ms” which gets printed every second, and a corresponding fetch of index.json every second
On search I get an “Exception with thrown value: Error: Minified React error #418; visit https://reactjs.org/docs/error-decoder.html?invariant=418 for the full message...” React - Error DecoderA JavaScript library for building user interfaces and 423.

Answer

Recently I emptied client/build and ssr/dist directories and did rebuild. It solved some issues for me.

Question/Answered

worked for me. thanks 🥳
I moved the old directories to dist.old and build.old but a yarn --check-files seems to have gotten rid of those, so i cant compare what changed any clues to where the index.json is being refreshed every second

It sounds like there is some room for improvement here so, opening it up for a discussion. Thank you, everyone!

[OnkarRuikar]

We need to have a clean-build and/or clean-start command in package.json.

After dependency versions get bumped up, people seem to face issues in their local environments. Current practice of simply running yarn start every time doesn't clean old built files. Even if it is obvious, it take time to figure out that we need to delete everything in build directories. Especially non frequent contributors face this issue.

It would be great if we insist in the documentation(README.md) that yarn install needs to be followed by yarn clean-build. And these needs to be run before starting work on a new PR/task.

[teoli2003]

I usually do a rm -rf build && yarn install && yarn build && yarn start when I want a clean local copy (i.e. with a usable populated flaw dashboard) (in mdn/content).

[caugner]

Ideally yarn start would automatically rebuild everything that needs to be rebuilt, but unfortunately it only rebuilds what hasn't been built yet.

For now, I would recommend to run yarn && yarn dev instead of yarn start once after pulling upstream changes.

Note: When you commit in mdn/yari, yarn gets called automatically as part of the pre-commit hook.

[mustaphaturhan]

hey, when an issue is related with client-side, I can basically run "yarn dev" command once and it works nice. i can develope things on http://localhost:3000/en-US/ by doing that. server works on watch mode and does everything for me.

but, running yarn dev once isn't enough if issue is related with server-side rendering. to develope, fix things on server side i am working on http://localhost:5042/. even I run yarn dev, watch mode isn't working properly. i have to close server and re-run yarn dev everytime I changed something. even smaller things like adding console.log somewhere.

[schalkneethling]

Hey everyone,

Thank you for the feedback you have provided here. Please do keep it coming. I have spoken with engineering and they are looking at improving the developer experience as part of the work of switching from Yarn to NPM. #121

We will let you know more details as we roll out the improvements.