From 6a7dd23d167a0f2ee9313ae188cf6a841a92b553 Mon Sep 17 00:00:00 2001 From: mbrookes Date: Sun, 17 Apr 2016 16:41:43 +0100 Subject: [PATCH] [Examples] Add webpack example --- examples/webpack-example/.babelrc | 3 + examples/webpack-example/.eslintrc | 35 ++++ examples/webpack-example/.gitignore | 2 + examples/webpack-example/README.md | 56 ++++++ examples/webpack-example/package.json | 37 ++++ examples/webpack-example/src/app/Main.js | 175 ++++++++++++++++++ examples/webpack-example/src/app/app.js | 14 ++ examples/webpack-example/src/www/index.html | 39 ++++ examples/webpack-example/src/www/main.css | 8 + .../webpack-dev-server.config.js | 60 ++++++ .../webpack-production.config.js | 51 +++++ 11 files changed, 480 insertions(+) create mode 100644 examples/webpack-example/.babelrc create mode 100644 examples/webpack-example/.eslintrc create mode 100644 examples/webpack-example/.gitignore create mode 100644 examples/webpack-example/README.md create mode 100644 examples/webpack-example/package.json create mode 100644 examples/webpack-example/src/app/Main.js create mode 100644 examples/webpack-example/src/app/app.js create mode 100644 examples/webpack-example/src/www/index.html create mode 100644 examples/webpack-example/src/www/main.css create mode 100644 examples/webpack-example/webpack-dev-server.config.js create mode 100644 examples/webpack-example/webpack-production.config.js diff --git a/examples/webpack-example/.babelrc b/examples/webpack-example/.babelrc new file mode 100644 index 0000000..86c445f --- /dev/null +++ b/examples/webpack-example/.babelrc @@ -0,0 +1,3 @@ +{ + "presets": ["es2015", "react"] +} diff --git a/examples/webpack-example/.eslintrc b/examples/webpack-example/.eslintrc new file mode 100644 index 0000000..b6085f8 --- /dev/null +++ b/examples/webpack-example/.eslintrc @@ -0,0 +1,35 @@ +{ + "root": true, // Don't traverse ancestor directories looking for .eslintrc[.*] files to merge. + "env": { + "es6": true, + "browser": true, + "node": true + }, + "rules": { + "curly": 0, + "comma-dangle": [2, "always-multiline"], + "comma-spacing": 0, + "eqeqeq": [2, "allow-null"], + "key-spacing": 0, + "no-underscore-dangle": 0, + "no-unused-expressions": 0, + "no-shadow": 0, + "no-shadow-restricted-names": 0, + "no-extend-native": 0, + "no-var": 2, + "new-cap": 0, + "quotes": 0, + "semi-spacing": 0, + "space-unary-ops": 0, + "space-infix-ops": 0, + "consistent-return": 0, + "strict": 0 + }, + "parser": "babel-eslint", + "plugins": [ + "react" + ], + "ecmaFeatures": { + "jsx": true + } +} diff --git a/examples/webpack-example/.gitignore b/examples/webpack-example/.gitignore new file mode 100644 index 0000000..dd87e2d --- /dev/null +++ b/examples/webpack-example/.gitignore @@ -0,0 +1,2 @@ +node_modules +build diff --git a/examples/webpack-example/README.md b/examples/webpack-example/README.md new file mode 100644 index 0000000..6e14783 --- /dev/null +++ b/examples/webpack-example/README.md @@ -0,0 +1,56 @@ +# [Material-UI](http://callemall.github.io/material-ui/) - Example Webpack Project + +This is an example project that uses [Material-UI](http://callemall.github.io/material-ui/). + +## Installation + +After cloning the repository, install dependencies: +```sh +cd /material-ui/examples/webpack-example +npm install +``` + +Now you can run your local server: +```sh +npm start +``` +Server is located at http://localhost:3000 + +Note: To allow external viewing of the demo, change the following value in `webpack-dev-server.config.js` + +``` +host: 'localhost' //Change to '0.0.0.0' for external facing server +``` + +You can also lint your code with: + +```sh +npm run lint +``` + +## Description of [Webpack](http://webpack.github.io/docs/) + +Webpack is a module bundler that we are using to run our documentation site. This is a quick overview of how the configuration file works. + +### Webpack Configuration: + +#### Entry + +Webpack creates entry points for the application to know where it starts. + +#### Resolve + +Webpack uses this configuration options to determine how it will deal with requiring files. For example, when the extension is omitted in a require, Webpack will look at the extensions option and try applying one of those. + +#### Output + +This is where the bundled project will go to and any other files necessary for it to run. + +#### Plugins + +These are plugins Webpack uses for more functionality. The HTML Webpack Plugin, for example, will add the index.html to your build folder. + +#### Modules + +Modules and other things that are required will usually need to be loaded and interpreted by Webpack when bundling, and this is where Webpack looks for the different loaders. +*Loading .js files in es6 and es7 will require a loader like babel-loader to interpret the files into es5. diff --git a/examples/webpack-example/package.json b/examples/webpack-example/package.json new file mode 100644 index 0000000..75c84ac --- /dev/null +++ b/examples/webpack-example/package.json @@ -0,0 +1,37 @@ +{ + "name": "formsy-material-ui-example-webpack", + "version": "0.15.0-beta.1", + "description": "Sample project that uses formsy-material-ui", + "repository": { + "type": "git", + "url": "https://github.com/mbrookes/formsy-material-ui.git" + }, + "scripts": { + "start": "webpack-dev-server --config webpack-dev-server.config.js --progress --inline --colors", + "build": "webpack --config webpack-production.config.js --progress --colors", + "lint": "eslint src && echo \"eslint: no lint errors\"" + }, + "private": true, + "devDependencies": { + "babel-core": "^6.3.26", + "babel-eslint": "^6.0.0", + "babel-loader": "^6.2.4", + "babel-preset-es2015": "^6.3.13", + "babel-preset-react": "^6.3.13", + "eslint": "^2.5.1", + "eslint-plugin-react": "^4.0.0", + "html-webpack-plugin": "^2.7.2", + "react-hot-loader": "^1.3.0", + "transfer-webpack-plugin": "^0.1.4", + "webpack": "^1.12.9", + "webpack-dev-server": "^1.14.0" + }, + "dependencies": { + "formsy-react": "^0.17.0", + "formsy-material-ui": "0.3.9", + "material-ui": "^0.15.0-beta.1", + "react": "^15.0.1", + "react-dom": "^15.0.1", + "react-tap-event-plugin": "^1.0.0" + } +} diff --git a/examples/webpack-example/src/app/Main.js b/examples/webpack-example/src/app/Main.js new file mode 100644 index 0000000..f81b77a --- /dev/null +++ b/examples/webpack-example/src/app/Main.js @@ -0,0 +1,175 @@ +import React from 'react'; +import Formsy from 'formsy-react'; +import getMuiTheme from 'material-ui/styles/getMuiTheme' +import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider'; +import Paper from 'material-ui/Paper'; +import RaisedButton from 'material-ui/RaisedButton'; +import MenuItem from 'material-ui/MenuItem'; +import FormsyCheckbox from 'formsy-material-ui/lib/FormsyCheckbox'; +import FormsyDate from 'formsy-material-ui/lib/FormsyDate'; +import FormsyRadio from 'formsy-material-ui/lib/FormsyRadio'; +import FormsyRadioGroup from 'formsy-material-ui/lib/FormsyRadioGroup'; +import FormsySelect from 'formsy-material-ui/lib/FormsySelect'; +import FormsyText from 'formsy-material-ui/lib/FormsyText'; +import FormsyTime from 'formsy-material-ui/lib/FormsyTime'; +import FormsyToggle from 'formsy-material-ui/lib/FormsyToggle'; + +const muiTheme = getMuiTheme(); + +const Main = React.createClass({ + + // childContextTypes: { + // muiTheme: React.PropTypes.object, + // }, + // + // getChildContext(){ + // return { + // muiTheme: getMuiTheme(), + // } + // }, + + getInitialState() { + return { + canSubmit: false, + }; + }, + + errorMessages: { + wordsError: "Please only use letters", + numericError: "Please provide a number", + urlError: "Please provide a valid URL", + }, + + styles: { + paperStyle: { + width: 300, + margin: 'auto', + padding: 20, + }, + switchStyle: { + marginBottom:16, + }, + submitStyle: { + marginTop: 32, + }, + }, + + enableButton() { + this.setState({ + canSubmit: true, + }); + }, + + disableButton() { + this.setState({ + canSubmit: false, + }); + }, + + submitForm(data) { + alert(JSON.stringify(data, null, 4)); + }, + + notifyFormError(data) { + console.error('Form error:', data); + }, + + render() { + let {paperStyle, switchStyle, submitStyle } = this.styles; + let { wordsError, numericError, urlError } = this.errorMessages; + + return ( + + + + + + + + + + + + + + + + + + + + + + + + + ); + }, +}); + +export default Main; diff --git a/examples/webpack-example/src/app/app.js b/examples/webpack-example/src/app/app.js new file mode 100644 index 0000000..8c880e7 --- /dev/null +++ b/examples/webpack-example/src/app/app.js @@ -0,0 +1,14 @@ +import React from 'react'; +import ReactDOM from 'react-dom'; +import injectTapEventPlugin from 'react-tap-event-plugin'; +import Main from './Main'; // Our custom react component + +//Needed for onTouchTap +//Can go away when react 1.0 release +//Check this repo: +//https://github.com/zilverline/react-tap-event-plugin +injectTapEventPlugin(); + +// Render the main app react component into the app div. +// For more details see: https://facebook.github.io/react/docs/top-level-api.html#react.render +ReactDOM.render(
, document.getElementById('app')); diff --git a/examples/webpack-example/src/www/index.html b/examples/webpack-example/src/www/index.html new file mode 100644 index 0000000..4bcbdd5 --- /dev/null +++ b/examples/webpack-example/src/www/index.html @@ -0,0 +1,39 @@ + + + + + + + Material-UI Example + + + + + + + + +
+ + + + + + + diff --git a/examples/webpack-example/src/www/main.css b/examples/webpack-example/src/www/main.css new file mode 100644 index 0000000..8de5a81 --- /dev/null +++ b/examples/webpack-example/src/www/main.css @@ -0,0 +1,8 @@ +html { + font-family: 'Roboto', sans-serif; +} + +body { + font-size: 13px; + line-height: 20px; +} \ No newline at end of file diff --git a/examples/webpack-example/webpack-dev-server.config.js b/examples/webpack-example/webpack-dev-server.config.js new file mode 100644 index 0000000..6bb73b6 --- /dev/null +++ b/examples/webpack-example/webpack-dev-server.config.js @@ -0,0 +1,60 @@ +const webpack = require('webpack'); +const path = require('path'); +const buildPath = path.resolve(__dirname, 'build'); +const nodeModulesPath = path.resolve(__dirname, 'node_modules'); +const TransferWebpackPlugin = require('transfer-webpack-plugin'); + +const config = { + //Entry points to the project + entry: [ + 'webpack/hot/dev-server', + 'webpack/hot/only-dev-server', + path.join(__dirname, '/src/app/app.js'), + ], + //Config options on how to interpret requires imports + resolve: { + extensions: ["", ".js"], + //node_modules: ["web_modules", "node_modules"] (Default Settings) + }, + //Server Configuration options + devServer:{ + contentBase: 'src/www', //Relative directory for base of server + devtool: 'eval', + hot: true, //Live-reload + inline: true, + port: 3000, //Port Number + host: 'localhost', //Change to '0.0.0.0' for external facing server + }, + devtool: 'eval', + output: { + path: buildPath, //Path of output file + filename: 'app.js', + }, + plugins: [ + //Enables Hot Modules Replacement + new webpack.HotModuleReplacementPlugin(), + //Allows error warnings but does not stop compiling. Will remove when eslint is added + new webpack.NoErrorsPlugin(), + //Moves files + new TransferWebpackPlugin([ + {from: 'www'}, + ], path.resolve(__dirname, "src")), + ], + module: { + loaders: [ + { + //React-hot loader and + test: /\.js$/, //All .js files + loaders: ['react-hot', 'babel-loader'], //react-hot is like browser sync and babel loads jsx and es6-7 + // loaders: ['react-hot'], //react-hot is like browser sync and babel loads jsx and es6-7 + exclude: [nodeModulesPath, /formsy-material-ui\/node_modueles/], // Make it work with `npm link`ed fmui + }, + ], + }, + //eslint config options. Part of the eslint-loader package + eslint: { + configFile: '.eslintrc', + }, +}; + +module.exports = config; diff --git a/examples/webpack-example/webpack-production.config.js b/examples/webpack-example/webpack-production.config.js new file mode 100644 index 0000000..e024ace --- /dev/null +++ b/examples/webpack-example/webpack-production.config.js @@ -0,0 +1,51 @@ +const webpack = require('webpack'); +const path = require('path'); +const buildPath = path.resolve(__dirname, 'build'); +const nodeModulesPath = path.resolve(__dirname, 'node_modules'); +const TransferWebpackPlugin = require('transfer-webpack-plugin'); + +const config = { + entry: [path.join(__dirname, '/src/app/app.js')], + resolve: { + //When require, do not have to add these extensions to file's name + extensions: ["", ".js"], + //node_modules: ["web_modules", "node_modules"] (Default Settings) + }, + //Render source-map file for final build + devtool: 'source-map', + //output config + output: { + path: buildPath, //Path of output file + filename: 'app.js', //Name of output file + }, + plugins: [ + //Minify the bundle + new webpack.optimize.UglifyJsPlugin({ + compress: { + //supresses warnings, usually from module minification + warnings: false, + }, + }), + //Allows error warnings but does not stop compiling. Will remove when eslint is added + new webpack.NoErrorsPlugin(), + //Transfer Files + new TransferWebpackPlugin([ + {from: 'www'}, + ], path.resolve(__dirname,"src")), + ], + module: { + loaders: [ + { + test: /\.js$/, // All .js files + loaders: ['babel-loader'], //react-hot is like browser sync and babel loads jsx and es6-7 + exclude: [nodeModulesPath], + }, + ], + }, + //Eslint config + eslint: { + configFile: '.eslintrc', //Rules for eslint + }, +}; + +module.exports = config;