├── .bowerrc ├── .gitignore ├── Dockerfile ├── LICENSE ├── README.md ├── bower.json ├── package.json ├── public ├── index.html └── js │ ├── app.jsx │ └── test.jsx ├── server.js └── webpack.config.js /.bowerrc: -------------------------------------------------------------------------------- 1 | { 2 | "directory": "public/components", 3 | "interactive": false 4 | } 5 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # Logs 2 | logs 3 | *.log 4 | 5 | # Runtime data 6 | pids 7 | *.pid 8 | *.seed 9 | 10 | # Directory for instrumented libs generated by jscoverage/JSCover 11 | lib-cov 12 | 13 | # Coverage directory used by tools like istanbul 14 | coverage 15 | 16 | # Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files) 17 | .grunt 18 | 19 | # Compiled binary addons (http://nodejs.org/api/addons.html) 20 | build/Release 21 | 22 | # Dependency directory 23 | # Commenting this out is preferred by some people, see 24 | # https://www.npmjs.org/doc/misc/npm-faq.html#should-i-check-my-node_modules-folder-into-git- 25 | node_modules 26 | 27 | # Users Environment Variables 28 | .lock-wscript 29 | 30 | public/dist 31 | public/components 32 | -------------------------------------------------------------------------------- /Dockerfile: -------------------------------------------------------------------------------- 1 | FROM dockerfile/nodejs 2 | 3 | ENV PORT 80 4 | 5 | ADD ./ /sample 6 | WORKDIR /sample 7 | 8 | EXPOSE 80 9 | 10 | RUN npm install 11 | CMD npm start 12 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | The MIT License (MIT) 2 | 3 | Copyright (c) 2015 Lalit Kapoor 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 | 23 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | webpack-es6-react-boilerplate 2 | ========= 3 | A boilerplate app in es6 making use of webpack, react, bower. 4 | Supports webpack's hot reload for react. 5 | 6 | To run: 7 | 8 | ```bash 9 | npm install 10 | npm start 11 | ``` 12 | 13 | To run with docker: 14 | 15 | ```bash 16 | docker build -t webpack-es6-react-boilerplate . 17 | docker run -d -p 80:80 --name test webpack-es6-react-boilerplate 18 | open http://$(boot2docker ip) #OSX 19 | # open http://127.0.0.1 #Linux 20 | ``` 21 | -------------------------------------------------------------------------------- /bower.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "webpack-es6-react-boilerplate", 3 | "version": "0.1.0", 4 | "homepage": "https://github.com/lalitkapoor/webpack-es6-react-boilerplate", 5 | "authors": [ 6 | "Lalit Kapoor " 7 | ], 8 | "description": "a sample app in es6 making use of webpack, react, bower, gulp", 9 | "keywords": [ 10 | ], 11 | "license": "MIT", 12 | "private": true, 13 | "ignore": [ 14 | "**/.*", 15 | "node_modules", 16 | "bower_components", 17 | "public/components", 18 | "test", 19 | "tests" 20 | ], 21 | "dependencies": { 22 | } 23 | } 24 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "webpack-es6-react-boilerplate", 3 | "version": "0.1.0", 4 | "description": "a sample app in es6 making use of webpack, react, bower, gulp", 5 | "main": "server.js", 6 | "repository": { 7 | "type": "git", 8 | "url": "git@github.com:lalitkapoor/webpack-es6-react-boilerplate.git" 9 | }, 10 | "dependencies": { 11 | }, 12 | "devDependencies": { 13 | "babel-core": "5.2.9", 14 | "babel-loader": "5.0.0", 15 | "babel-runtime": "5.2.9", 16 | "exports-loader": "0.6.2", 17 | "imports-loader": "0.6.3", 18 | "jquery": "2.1.4", 19 | "jsx-loader": "0.13.2", 20 | "less": "2.2.0", 21 | "less-loader": "2.0.0", 22 | "react": "0.13.2", 23 | "react-hot-loader": "1.2.6", 24 | "react-router": "0.13.3", 25 | "webpack": "1.8.11", 26 | "webpack-dev-server": "1.8.2" 27 | }, 28 | "scripts": { 29 | "test": "echo \"Error: no test specified\" && exit 1", 30 | "start": "node server.js" 31 | }, 32 | "author": "Lalit Kapoor ", 33 | "license": "MIT" 34 | } 35 | -------------------------------------------------------------------------------- /public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 |
7 | 8 | 9 | 10 | -------------------------------------------------------------------------------- /public/js/app.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import Test from './test' 3 | 4 | // var React = require('react') 5 | // var Test = require('./test') 6 | 7 | React.render( 8 | 9 | , document.getElementById('main') 10 | ) 11 | -------------------------------------------------------------------------------- /public/js/test.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | 3 | // var React = require('react') 4 | 5 | export default React.createClass({ 6 | displayName: 'Test' 7 | , render: function () { 8 | return ( 9 |
Awesome Test!
10 | ) 11 | } 12 | }) 13 | -------------------------------------------------------------------------------- /server.js: -------------------------------------------------------------------------------- 1 | var config = require('./webpack.config') 2 | var webpack = require('webpack') 3 | var WebpackDevServer = require('webpack-dev-server') 4 | 5 | var port = process.env.PORT || 3000 6 | 7 | new WebpackDevServer(webpack(config), { 8 | publicPath: config.output.publicPath 9 | , contentBase: config.devServer.contentBase 10 | , hot: true 11 | , quiet: true 12 | }).listen(port, function (err, result) { 13 | if (err) return console.log(err) 14 | console.log('Listening at localhost:'+port); 15 | }) 16 | -------------------------------------------------------------------------------- /webpack.config.js: -------------------------------------------------------------------------------- 1 | var path = require('path') 2 | var webpack = require('webpack') 3 | 4 | module.exports = { 5 | cache: true 6 | , debug: true 7 | , devtool: 'source-map' 8 | , entry: { 9 | app: './public/js/app' 10 | } 11 | , devServer: { 12 | contentBase: './public' 13 | } 14 | , output: { 15 | path: path.join(__dirname, 'public/dist') 16 | , publicPath: '/dist' 17 | , filename: '[name].js' 18 | , chunkFilename: '[chunkhash].js' 19 | , sourceMapFilename: 'debugging/[file].map' 20 | , hotUpdateChunkFilename: 'hot/[id].[hash].hot-update.js' 21 | , hotUpdateMainFilename: 'hot/[hash].hot-update.json' 22 | } 23 | , module: { 24 | loaders: [ 25 | {test: /\.js$/, exclude:[/node_modules/, /public\/components/], loader: 'babel-loader?optional=runtime'} 26 | , {test: /\.jsx$/, exclude:[/node_modules/, /public\/components/], loaders: [ 'react-hot', 'babel-loader?optional=runtime']} 27 | , {test: /\.css$/, loader: 'style-loader!css-loader'} 28 | ] 29 | , noParse: /\.min\.js/ 30 | } 31 | , resolve: { 32 | modulesDirectories: ['public/components', 'node_modules'] 33 | , extensions: ['', '.js', '.jsx', '.json'] 34 | } 35 | , plugins: [ 36 | new webpack.HotModuleReplacementPlugin() 37 | , new webpack.ProvidePlugin({ 38 | jQuery: 'jquery' 39 | , $: 'jquery' 40 | }) 41 | ] 42 | } 43 | --------------------------------------------------------------------------------