7

currently to install and run material-ui docs locally, it requires two npm install, one within material-ui, another within material-ui/docs.

cd <project folder>/material-ui npm install cd <project folder>/material-ui/docs npm install

But I want to use the docs site as a starting point to create my own app. How can I install the docs without installing the whole material-ui? I've tried adding "material-ui": "^0.14.4",, and ALL dependencies in material-ui/package.json to the material-ui/docs/package.json.

With that, npm install doesn't complain anything, but when I do npm run start or npm run browser:development, it doesn't work. Instead, it spits out whole bunch of error message (see below for part of it).

ERROR in ../src/table/table-header-column.jsx Module build failed: ReferenceError: Unknown plugin "transform-replace-object-assign" specified in "/home/ubuntu/repos/tutorials/mui/.babelrc" at 0, attempted to resolve relative to "/home/ubuntu/repos/tutorials/mui" .....

Please advise! Thanks.

realbug
  • 428
  • 7
  • 16

1 Answers1

3

I have teased the MUI-Docs site from parent MUI here in this repo: https://github.com/lmaccherone/material-ui-template.

In addition to removing the dependency upon parent material-ui, it has these advantages:

  • DRY and n-levels of left nav menu. To add/modify the left nav of the original MUI docs, you had to modify no less than three different source files. This template will automatically adjust the left-nav based upon app-routes.js including n-levels deep.

  • Custom theme in the project. MUI is designed to be themable and comes with two nice themes, but it's not immediately obvious how to activate a custom theme in context for all components. The Themes page now has three themes and it defaults to the custom one, so if you remove the Themes page, it will start up with your theme rather than one of the prebuilt ones. Just modify customBaseTheme.js. I also modified many components and pages to use the theme. There were many places where inline settings didn't honor theme colors and spacing.

  • Highcharts. There is an example chart page that uses Highcharts and react-highcharts.

  • Advanced Table. It includes a component that renders a table where you can click on the columns to accomplish sorting.

Note, that repo has two pages specific to Pendo (a company I'm working with). They won't render correctly unless you have permissions for Pendo, but you can easily remove those two page by removing the folder by that name and removing it's routes from app-routes.js. I plan to clean that up and move Pendo specific stuff into it's own repo, but it was just easier to have it here as examples.

Larry Maccherone
  • 9,393
  • 3
  • 27
  • 43
  • Thanks a lot for your help. I went ahead cloned your repo, npm installed it, everything went smoothly except when I did `npm run browser:development`, I got following error: `ERROR in Cannot find module 'babel-runtime/helpers/interop-require' @ multi main`. I was doing it on Ubuntu 14.04LTS with nodejs v5.7.0 and npm v3.6.0. I certainly don't have react.native but it shouldn't cause issue if I'm just doing `npm run browser:development` (It didn't have issue when I followed mui instruction and installed the whole thing. – realbug Feb 28 '16 at 19:28
  • Sorry about that. I don't think this is your problem but the AdvancedTable component is still a work in progress. So, I just pushed something that avoids a crash for that. I'll look into the missing module issue. – Larry Maccherone Feb 28 '16 at 21:23
  • I can't duplicate your particular problem. I'm using node.js v5.1.1, but I just tried it with v0.12.1 and it didn't fail there so I don't think v3.6.0 is the problem. – Larry Maccherone Feb 28 '16 at 21:31
  • I'm on a Mac. Let me see if I have an Ubuntu vm to test with. – Larry Maccherone Feb 28 '16 at 21:33