CODEWITHSUNDEEP
reactjsmaterial-ui
realbug
realbug

Reputation: 448

How to install Material-UI Docs WITHOUT installing material-ui?

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.

Upvotes: 7

Views: 2727

Answers (1)

Larry Maccherone
Larry Maccherone

Reputation: 9523

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.

Upvotes: 3

Related Questions