How to create material-ui.js file?

Question

I've followed the getting started guide and have the example running, but it seems to load all of the js components from the example lib folder as separate resources. How do I get it to build a single material-ui.js (or material-ui.min.js) file which I just reference from my html? Do I use npm, gulp, browserify, etc? If so, how? I am not at all familiar with the javascript build and packaging tools. I just want a single js file to include in my static resources, like react.min.js

Answer 1

npm install material-ui
npm install -g webpack
webpack node_modules/material-ui/lib/index.js material-ui.js

You're probably using babel to transform your inline jsx (ie. following the React tutorial), so you can use the es6 import syntax:

import React from 'react';
import FlatButton from 'material-ui/lib/flat-button';

The whole script block is:

<script type="text/babel">      
    import React from 'react';
    import FlatButton from 'material-ui/lib/flat-button';


    const FlatButtonExampleSimple = () => (
      <div>
        <FlatButton label="Default" />
        <FlatButton label="Primary" primary={true} />
        <FlatButton label="Secondary" secondary={true} />
        <FlatButton label="Disabled" disabled={true} />
      </div>
    );      

    ReactDOM.render(
      <FlatButtonExampleSimple />,
      document.getElementById('content')
    );
</script>

Answer 2

you have to follow the guids

First go to example folder

cd <project folder>/material-ui/examples/browserify-gulp-example

Run this

npm install

It will install all required packages described in package.json

Then

npm start

It will run web server

And finally just run gulp

gulp

It will run all gulp tasks described here

browserify-gulp-example/gulp/tasks

In result you will come with file app.js in build folder

You can include it in your html as usually

<script src="app.js"></script>

Now you can run http://localhost:3000 and check for result