├── .babelrc ├── .editorconfig ├── .eslintrc ├── .gitignore ├── .travis.yml ├── LICENSE ├── README.md ├── index.html ├── package.json ├── src ├── app.jsx ├── styles.css └── styles.scss ├── webpack.config.js └── webpack.production.config.js /.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets" : ["es2015", "react"] 3 | } 4 | -------------------------------------------------------------------------------- /.editorconfig: -------------------------------------------------------------------------------- 1 | root = true 2 | 3 | [*] 4 | insert_final_newline = true 5 | charset = utf-8 6 | indent_style = tab 7 | indent_size = 4 8 | end_of_line = lf 9 | trim_trailing_whitespace = true 10 | 11 | [*.md] 12 | trim_trailing_whitespace = false 13 | -------------------------------------------------------------------------------- /.eslintrc: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "airbnb", 3 | "rules":{ 4 | "indent": [2, "tab"], 5 | } 6 | } 7 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # Logs 2 | logs 3 | *.log 4 | npm-debug.log* 5 | 6 | # Runtime data 7 | pids 8 | *.pid 9 | *.seed 10 | 11 | # Directory for instrumented libs generated by jscoverage/JSCover 12 | lib-cov 13 | 14 | # Coverage directory used by tools like istanbul 15 | coverage 16 | 17 | # Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files) 18 | .grunt 19 | 20 | # node-waf configuration 21 | .lock-wscript 22 | 23 | # Compiled binary addons (http://nodejs.org/api/addons.html) 24 | build/Release 25 | 26 | # Dependency directories 27 | node_modules 28 | jspm_packages 29 | 30 | # Optional npm cache directory 31 | .npm 32 | 33 | # Optional REPL history 34 | .node_repl_history 35 | 36 | 37 | 38 | .DS_Store 39 | demo-es6.js 40 | -------------------------------------------------------------------------------- /.travis.yml: -------------------------------------------------------------------------------- 1 | language: node_js 2 | node_js: 3 | - "5" 4 | - "5.1" 5 | - "4" 6 | - "4.2" 7 | - "4.1" 8 | - "4.0" 9 | - "0.12" 10 | - "0.11" 11 | - "0.10" 12 | - "iojs" 13 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | The MIT License (MIT) 2 | 3 | Copyright (c) 2016 Siamak Mokhtari 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # 🍉 Webpack–React–Babel Boilerplate: 2 | 3 | [![forthebadge](http://forthebadge.com/images/badges/uses-js.svg)](https://github.com/siamakmokhtari/webpack-react-babel-boilerplate/) 4 | 5 | This repo is a boilerplate for Webpack-React-Babel project. You could use it as a base to build your own web app. 6 | 7 | Boilerplate for kick starting a project with the following technologies: 8 | * [React](https://github.com/facebook/react) (ver 15) 9 | * [Babel](http://babeljs.io) 10 | * [Webpack](http://webpack.github.io) 11 | * [Webpack Dev Server](http://webpack.github.io/docs/webpack-dev-server.html) 12 | * [CSS-Loader](https://github.com/webpack/css-loader) 13 | * [Sass-Loader](https://github.com/jtangelder/sass-loader) 14 | * Lint with [ESlint](http://eslint.org) and [Airbnb](https://github.com/airbnb/javascript/tree/master/packages/eslint-config-airbnb)'s `.eslintrc` and [ESlint for React](https://github.com/yannickcr/eslint-plugin-react) 15 | * Support [hot module replacement](https://webpack.github.io/docs/hot-module-replacement.html) 16 | * Support NODE_ENV – Production `webpack.production.config.js` Development `webpack.config.js` 17 | 18 | ## 🔥 How to use 19 | 20 | First, you should clone the repo and install the dependencies. 21 | 22 | ```bash 23 | $ git clone git@github.com:siamakmokhtari/webpack-react-babel-boilerplate.git 24 | $ cd 25 | $ [sudo] npm install 26 | ``` 27 | 28 | Then, launch the boilerplate app. 29 | 30 | For Serve app: 31 | ```bash 32 | $ npm start 33 | ``` 34 | 35 | For Deploy app (UglifyJSPlugin – bundling): 36 | ```bash 37 | $ npm run deploy 38 | ``` 39 | You should see a new browser tab opening and a title of "Hello World" in `http://127.0.0.1:9100` || `http://localhost:9100`. 40 | 41 | 42 | 43 | ## 🍀 License 44 | Copyright (c) 2016 Siamak Mokhtari. Licensed under [MIT](http://siamak.mit-license.org). 45 | 46 | ``` 47 | The MIT License (MIT) 48 | 49 | Copyright (c) 2016 Siamak Mokhtari s.mokhtari75@gmail.com 50 | 51 | Permission is hereby granted, free of charge, to any person obtaining a copy of 52 | this software and associated documentation files (the "Software"), to deal in 53 | the Software without restriction, including without limitation the rights to 54 | use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of 55 | the Software, and to permit persons to whom the Software is furnished to do so, 56 | subject to the following conditions: 57 | 58 | The above copyright notice and this permission notice shall be included in all 59 | copies or substantial portions of the Software. 60 | 61 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 62 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS 63 | FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR 64 | COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER 65 | IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN 66 | CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. 67 | ``` 68 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Simple React app with Webpack 6 | 7 | 8 |
9 | If you See this text then something is Wrong!!! 10 |
11 | 12 | 13 | 14 | 15 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "webpack-react-babel-boilerplate", 3 | "version": "1.0.0", 4 | "description": "Webpack, React, Babel for an app!", 5 | "scripts": { 6 | "start": "webpack-dev-server --devtool eval --progress --colors", 7 | "deploy": "NODE_ENV=production webpack -p --config webpack.production.config.js", 8 | "lint": "./node_modules/.bin/eslint --ext jsx --ext js src || true" 9 | }, 10 | "keywords": [ 11 | "webpack", 12 | "react", 13 | "babel", 14 | "css-loader", 15 | "autoprefixer", 16 | "boilerplate" 17 | ], 18 | "author": "Siamak Mokhtari (http://siamak.us)", 19 | "license": "MIT", 20 | "dependencies": { 21 | "autoprefixer": "^6.3.3", 22 | "babel-core": "^6.7.2", 23 | "babel-loader": "^6.2.4", 24 | "babel-preset-es2015": "^6.6.0", 25 | "eslint": "^2.4.0", 26 | "eslint-config-airbnb": "^6.1.0", 27 | "eslint-plugin-react": "^4.2.3", 28 | "node-sass": "^3.4.2", 29 | "open-browser-webpack-plugin": "0.0.2", 30 | "postcss-loader": "^0.8.2", 31 | "react": "^15.2.1", 32 | "react-dom": "^15.2.1", 33 | "sass-loader": "^3.2.0", 34 | "webpack": "^1.12.14", 35 | "webpack-dev-server": "^1.14.1" 36 | }, 37 | "devDependencies": { 38 | "babel-preset-react": "^6.5.0", 39 | "css-loader": "^0.23.1", 40 | "react-hot-loader": "^1.3.0", 41 | "style-loader": "^0.13.0" 42 | } 43 | } 44 | -------------------------------------------------------------------------------- /src/app.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom'; 3 | 4 | // 5 | // Stylesheets : 6 | import CSSStyles from './styles.css'; // ## Disabled 7 | import Styles from './styles.scss'; // ## Enabled 8 | 9 | // 10 | // Just For watching `css-loader`. It has been used `sass-laoder` 11 | console.log(CSSStyles); 12 | 13 | class App extends React.Component { 14 | constructor(props) { 15 | super(props); 16 | this.state = { 17 | person: 'Siamak', 18 | } 19 | } 20 | render() { 21 | return ( 22 |
23 |

