diff --git a/.eslintrc.json b/.eslintrc.json new file mode 100644 index 0000000..2fa2532 --- /dev/null +++ b/.eslintrc.json @@ -0,0 +1,7 @@ +{ + "extends": "standard", + "plugins": [ + "standard", + "promise" + ] +} \ No newline at end of file diff --git a/client/client.js b/client/client.js index 5d1eea2..ff903b9 100644 --- a/client/client.js +++ b/client/client.js @@ -1,8 +1,9 @@ import React from 'react' -import { render } from 'react-dom' +import { + render +} from 'react-dom' import App from '../components/App' -render( - , - document.getElementById('app') -) +render( < App / > , + document.getElementById('app') +) \ No newline at end of file diff --git a/components/App.js b/components/App.js index e205f43..7b9fd0d 100644 --- a/components/App.js +++ b/components/App.js @@ -1,11 +1,14 @@ -import React, { Component } from 'react' +import React, { + Component +} from 'react' class App extends Component { - render() { - return
This is definitely a React app now!
- } + + render() { + return
This is definitely a HOTTTT(module reloading) React app now! < /div> + } } -export default App +export default App \ No newline at end of file diff --git a/package.json b/package.json index 034be19..256bf9a 100644 --- a/package.json +++ b/package.json @@ -4,7 +4,7 @@ "description": "A simple todo list app built with React, Redux and Webpack", "scripts": { "test": "echo \"Error: no test specified\" && exit 1", - "serve": "nodemon server/server.js" + "serve": "nodemon server/server.js --ignore components" }, "repository": { "type": "git", @@ -17,9 +17,21 @@ "babel-loader": "^6.2.2", "babel-preset-es2015": "^6.3.13", "babel-preset-react": "^6.3.13", + "babel-preset-react-hmre": "^1.1.1", "express": "^4.13.4", "react": "^0.14.7", "react-dom": "^0.14.7", - "webpack": "^1.12.13" + "react-redux": "^4.4.5", + "redux": "^3.5.2", + "redux-logger": "^2.6.1", + "webpack": "^1.12.13", + "webpack-dev-middleware": "^1.6.1", + "webpack-hot-middleware": "^2.10.0" + }, + "devDependencies": { + "eslint": "^3.15.0", + "eslint-config-standard": "^6.2.1", + "eslint-plugin-promise": "^3.4.1", + "eslint-plugin-standard": "^2.0.1" } -} +} \ No newline at end of file diff --git a/server/server.js b/server/server.js index 51a4946..4e8fc9a 100644 --- a/server/server.js +++ b/server/server.js @@ -1,8 +1,17 @@ var express = require('express'); var path = require('path'); +var config = require('../webpack.config.js'); +var webpack = require('webpack'); +var webpackDevMiddleware = require('webpack-dev-middleware'); +var webpackHotMiddleware = require('webpack-hot-middleware'); var app = express(); +var compiler = webpack(config); + +app.use(webpackDevMiddleware(compiler, {noInfo : true, publicPath: config.output.publicPath})) +app.use(webpackHotMiddleware(compiler)) + app.use(express.static('./dist')); app.use('/', function (req, res) { @@ -14,4 +23,4 @@ var port = 3000; app.listen(port, function(error) { if (error) throw error; console.log("Express server listening on port", port); -}); +}); \ No newline at end of file diff --git a/webpack.config.js b/webpack.config.js index 5b16fdd..8c75e63 100644 --- a/webpack.config.js +++ b/webpack.config.js @@ -1,21 +1,30 @@ +var webpack = require('webpack'); + module.exports = { - devtool: 'inline-source-map', - entry: ['./client/client.js'], - output: { - path: './dist', - filename: 'bundle.js', - publicPath: '/' - }, - module: { - loaders: [ - { - test: /\.js$/, - loader: 'babel-loader', - exclude: /node_modules/, - query: { - presets: ['react', 'es2015'] - } - } - ] - } -} + devtool: 'inline-source-map', + entry: [ + 'webpack-hot-middleware/client', + './client/client.js' + ], + output: { + path: require('path').resolve('./dist'), + filename: 'bundle.js', + publicPath: '/' + }, + plugins: [ + new webpack.optimize.OccurrenceOrderPlugin(), + new webpack.HotModuleReplacementPlugin(), + new webpack.NoErrorsPlugin() + ], + module: { + loaders: [{ + test: /\.js$/, + loader: 'babel-loader', + exclude: /node_modules/, + query: { + presets: ['react', 'es2015', 'react-hmre'] + } + }] + } + +} \ No newline at end of file