├── .eslintrc
├── .gitignore
├── .travis.yml
├── LICENSE
├── README.md
├── app
    ├── __tests__
    │   └── test_helper.js
    ├── components
    │   ├── App.jsx
    │   ├── Hello.jsx
    │   ├── __tests__
    │   │   ├── App_test.js
    │   │   └── Hello_test.js
    │   ├── app.css
    │   ├── hello.css
    │   └── shared
    │   │   ├── backgrounds.css
    │   │   ├── borders.css
    │   │   ├── button.css
    │   │   ├── layout.css
    │   │   └── typography.css
    ├── index.css
    ├── index.jsx
    └── routes.jsx
├── conf
    └── tmpl.html
├── package.json
└── webpack.config.js


/.eslintrc:
--------------------------------------------------------------------------------
 1 | {
 2 |   "parser": "babel-eslint",
 3 |   "plugins": [
 4 |     "react"
 5 |   ],
 6 |   "env": {
 7 |     "browser": true,
 8 |     "node": true
 9 |   },
10 |   "rules": {
11 |     "quotes": [2, "single"],
12 |     "eol-last": [0],
13 |     "semi": [2, "never"],
14 |     "no-mixed-requires": [0],
15 |     "no-underscore-dangle": [0]
16 |   }
17 | }
18 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | node_modules/
2 | dist/
3 | static/
4 | npm-debug.log
5 | 


--------------------------------------------------------------------------------
/.travis.yml:
--------------------------------------------------------------------------------
1 | language: node_js
2 | node_js:
3 |   - "5.1.0"
4 | 


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | The MIT License (MIT)
 2 | 
 3 | Copyright (c) 2015 Chris Keathley
 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 - Skeleton
 2 | 
 3 | <img src="https://travis-ci.org/keathley/webpack-react-skeleton.svg?branch=master" />
 4 | 
 5 | This is just the basic skeleton that I use to create a new react apps.  I've included all of the things that I like:
 6 | 
 7 | * React
 8 | * Webpack
 9 | * PostCSS
10 | * CSS Modules
11 | * React-Router
12 | * Babel support
13 | * Hot reloading and push state
14 | * ESLint
15 | * Mocha + Chai + Enzyme
16 | 
17 | and more!
18 | 
19 | ## Getting started
20 | 
21 | To get started you just need to run the following:
22 | 
23 |     $ npm install
24 |     $ webpack
25 |     $ npm start
26 | 
27 | Running `npm start` will start webpack and the webpack hot reload server.
28 | 
29 | ## Production Builds
30 | 
31 | If you want to deploy your assets then run this:
32 | 
33 |     $ npm run deploy
34 | 
35 | You'll now have a minified and hashed version of all of your assets.  By default vendor files and css are split out of the main bundle and cached separately.  If you add more vendor files and want them to be split out then make sure you add them to the vendor entrypoint.
36 | 
37 | ## Contributing
38 | 
39 | If you have something that you think goes in here then feel free to open an issue, PR, or message me directly at @ChrisKeathley.
40 | 


--------------------------------------------------------------------------------
/app/__tests__/test_helper.js:
--------------------------------------------------------------------------------
1 | import chai from 'chai'
2 | import chaiImmutable from 'chai-immutable'
3 | import 'css-modules-require-hook/preset'
4 | 
5 | chai.use(chaiImmutable)
6 | 


--------------------------------------------------------------------------------
/app/components/App.jsx:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | 
 3 | import { app } from './app.css'
 4 | import { mastHead } from './shared/typography'
 5 | 
 6 | const App = React.createClass({
 7 |   render() {
 8 |     return (
 9 |       <main className={ app }>
10 |         <h1 className={ mastHead }>Test Application</h1>
11 |         {this.props.children}
12 |       </main>
13 |     );
14 |   }
15 | });
16 | 
17 | export default App
18 | 