24 | 30 | , Hello React! 31 |

32 |

Webpack–Reactjs–Babel `ES6` — Fork me.

33 |
34 | ); 35 | } 36 | } 37 | export default App; 38 | 39 | 40 | ReactDOM.render( 41 | , 42 | document.querySelector('#app') 43 | ); 44 | -------------------------------------------------------------------------------- /src/styles.css: -------------------------------------------------------------------------------- 1 | body { 2 | background-color: #eee; 3 | font-family: Avenir, Helvetica, Tahoma; 4 | font-weight: 200; 5 | color: #343434; 6 | margin: 0; 7 | } 8 | a { 9 | color: #777; 10 | } 11 | a:hover { 12 | color: #00BCD4; 13 | } 14 | 15 | :local .myWrapper { 16 | display: flex; 17 | align-items: center; 18 | justify-content: center; 19 | flex: 1; 20 | min-height: 100vh; 21 | min-width: 100vw; 22 | } 23 | 24 | :local .myWrapper .hero { 25 | font-size: 3rem; 26 | } 27 | 28 | :local .lead { 29 | display: block; 30 | margin: 0 1em; 31 | font-size: calc(.2vw + 1rem); 32 | line-height: 1; 33 | opacity: .8; 34 | /*letter-spacing: -.1vw;*/ 35 | } 36 | 37 | :local .person { 38 | color: #00BCD4; 39 | } 40 | 41 | :local .person:focus{ 42 | outline: 0; 43 | border-bottom: 2px dashed currentcolor; 44 | } 45 | -------------------------------------------------------------------------------- /src/styles.scss: -------------------------------------------------------------------------------- 1 | @mixin box($padding: 10px) { 2 | padding: $padding; 3 | color: desaturate(#3d435e, 50%); 4 | background-color: #3d435e; 5 | } 6 | 7 | :local .box { 8 | @include box(1rem); 9 | .hero-title{ 10 | margin: 0; 11 | margin-bottom: 1em; 12 | } 13 | } 14 | 15 | // colors 16 | $color_gallery_approx: #eee; 17 | $color_tuatara_approx: #343434; 18 | $color_tapa_approx: #777; 19 | $color_robins_egg_blue_approx: saturate(lighten(#d0a8a0, 2.1), 10); 20 | 21 | body { 22 | background-color: $color_gallery_approx; 23 | font-family: Avenir, Helvetica, Tahoma; 24 | font-weight: 200; 25 | color: $color_tuatara_approx; 26 | margin: 0; 27 | } 28 | a { 29 | color: $color_tapa_approx; 30 | &:hover { 31 | color: $color_robins_egg_blue_approx; 32 | } 33 | } 34 | 35 | :local .myWrapper { 36 | display: flex; 37 | align-items: center; 38 | justify-content: center; 39 | flex: 1; 40 | min-height: 100vh; 41 | min-width: 100vw; 42 | .hero { 43 | font-size: 3rem; 44 | } 45 | } 46 | 47 | :local .lead { 48 | display: block; 49 | margin: 0 1em; 50 | font-size: calc(96% + 0.5vw); 51 | line-height: 1.5; 52 | opacity: .8; 53 | } 54 | 55 | :local .person { 56 | color: $color_robins_egg_blue_approx; 57 | &:focus { 58 | outline: 0; 59 | border-bottom: 2px dashed currentcolor; 60 | } 61 | } 62 | -------------------------------------------------------------------------------- /webpack.config.js: -------------------------------------------------------------------------------- 1 | /* eslint-disable */ 2 | var path = require('path'), 3 | webpack = require('webpack'), 4 | autoprefixer = require('autoprefixer'), 5 | OpenBrowserPlugin = require('open-browser-webpack-plugin'); 6 | 7 | var configServe = { 8 | port: 9100, 9 | }; 10 | 11 | 12 | module.exports = { 13 | devServer: { 14 | hot: true, 15 | inline: true, 16 | historyApiFallback: true, 17 | progress: true, 18 | port: configServe.port, 19 | }, 20 | // entry: path.resolve(__dirname, './src/app.jsx'), 21 | 22 | entry: [ 23 | 'webpack/hot/dev-server', 24 | 'webpack-dev-server/client?http://localhost:' + configServe.port, 25 | path.resolve(__dirname, './src/app.jsx'), 26 | ], 27 | output: { 28 | path: __dirname, 29 | filename: './dist/bundle.js', 30 | }, 31 | module: { 32 | loaders: [ 33 | { 34 | // JSX files : 35 | test: /\.js[x]?$/, 36 | include: path.resolve(__dirname, 'src'), 37 | exclude: /node_modules/, 38 | loader: 'react-hot!babel-loader?presets[]=es2015&presets[]=react', 39 | }, 40 | { 41 | // CSS files : 42 | test: /\.css?$/, 43 | include: path.resolve(__dirname, 'src'), 44 | loader: 'style-loader!css-loader!postcss-loader', 45 | }, 46 | { 47 | // SCSS files : 48 | test: /\.scss?$/, 49 | include: path.resolve(__dirname, 'src'), 50 | loader: 'style-loader!css-loader!postcss-loader!sass', 51 | }, 52 | ], 53 | }, 54 | postcss: [ 55 | autoprefixer({ browsers: ['last 3 versions'] }), 56 | ], 57 | 58 | plugins: [ 59 | // Avoid publishing files when compilation fails 60 | new webpack.NoErrorsPlugin(), 61 | new webpack.HotModuleReplacementPlugin(), 62 | new OpenBrowserPlugin({ url: 'http://localhost:' + configServe.port }), 63 | ], 64 | 65 | resolve: { 66 | extensions: ['', '.js', '.jsx'], 67 | }, 68 | 69 | stats: { 70 | // Nice colored output 71 | colors: true, 72 | }, 73 | 74 | // Create Sourcemaps for the bundle 75 | devtool: 'source-map', 76 | }; 77 | -------------------------------------------------------------------------------- /webpack.production.config.js: -------------------------------------------------------------------------------- 1 | /* eslint-disable */ 2 | var path = require('path'), 3 | webpack = require('webpack'), 4 | autoprefixer = require('autoprefixer'), 5 | uglifyJsPlugin = webpack.optimize.UglifyJsPlugin; 6 | 7 | 8 | module.exports = { 9 | entry: [ 10 | path.resolve(__dirname, 'src/app.jsx'), 11 | ], 12 | output: { 13 | path: __dirname, 14 | filename: './dist/bundle.js', 15 | }, 16 | module: { 17 | loaders: [ 18 | { 19 | // JSX files : 20 | test: /\.js[x]?$/, 21 | include: path.resolve(__dirname, 'src'), 22 | exclude: /node_modules/, 23 | loader: 'babel-loader?presets[]=es2015&presets[]=react', 24 | }, 25 | { 26 | // CSS files : 27 | test: /\.css?$/, 28 | include: path.resolve(__dirname, 'src'), 29 | loader: 'style-loader!css-loader!postcss-loader', 30 | }, 31 | { 32 | // SCSS files : 33 | test: /\.scss?$/, 34 | include: path.resolve(__dirname, 'src'), 35 | loader: 'style-loader!css-loader!postcss-loader!sass', 36 | }, 37 | ], 38 | }, 39 | postcss: [ 40 | autoprefixer({ browsers: ['last 3 versions'] }), 41 | ], 42 | 43 | resolve: { 44 | extensions: ['', '.js', '.jsx'], 45 | }, 46 | 47 | plugins: [ 48 | new webpack.optimize.DedupePlugin(), 49 | new webpack.DefinePlugin({ 50 | "process.env": { 51 | NODE_ENV: JSON.stringify("production") 52 | } 53 | }), 54 | new uglifyJsPlugin({ 55 | compress: { 56 | warnings: false 57 | } 58 | }), 59 | ], 60 | 61 | 62 | // Create Sourcemaps for the bundle 63 | devtool: 'source-map', 64 | }; 65 | --------------------------------------------------------------------------------