[docs] Clarify on how to use the local distribution in the CONTRIBUTING file

[nicolasiensen]

In this commit, we are clarifying how to install the local distribution of Material-UI to test changes in a real case scenario.

It turns out that, if you don't point the installation to the /build folder when importing a Material-UI component, the path @material-ui/core/<ComponentName> does not work.

It took me a while to realize how to install the local distribution, that's why I decided to update the documentation.

• I have followed (at least) the PR section of the contributing guide.

[oliviertassinari]

Thank you.

[eps1lon]

For testing with a local distribution we should probably recommend linking (yarn link) instead of file:*. If one rebuilds the package then file:* will still point to the old build. In addition we can explore how we provided incremental builds (i.e. if I change the Button I don't expect Dialog to be rebuild too) of our packages.

At least that's how [email protected] works for me. @nicolasiensen is file:* pointing to the new build if you run yarn build in the material-ui package or do you have to run yarn again in your package?

[nicolasiensen]

Indeed, just after submitting this PR I realized we could use yarn link instead to test the local distribution.

Using file:*, every time you make a change in the library you have to rebuild it and run yarn install from the project you are using to test the changes, it's a very time-consuming process that slows down the feedback loop a lot.

I'm going to try to set up my local environment with yarn link and submit a new change to the documentation to suggest a better approach to test the local distribution.

[eps1lon]

@nicolasiensen I know you figured it already out with file but be sure to run yarn link inside material-ui/build not just in material-ui/

[nicolasiensen]

I managed to make it work with yarn link, so whenever I have a change in packages/material-ui/build the app that is using my local distribution automatically reloads itself to apply the changes (I'm using create-react-app to create the test app).

Nevertheless, I still have to manually rebuild the library when a change is introduced, and the build process is going to process all the components, even if I'm changing just one, taking more than 25s.

It would be cool if yarn could watch the changes I'm doing in packages/material-ui/src, and rebuild just the changed components. Do you think this is feasible?

[eps1lon]

Have you tried adding --watch? Depending on your module type either yarn build:es --watch or yarn build:es2015 --watch. Not sure how clever babels watchmode is.

You could also just use babel-plugin-module-resolver and point to the source directly from your code. We use this for our docs-development environment: https://github.com/mui-org/material-ui/blob/1023e9676cf20068bd1d744b7a49a5482d22921d/babel.config.js#L72

Overall I think you shouldn't be doing that. If you work on a fix for this package and want manual e2e testing use yarn docs:dev and add an example in our docs. This offers better isolation and potential overhead when you file a PR upstream.