--------------------------------------------------------------------------------
/app/components/Hello.jsx:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | 
 3 | import { text, title } from './shared/typography'
 4 | import { hello } from './hello.css'
 5 | import btn from './shared/button'
 6 | 
 7 | const Hello = React.createClass({
 8 |   render() {
 9 |     return (
10 |       <div className={ hello }>
11 |         <h2 className={ title }>
12 |           Hello New React App.
13 |         </h2>
14 | 
15 |         <p className={ text }>
16 |           Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
17 |           eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim
18 |           ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
19 |           aliquip ex ea commodo consequat. Duis aute irure dolor in
20 |           reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
21 |           pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
22 |           culpa qui officia deserunt mollit anim id est laborum.
23 |         </p>
24 | 
25 |         <button className={ btn.normal } role="button">
26 |           This is a normal button
27 |         </button>
28 | 
29 |         <button className={ btn.primary } role="button">
30 |           This is a primary button
31 |         </button>
32 | 
33 |         <button className={ btn.danger } role="button">
34 |           This is an error button
35 |         </button>
36 |       </div>
37 |     )
38 |   }
39 | })
40 | 
41 | export default Hello
42 | 


--------------------------------------------------------------------------------
/app/components/__tests__/App_test.js:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | import { shallow } from 'enzyme'
 3 | import { expect } from 'chai'
 4 | import App from '../App'
 5 | 
 6 | describe('App', () => {
 7 |   it('renders', () => {
 8 |     const component = shallow(<App />)
 9 |     expect(component.find('h1').text()).to.equal("Test Application")
10 |   })
11 | })
12 | 


--------------------------------------------------------------------------------
/app/components/__tests__/Hello_test.js:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | import { expect } from 'chai'
 3 | import { shallow } from 'enzyme'
 4 | import Hello from '../Hello'
 5 | 
 6 | describe('Hello Component', () => {
 7 |   let component
 8 | 
 9 |   beforeEach(() => {
10 |     component = shallow(<Hello />)
11 |   })
12 | 
13 |   it('has some initial text', () => {
14 |     const text = component.find('h2').text()
15 |     expect(text).to.equal('Hello New React App.')
16 |   })
17 | })
18 | 


--------------------------------------------------------------------------------
/app/components/app.css:
--------------------------------------------------------------------------------
1 | .app {
2 |   composes: centered from "./shared/layout.css";
3 | }
4 | 


--------------------------------------------------------------------------------
/app/components/hello.css:
--------------------------------------------------------------------------------
1 | .hello {
2 |   composes: bordered rounded subtle from "./shared/borders.css";
3 |   padding: 1rem;
4 | }
5 | 


