From 5e32fef364646c2fcf7eb6d06d6923ba468bfb1a Mon Sep 17 00:00:00 2001 From: Chris Date: Thu, 27 Aug 2015 17:07:53 +0200 Subject: [PATCH] Added base webpack configuration and needed shellscripts. --- .eslintrc | 12 ++--- README.md | 39 ++++++++++++++-- dist/README.md | 2 + package.json | 20 +++++++++ server.js | 15 +++++++ src/actions/README.md | 14 ++++++ src/components/Main.js | 19 ++++++++ src/components/run.js | 5 +++ src/index.html | 16 +++++++ src/sources/README.md | 14 ++++++ src/stores/README.md | 14 ++++++ src/styles/App.css | 1 + webpack.config.js | 100 +++++++++++++++++++++++++++++++++++++++++ 13 files changed, 262 insertions(+), 9 deletions(-) create mode 100644 dist/README.md create mode 100644 server.js create mode 100644 src/actions/README.md create mode 100644 src/components/Main.js create mode 100644 src/components/run.js create mode 100644 src/index.html create mode 100644 src/sources/README.md create mode 100644 src/stores/README.md create mode 100644 src/styles/App.css create mode 100644 webpack.config.js diff --git a/.eslintrc b/.eslintrc index 722d298..af6f8ae 100644 --- a/.eslintrc +++ b/.eslintrc @@ -9,18 +9,20 @@ "env": { "browser": true, "amd": true, - "es6": true + "es6": true, + "node": true }, "rules": { + "comma-dangle": 1, "quotes": [ 1, "single" ], - "no-undef": false, - "global-strict": false, + "no-undef": 1, + "global-strict": 0, "no-extra-semi": 1, - "no-underscore-dangle": false, + "no-underscore-dangle": 0, "no-console": 1, "no-unused-vars": 1, "no-trailing-spaces": [1, { "skipBlankLines": true }], "no-unreachable": 1, - "no-alert": false + "no-alert": 0 } } diff --git a/README.md b/README.md index 0bcf353..3b5862f 100644 --- a/README.md +++ b/README.md @@ -5,17 +5,48 @@ It can be understood as the prototype for newly generated projects. ## Features The following features are planned to be included in the final version: -- [ ] Webpack -- [ ] Babel +- [x] Webpack and Webpack-Dev-Server, including hot-loader +- [x] Babel and JSX - [ ] Mocha Unit tests (*optional*) - [ ] React.Router -- [ ] EsLint Support -- [ ] No dependency on grunt, gulp or the next hot taskrunner! +- [x] EsLint Support +- [x] No dependency on grunt, gulp or the next hot taskrunner! ## What is it for? This template can be used directly for the creation of new projects. Also it will be the "template" for the next version of generator-react-webpack. +## Using it +The template is available via webpack. The following commands are available: +```bash +# Start for development +npm start # or +npm run serve + +# Start the dev-server with the dist version +npm run servedist + +# Just build the dist version +npm run dist + +# Run unit tests +npm test +``` + +You can also use your globally installed version of webpack like this: +```bash +# Build or run the dev version: +webpack +webpack --env=dev + +webpack-dev-server +webpack-dev-server --env=dev + +# Build or run the dist version +webpack --env=dist +webpack-dev-server --env=dist +``` + ## License react-webpack-template is available under MIT-License and can therefore be used in any project free of charge. diff --git a/dist/README.md b/dist/README.md new file mode 100644 index 0000000..0d138c2 --- /dev/null +++ b/dist/README.md @@ -0,0 +1,2 @@ +# About the dist folder +After building the dist version of your project, the generated files are stored in this folder. You should keep it under version control. diff --git a/package.json b/package.json index 2b3a99f..0658670 100644 --- a/package.json +++ b/package.json @@ -5,6 +5,10 @@ "main": "index.js", "private": true, "scripts": { + "start": "node server.js --env=dev", + "serve": "node server.js --env=dev", + "servedist": "node server.js --env=dist", + "dist": "webpack", "test": "echo \"Error: no test specified\" && exit 1" }, "repository": { @@ -23,7 +27,23 @@ }, "homepage": "https://github.com/weblogixx/react-webpack-template#readme", "devDependencies": { + "babel-core": "^5.8.22", + "babel-loader": "^5.3.2", + "css-loader": "^0.16.0", + "eslint": "^1.2.1", + "eslint-loader": "^1.0.0", + "eslint-plugin-react": "^3.3.0", + "file-loader": "^0.8.4", + "minimist": "^1.2.0", + "open": "0.0.5", + "react-hot-loader": "^1.2.9", + "style-loader": "^0.12.3", + "url-loader": "^0.5.6", "webpack": "^1.12.0", "webpack-dev-server": "^1.10.1" + }, + "dependencies": { + "normalize.css": "^3.0.3", + "react": "^0.13.3" } } diff --git a/server.js b/server.js new file mode 100644 index 0000000..a6fbcb0 --- /dev/null +++ b/server.js @@ -0,0 +1,15 @@ +/*eslint no-console:0 */ +var webpack = require('webpack'); +var WebpackDevServer = require('webpack-dev-server'); +var config = require('./webpack.config'); +var open = require('open'); + +new WebpackDevServer(webpack(config), config.devServer) +.listen(config.port, 'localhost', function(err) { + if (err) { + console.log(err); + } + console.log('Listening at localhost:' + config.port); + console.log('Opening your system browser...'); + open('http://localhost:' + config.port + '/webpack-dev-server/'); +}); diff --git a/src/actions/README.md b/src/actions/README.md new file mode 100644 index 0000000..7267347 --- /dev/null +++ b/src/actions/README.md @@ -0,0 +1,14 @@ +# About this folder +This folder will hold all of your **flux** actions if you are using flux. +You can include actions into your components or stores like this: + +```javascript +let react = require('react/addons'); +let MyAction = require('actions/MyAction'); +class MyComponent extends React.Component { + constructor(props) { + super(props); + MyAction.exampleMethod(); + } +} +``` diff --git a/src/components/Main.js b/src/components/Main.js new file mode 100644 index 0000000..1b80743 --- /dev/null +++ b/src/components/Main.js @@ -0,0 +1,19 @@ +require('normalize.css'); +require('styles/App.css'); + +import React from 'react/addons'; + +class AppComponent extends React.Component { + render() { + return ( +
+ Content +
+ ); + } +} + +AppComponent.defaultProps = { +}; + +export default AppComponent; diff --git a/src/components/run.js b/src/components/run.js new file mode 100644 index 0000000..0576bd5 --- /dev/null +++ b/src/components/run.js @@ -0,0 +1,5 @@ +import React from 'react'; +import App from './Main'; + +// Render the main component into the dom +React.render(, document.getElementById('app')); diff --git a/src/index.html b/src/index.html new file mode 100644 index 0000000..30a07e5 --- /dev/null +++ b/src/index.html @@ -0,0 +1,16 @@ + + + + + React Webpack Template Title + + + + + +
APPLICATION CONTENT
+ + + + + diff --git a/src/sources/README.md b/src/sources/README.md new file mode 100644 index 0000000..9f929ae --- /dev/null +++ b/src/sources/README.md @@ -0,0 +1,14 @@ +# About this folder +This folder will hold all of your **flux** datasources. +You can include them into your components or stores like this: + +```javascript +let react = require('react/addons'); +let MySource = require('sources/MyAction'); +class MyComponent extends React.Component { + constructor(props) { + super(props); + MySource.getRemoteData(); + } +} +``` diff --git a/src/stores/README.md b/src/stores/README.md new file mode 100644 index 0000000..5ee1aeb --- /dev/null +++ b/src/stores/README.md @@ -0,0 +1,14 @@ +# About this folder +This folder will hold all of your **flux** stores. +You can include them into your components like this: + +```javascript +let react = require('react/addons'); +let MyStore = require('stores/MyStore'); +class MyComponent extends React.Component { + constructor(props) { + super(props); + MyStore.doSomething(); + } +} +``` diff --git a/src/styles/App.css b/src/styles/App.css new file mode 100644 index 0000000..13881d2 --- /dev/null +++ b/src/styles/App.css @@ -0,0 +1 @@ +/* Base Application Styles */ diff --git a/webpack.config.js b/webpack.config.js new file mode 100644 index 0000000..19d0a11 --- /dev/null +++ b/webpack.config.js @@ -0,0 +1,100 @@ +var webpack = require('webpack'); +var args = require('minimist')(process.argv.slice(2)); +var path = require('path'); +var env = args.env || 'dev'; + +var port = 8000; +var srcPath = __dirname + '/src/'; +var publicPath = '/assets/'; + +var config = { + port: port, + debug: true, + output: { + path: path.join(__dirname, 'dist'), + filename: 'app.js', + publicPath: publicPath + }, + devServer: { + contentBase: './src/', + historyApiFallback: true, + hot: true, + port: port, + publicPath: publicPath, + noInfo: false + }, + resolve: { + extensions: ['', '.js', '.jsx'], + alias: { + actions: srcPath + '/actions/', + components: srcPath + '/components/', + sources: srcPath + '/sources/', + stores: srcPath + '/stores/', + styles: srcPath + '/styles/' + } + }, + module: { + preLoaders: [ + { + test: /\.(js|jsx)$/, + exclude: /node_modules/, + loader: 'eslint-loader' + } + ], + loaders: [ + { + test: /\.css$/, + loader: 'style!css' + }, + { + test: /\.(png|jpg|gif|woff|woff2)$/, + loader: 'url-loader?limit=8192' + } + ] + } +}; + +// Use config depending on environment +switch(env) { + case 'dist': + config.entry = './src/components/run'; + config.cache = false; + config.devtool = false; + config.plugins = [ + new webpack.optimize.DedupePlugin(), + new webpack.optimize.UglifyJsPlugin(), + new webpack.optimize.OccurenceOrderPlugin(), + new webpack.optimize.AggressiveMergingPlugin(), + new webpack.NoErrorsPlugin() + ]; + + // Add needed loaders + config.module.loaders.push({ + test: /\.(js|jsx)$/, + loader: 'babel', + include: path.join(__dirname, 'src') + }); + break; + + default: + config.entry = [ + 'webpack-dev-server/client?http://127.0.0.1:' + port, + 'webpack/hot/only-dev-server', + './src/components/run' + ]; + config.cache = true; + config.devtool = 'sourcemap'; + config.plugins = [ + new webpack.HotModuleReplacementPlugin(), + new webpack.NoErrorsPlugin() + ]; + + // Add needed loaders + config.module.loaders.push({ + test: /\.(js|jsx)$/, + loader: 'react-hot!babel-loader', + include: path.join(__dirname, 'src') + }); +} + +module.exports = config;