├── .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 |