--------------------------------------------------------------------------------
/app/components/shared/backgrounds.css:
--------------------------------------------------------------------------------
 1 | .transparent { background-color: transparent; }
 2 | .white   { background-color: #fff; }
 3 | .primary { background-color: #2185D0; }
 4 | .subtle  { background-color: #e0e1e2; }
 5 | .danger  { background-color: #db2828; }
 6 | 
 7 | .primary-hover:hover { background-color: #176dad; }
 8 | .subtle-hover:hover  { background-color: #b0b0b0; }
 9 | .danger-hover:hover  { background-color: #b32020; }
10 | 


--------------------------------------------------------------------------------
/app/components/shared/borders.css:
--------------------------------------------------------------------------------
 1 | .dark    { border-color: #555; }
 2 | .primary { border-color: #2185D0; }
 3 | .subtle  { border-color: #e0e1e2; }
 4 | .danger  { border-color: #db2828; }
 5 | 
 6 | .primary-hover:hover { border-color: #176dad; }
 7 | .subtle-hover:hover  { border-color: #b0b0b0; }
 8 | .danger-hover:hover  { border-color: #b32020; }
 9 | 
10 | .bordered {
11 |   border-width: 1px;
12 |   border-style: solid;
13 | }
14 | 
15 | .rounded { border-radius: 0.2rem; }
16 | 


--------------------------------------------------------------------------------
/app/components/shared/button.css:
--------------------------------------------------------------------------------
 1 | .common {
 2 |   composes: bordered rounded from "./borders.css";
 3 |   composes: regular normal from "./typography.css";
 4 |   composes: transparent from "./backgrounds.css";
 5 |   padding: 0.75rem 1rem;
 6 | 
 7 |   transition: all 0.1s ease;
 8 | }
 9 | 
10 | .common + .common { margin-left: 0.5rem; }
11 | 
12 | .normal {
13 |   composes: common;
14 |   composes: subtle subtle-hover from "./typography.css";
15 |   composes: subtle subtle-hover from "./backgrounds.css";
16 |   composes: subtle subtle-hover from "./borders.css";
17 | }
18 | 
19 | .primary {
20 |   composes: common;
21 |   composes: white from "./typography.css";
22 |   composes: primary primary-hover from "./backgrounds.css";
23 |   composes: primary primary-hover from "./borders.css";
24 | }
25 | 
26 | .danger {
27 |   composes: common;
28 |   composes: white from "./typography.css";
29 |   composes: danger danger-hover from "./backgrounds.css";
30 |   composes: danger danger-hover from "./borders.css";
31 | }
32 | 


--------------------------------------------------------------------------------
/app/components/shared/layout.css:
--------------------------------------------------------------------------------
1 | .large { max-width: 42rem; }
2 | 
3 | .centered {
4 |   composes: large;
5 |   margin-right: auto;
6 |   margin-left: auto;
7 | }
8 | 


--------------------------------------------------------------------------------
/app/components/shared/typography.css:
--------------------------------------------------------------------------------
 1 | .white { color: #fff; }
 2 | .primary { color: #222; }
 3 | .subtle { color: rgba(0, 0, 0, 0.6); }
 4 | 
 5 | .subtle-hover:hover { color: rgba(0, 0, 0, 0.8); }
 6 | 
 7 | .line-height { line-height: 1.5; }
 8 | 
 9 | .light  { font-weight: 200; }
10 | .normal { font-weight: 400; }
11 | .heavy  { font-weight: 600; }
12 | 
13 | .small   { font-size: 0.8rem; }
14 | .regular { font-size: 1rem; }
15 | .medium  { font-size: 1.4rem; }
16 | .large   { font-size: 2rem; }
17 | 
18 | .uppercase { text-transform: uppercase; }
19 | 
20 | .base { font-family: Helvetica Neue, Helvetica, Arial, sans-serif; }
21 | 
22 | .center { text-align: center; }
23 | 
24 | .text {
25 |   composes: regular line-height light primary;
26 |   margin: 0 0 1.25rem;
27 | }
28 | 
29 | .title {
30 |   composes: heavy medium primary;
31 |   margin-bottom: 0.5rem;
32 |   line-height: 1.1;
33 | }
34 | 
35 | .mastHead {
36 |   composes: heavy large center primary;
37 |   margin-bottom: 4rem;
38 | }
39 | 


--------------------------------------------------------------------------------
/app/index.css:
--------------------------------------------------------------------------------
 1 | @import "normalize.css/normalize";
 2 | 
 3 | .index {
 4 |   composes: base from "./components/shared/typography.css";
 5 | }
 6 | 
 7 | /* Box Sizing */
 8 | 
 9 | html { box-sizing: border-box; }
10 | 
11 | html,
12 | body {
13 |   margin: 0;
14 |   padding: 0;
15 | }
16 | 
17 | *,
18 | *:before,
19 | *:after { box-sizing: border-box; }
20 | 
21 | body {
22 |   font-feature-settings: "kern", "liga", "pnum";
23 |   text-rendering: optimizeLegibility;
24 |   font-smoothing: antialiased;
25 | }
26 | 


--------------------------------------------------------------------------------
/app/index.jsx:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | import ReactDOM from 'react-dom'
 3 | import { Router, browserHistory } from 'react-router'
 4 | import { routes } from './routes'
 5 | 
 6 | import './index.css'
 7 | 
 8 | ReactDOM.render(
 9 |   <Router history={browserHistory}>{routes}</Router>
10 | , document.getElementById('app')
11 | )
12 | 


--------------------------------------------------------------------------------
/app/routes.jsx:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | import { Route } from 'react-router'
 3 | 
 4 | import App from './components/App'
 5 | import Hello from './components/Hello'
 6 | 
 7 | export const routes = (
 8 |   <Route component={App}>
 9 |     <Route path="/" component={Hello} />
10 |   </Route>
11 | )
12 | 


--------------------------------------------------------------------------------
/conf/tmpl.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en-us">
 3 |   <head>
 4 |     <title><%= htmlWebpackPlugin.options.title %></title>
 5 |     <meta charset="UTF-8">
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1">
 7 |     <meta http-equiv="X-UA-Compatible" content="IE=Edge">
 8 |   </head>
 9 |   <body class="index">
10 |     <div id='app'></div>
11 |   </body>
12 | </html>
13 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "webpack-react-skeleton",
 3 |   "version": "0.3.0",
 4 |   "description": "Keathley's skeleton for building apps with react and webpack",
 5 |   "main": "bundle.js",
 6 |   "scripts": {
 7 |     "env": "env",
 8 |     "start": "webpack-dev-server --hot",
 9 |     "test": "mocha --require app/__tests__/test_helper.js --compilers jsx?:babel-core/register 'app/**/*_test.@(js|jsx)'",
10 |     "test:watch": "npm run test -- --watch",
11 |     "build": "NODE_ENV=production webpack -p --config webpack.config.js",
12 |     "clean": "test -d dist && rm -r dist/"
13 |   },
14 |   "repository": {
15 |     "type": "git",
16 |     "url": "https://github.com/keathley/webpack-react-skeleton.git"
17 |   },
18 |   "keywords": [
19 |     "webpack",
20 |     "babel",
21 |     "postcss",
22 |     "react",
23 |     "eslint",
24 |     "skeleton"
25 |   ],
26 |   "author": "Chris Keathley",
27 |   "license": "MIT",
28 |   "bugs": {
29 |     "url": "https://github.com/keathley/webpack-react-skeleton/issues"
30 |   },
31 |   "homepage": "https://github.com/keathley/webpack-react-skeleton",
32 |   "babel": {
33 |     "presets": [
34 |       "es2015",
35 |       "react"
36 |     ]
37 |   },
38 |   "dependencies": {
39 |     "history": "^3.0.0",
40 |     "immutable": "^3.7.5",
41 |     "normalize.css": "^4.2.0",
42 |     "react": "^15.2.1",
43 |     "react-dom": "^15.2.1",
44 |     "react-router": "^2.6.0"
45 |   },
46 |   "devDependencies": {
47 |     "autoprefixer": "^6.1.2",
48 |     "babel-core": "^6.3.15",
49 |     "babel-loader": "^6.2.0",
50 |     "babel-preset-es2015": "^6.3.13",
51 |     "babel-preset-react": "^6.3.13",
52 |     "chai": "^3.4.1",
53 |     "chai-immutable": "^1.5.3",
54 |     "css-loader": "^0.23.0",
55 |     "css-modules-require-hook": "^4.0.1",
56 |     "css-mqpacker": "^5.0.1",
57 |     "csswring": "^5.1.0",
58 |     "enzyme": "^2.4.1",
59 |     "extract-text-webpack-plugin": "^1.0.1",
60 |     "file-loader": "^0.9.0",
61 |     "html-webpack-plugin": "^2.22.0",
62 |     "mocha": "^2.3.4",
63 |     "postcss": "^5.0.12",
64 |     "postcss-color-function": "^2.0.0",
65 |     "postcss-loader": "^0.9.1",
66 |     "postcss-modules-values": "^1.1.1",
67 |     "postcss-nested": "^1.0.0",
68 |     "postcss-simple-vars": "^3.0.0",
69 |     "react-addons-test-utils": "^15.2.1",
70 |     "react-dom": "^0.14.3",
71 |     "react-hot-loader": "^1.3.0",
72 |     "style-loader": "^0.13.0",
73 |     "url-loader": "^0.5.7",
74 |     "webpack": "^1.12.0",
75 |     "webpack-dev-server": "^1.9.0"
76 |   }
77 | }
78 | 


--------------------------------------------------------------------------------
/webpack.config.js:
--------------------------------------------------------------------------------
 1 | var isProd         = process.env.NODE_ENV === 'production'
 2 |   , webpack        = require('webpack')
 3 |   , path           = require('path')
 4 |   , autoprefixer   = require('autoprefixer')
 5 |   , csswring       = require('csswring')
 6 |   , mqpacker       = require('css-mqpacker')
 7 |   , values         = require('postcss-modules-values')
 8 |   , postcss_nested = require('postcss-nested')
 9 |   , postcss_color  = require('postcss-color-function')
10 |   , package        = require('./package.json')
11 | 
12 | var ExtractTextPlugin = require('extract-text-webpack-plugin')
13 |   , HtmlWebpackPlugin = require('html-webpack-plugin')
14 | 
15 | var cssLoaders = 'style!css?modules!postcss'
16 | 
17 | function extract(loaders) {
18 |   return ExtractTextPlugin.extract('style',  loaders.substr(loaders.indexOf('!')))
19 | }
20 | 
21 | var entry = isProd ? {
22 |   app: './app/index.jsx',
23 |   vendors: [ 'react', 'react-router' ] //, 'lodash']
24 | } : {
25 |   app: [
26 |     'webpack-dev-server/client?http://0.0.0.0:8080',
27 |     'webpack/hot/only-dev-server',
28 |     './app/index.jsx'
29 |   ]
30 | }
31 | 
32 | module.exports = {
33 |   debug: !isProd
34 | , devtool: 'eval'
35 | , entry: entry
36 | 
37 | , output: {
38 |     path: './dist'
39 |   , filename: isProd ? '[name].[chunkhash].js' : 'app.js'
40 |   , chunkFilename: isProd ? '[chunkhash].js' : '[id].js'
41 |   }
42 | 
43 | , module: {
44 |     loaders: [
45 |       {
46 |         test: /\.jsx?$/,
47 |         loaders: (isProd ? [] : [ 'react-hot' ]).concat([ 'babel' ]),
48 |         exclude: /node_modules/
49 |       }
50 |     , {test: /\.css$/, loader: isProd ? extract(cssLoaders) : cssLoaders}
51 |     , {test: /\.png$/, loader: "url?limit=100000&mimetype=image/png"}
52 |     , {test: /\.svg$/, loader: "url?limit=100000&mimetype=image/svg+xml"}
53 |     , {test: /\.gif$/, loader: "url?limit=100000&mimetype=image/gif"}
54 |     , {test: /\.jpg$/, loader: "file"}
55 |     ]
56 |   }
57 | 
58 | , postcss: function() {
59 |     return [
60 |         values
61 |       , postcss_nested
62 |       , postcss_color
63 |       , autoprefixer
64 |       , mqpacker
65 |       , csswring
66 |     ]
67 |   }
68 | 
69 | , plugins: isProd ? [
70 |     new webpack.HotModuleReplacementPlugin(),
71 |     new webpack.optimize.DedupePlugin(),
72 |     new webpack.optimize.UglifyJsPlugin({ compress: { warnings: false } }),
73 |     new webpack.optimize.CommonsChunkPlugin('vendors', '[name].[hash].js'),
74 |     new ExtractTextPlugin('[name].[hash].css'),
75 |     new HtmlWebpackPlugin({
76 |       title: package.name,
77 |       template: './conf/tmpl.html',
78 |       production: isProd
79 |     })
80 |   ] : [
81 |     new webpack.NoErrorsPlugin(),
82 |     new HtmlWebpackPlugin({
83 |       title: package.name,
84 |       template: './conf/tmpl.html'
85 |     })
86 |   ]
87 | 
88 | , resolve: {
89 |     modulesDirectories: [ 'app', 'node_modules' ]
90 |   , extensions: ['', '.js', '.json', '.jsx', '.css']
91 |   }
92 | };
93 | 


--------------------------------------------------------------------------------