├── .babelrc ├── .gitignore ├── README.md ├── package.json ├── public └── index.html ├── src ├── index.js ├── js │ ├── components │ │ └── App.js │ └── index.js └── styles │ ├── App.css │ └── index.js ├── test ├── example.test.js └── index.js ├── webpack.development.config.js └── webpack.test.config.js /.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": ["es2015","react", "stage-0"] 3 | } 4 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # Logs 2 | logs 3 | *.log 4 | 5 | .DS_Store 6 | 7 | node_modules 8 | 9 | test/bundle.js 10 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # React-Webpack-Set-Up 2 | Simple set up including hot reloading for a React web app. Allows for es2015 and react presets in the .babelrc so es6 away! 3 | 4 | Continuous testing set up too by watching, babelifying, bundling then running the tests. 5 | 6 | ## How to work it! 7 | 8 | ### Developing 9 | 10 | In your command line run ```npm run dev:serve``` 11 | 12 | This will build your react app for development from src/index.js and run a development sever on port 8080. Visit localhost:8080/public, in the browser where the app will be served and reload with every change of code (holding state) as you develop. 13 | 14 | Super cool eh? 15 | 16 | ### Continuous Testing 17 | 18 | So you are taking advantage of React and throwing ES6 in here there and everywhere but now you want to test it. 19 | 20 | Simply require in all your test scripts into test/index.js 21 | 22 | In your command line run ```npm run dev:test``` This will watch the code, bundle the test code (caching so no slow running) and then run your ```test:bundle``` script. I have chosen to use [tape](https://github.com/substack/tape) but you can just change the test script! 23 | 24 | ### Production 25 | 26 | TODO: Write webpack config that has all performance enhancements known! #10 27 | Any suggestions please say but you should really have enough knowledge from the two existing configs to write your own 28 | 29 | ## Webpack & Babel 30 | 31 | All of this is thanks to webpack and babel. I could spout all the reasons for all my choices of configuration but see the webpack.config.js and .babelrc files and the docs to fully understand what is going on. 32 | [webpack configuration](https://webpack.github.io/docs/configuration.html) 33 | [babelrc](https://babeljs.io/docs/usage/babelrc/) 34 | 35 | #### Please help and make improvements on this setup 36 | 37 | All comments, suggestions, questions welcome. Just create an issue! 38 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "react-template", 3 | "version": "1.0.0", 4 | "description": "Blank set up for new React Project with webpack and testing runner included", 5 | "main": "index.js", 6 | "scripts": { 7 | "dev:test": "./node_modules/.bin/webpack --config webpack.test.config.js", 8 | "test:bundle": "./node_modules/.bin/tape test/bundle.js", 9 | "dev:serve": "./node_modules/.bin/webpack-dev-server --config webpack.development.config.js" 10 | }, 11 | "repository": { 12 | "type": "git", 13 | "url": "git+https://github.com/jrans/React-Webpack-Set-Up.git" 14 | }, 15 | "keywords": [ 16 | "React", 17 | "Webpack", 18 | "Hot Loading", 19 | "Test Runner", 20 | "ES6", 21 | "Babel", 22 | "tape" 23 | ], 24 | "author": "jrans", 25 | "license": "ISC", 26 | "bugs": { 27 | "url": "https://github.com/jrans/React-Webpack-Set-Up/issues" 28 | }, 29 | "homepage": "https://github.com/jrans/React-Webpack-Set-Up#readme", 30 | "devDependencies": { 31 | "babel-loader": "^6.2.1", 32 | "babel-preset-es2015": "^6.3.13", 33 | "babel-preset-react": "^6.3.13", 34 | "babel-preset-stage-0": "^6.3.13", 35 | "css-loader": "^0.23.1", 36 | "on-build-webpack": "^0.1.0", 37 | "react": "^0.14.6", 38 | "react-dom": "^0.14.6", 39 | "react-hot-loader": "^1.3.0", 40 | "style-loader": "^0.13.0", 41 | "tape": "^4.4.0", 42 | "webpack": "^1.12.12", 43 | "webpack-dev-server": "^1.14.1" 44 | } 45 | } 46 | -------------------------------------------------------------------------------- /public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Change Me 6 | 7 | 8 |
9 | 10 | 11 | 12 | -------------------------------------------------------------------------------- /src/index.js: -------------------------------------------------------------------------------- 1 | require('./styles/'); 2 | require('./js/'); 3 | -------------------------------------------------------------------------------- /src/js/components/App.js: -------------------------------------------------------------------------------- 1 | var React = require('react'); 2 | 3 | var App = React.createClass({ 4 | 5 | render: function () { 6 | return
Customise me
; 7 | } 8 | }); 9 | 10 | module.exports = App; 11 | -------------------------------------------------------------------------------- /src/js/index.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | var React = require('react'); 4 | var ReactDOM = require('react-dom'); 5 | var App = require('./components/App.js'); 6 | var rootElement = document.getElementById('react-content'); 7 | 8 | ReactDOM.render( 9 | , 10 | rootElement 11 | ); 12 | -------------------------------------------------------------------------------- /src/styles/App.css: -------------------------------------------------------------------------------- 1 | .app-div { 2 | background-color: red; 3 | } 4 | -------------------------------------------------------------------------------- /src/styles/index.js: -------------------------------------------------------------------------------- 1 | require('./App.css'); 2 | -------------------------------------------------------------------------------- /test/example.test.js: -------------------------------------------------------------------------------- 1 | import test from 'tape'; 2 | 3 | test('test that needs transpiling', t => { 4 | t.ok(true, 'yay'); 5 | t.end(); 6 | }) 7 | -------------------------------------------------------------------------------- /test/index.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | require('./example.test.js'); 4 | -------------------------------------------------------------------------------- /webpack.development.config.js: -------------------------------------------------------------------------------- 1 | var webpack = require('webpack'); 2 | 3 | module.exports = { 4 | entry : [ 5 | 'webpack-dev-server/client?http://localhost:8080', 6 | 'webpack/hot/dev-server', 7 | "./src/js/" 8 | ], 9 | output : { 10 | publicPath : "/public/" 11 | }, 12 | module : { 13 | loaders : [ 14 | { 15 | test : /\.js$/, 16 | exclude : /node_modules/, 17 | loaders : ['react-hot','babel'] 18 | }, 19 | { test: /\.css$/, loader: 'style!css'} 20 | ] 21 | }, 22 | devServer : { hot: true }, 23 | plugins : [ new webpack.HotModuleReplacementPlugin() ], 24 | inline : true, 25 | progress : true, 26 | colors : true 27 | }; 28 | -------------------------------------------------------------------------------- /webpack.test.config.js: -------------------------------------------------------------------------------- 1 | var WebpackOnBuildPlugin = require('on-build-webpack'); 2 | var child_process = require('child_process'); 3 | 4 | module.exports = { 5 | entry: [ 6 | __dirname + '/test' 7 | ], 8 | output: { 9 | path: __dirname + '/test', 10 | filename: 'bundle.js' 11 | }, 12 | module: { 13 | loaders: [ 14 | { test: /\.js$/, exclude: /node_modules/, loaders: ['babel']} 15 | ] 16 | }, 17 | target: 'node', 18 | watch: true, 19 | plugins: [ 20 | new WebpackOnBuildPlugin(function () { 21 | child_process.exec( 22 | 'npm run test:bundle', 23 | function (error, stdout) { 24 | console.log(stdout && 'stdout: ' + stdout); 25 | if (error !== null) { 26 | console.log(error && 'exec error:' + error); 27 | } 28 | } 29 | ); 30 | }) 31 | ] 32 | }; 33 | --------------------------------------------------------------------------------