1
0
mirror of https://github.com/yldio/copilot.git synced 2024-11-13 06:40:06 +02:00

Merge pull request #98 from yldio/architecture-react-d3

Architecture react d3
This commit is contained in:
Sérgio Ramos 2016-12-07 11:28:55 +00:00 committed by GitHub
commit 174aec625e
23 changed files with 934 additions and 0 deletions

View File

@ -0,0 +1,4 @@
# Example
![screenshot from 2016-12-06 17-03-28](https://cloud.githubusercontent.com/assets/524382/20936109/4508ebda-bbd9-11e6-9561-baa1f7fcc80c.png)

View File

@ -0,0 +1,448 @@
<!DOCTYPE html>
<meta charset='utf-8'>
<style>
.links line {
stroke: #343434;
stroke-opacity: 1;
}
.health, .health_warn {
font-family: LibreFranklin;
font-size: 12px;
font-weight: bold;
font-style: normal;
font-stretch: normal;
text-align: center;
}
.health_warn {
font-size: 15px;
}
.stat {
font-family: LibreFranklin;
font-size: 12px;
font-weight: normal;
font-style: normal;
font-stretch: normal;
line-height: 1.5;
}
.node_statistics {
font-family: LibreFranklin;
font-size: 12px;
font-weight: normal;
font-style: normal;
font-stretch: normal;
line-height: 1.5;
}
.node_statistics p {
margin: 0 0 0 0;
color: rgba(255, 255, 255, 0.8);
}
.primary, .secondary {
font-family: LibreFranklin;
font-size: 12px;
font-weight: normal;
font-style: normal;
font-stretch: normal;
line-height: 1.5;
}
</style>
<svg width='960' height='700'></svg>
<script src='https://d3js.org/d3.v4.min.js'></script>
<script>
var svg = d3.select('svg'),
width = +svg.attr('width'),
height = +svg.attr('height');
var color = d3.scaleOrdinal(d3.schemeCategory20);
var simulation = d3.forceSimulation()
.force('charge', d3.forceManyBody().strength(() => -50).distanceMin(() => 30))
.force('link', d3.forceLink().distance(() => 200).id(function(d) { return d.id; }))
.force('collide', d3.forceCollide().radius(function(d) { return 200 + 0.5; }).iterations(2))
.force('center', d3.forceCenter(width * 1/3, height * 1/3))
function rightRoundedRect(x, y, width, height, radius) {
return 'M' + x + ',' + y // Move to top left (absolute)
+ 'h ' + (width - radius) // Horizontal line to (relative)
+ 'a ' + radius + ',' + radius + ' 0 0 1 ' + radius + ',' + radius // Relative arc
+ 'v ' + (height - 2 * radius) // Vertical line to (relative)
+ 'a ' + radius + ',' + radius + ' 0 0 1 ' + -radius + ',' + radius // Relative arch
+ 'h ' + (radius - width) // Horizontal lint to (relative)
+ 'z '; // path back to start
}
function leftRoundedRect(x, y, width, height, radius) {
return 'M' + (x + width) + ',' + y // Move to (absolute) start at top-right
+ 'v ' + height // Vertical line to (relative)
+ 'h ' + (radius - width) // Horizontal line to (relative)
+ 'a ' + radius + ',' + radius + ' 0 0 1 ' + -radius + ',' + -radius // Relative arc
+ 'v ' + -(height - 2 * radius) // Vertical line to (relative)
+ 'a ' + radius + ',' + radius + ' 0 0 1 ' + radius + ',' + -radius // Relative arch
+ 'z '; // path back to start
}
function topRoundedRect(x, y, width, height, radius) {
return 'M' + x + ',' + -(y - height) // Move to (absolute) start at bottom-right
+ 'v ' + -(height - 2 * radius) // Vertical line to (relative)
+ 'a ' + radius + ',' + radius + ' 0 0 1 ' + radius + ',' + -radius // Relative arc
+ 'h ' + -(radius - width) // Horizontal line to (relative)
+ 'a ' + radius + ',' + radius + ' 0 0 1 ' + radius + ',' + radius // Relative arc
+ 'v ' + (height - 2 * radius) // Vertical line to (relative)
+ 'h ' + (radius - width) // Horizontal line to (relative)
+ 'z '; // path back to start
}
function bottomRoundedRect(x, y, width, height, radius) {
return 'M' + x + ',' + -(y - height) // Move to (absolute) start at bottom-right
+ 'v ' + -(height - 2 * radius) // Vertical line to (relative)
+ 'h ' + (radius + width) // Horizontal line to (relative)
+ 'v ' + (height - 2 * radius) // Vertical line to (relative)
+ 'a ' + -radius + ',' + radius + ' 0 0 1 ' + -radius + ',' + radius // Relative arc
+ 'h ' + (radius - width) // Horizontal line to (relative)
+ 'a ' + radius + ',' + radius + ' 0 0 1 ' + -radius + ',' + -radius // Relative arc
+ 'z '; // path back to start
}
function rect(x, y, width, height, radius) {
return 'M' + x + ',' + -(y - height - 2 * radius) // Move to (absolute) start at bottom-right
+ 'v ' + -(height - 2 * radius) // Vertical line to (relative)
+ 'h ' + (width + radius + 2) // Horizontal line to (relative)
+ 'v ' + (height - 2 * radius) // Vertical line to (relative)
+ 'h ' + (radius - width) // Horizontal line to (relative)
+ 'z '; // path back to start
}
d3.json('services.json', function(error, graph) {
if (error) throw error;
function createNode(elm) {
// Box where label will live
elm.append('path')
.attr('class', 'node')
.attr('d', topRoundedRect('0', '0', 170, 47, 4))
.attr('stroke', '#343434')
.attr('stroke-width', '1px')
.attr('fill', '#464646')
// Hover-over text for a node's label.
var text = elm.append('g')
text.append('text')
.attr('class', 'info_text')
.attr('x', '12')
.attr('y', '30')
.attr('text-anchor', 'start')
.attr('fill', '#fff')
.text(d => d.id)
text.append('circle')
.attr('class', 'alert')
.attr('cx', function () { return d3.select(this.parentNode).select('.info_text').node().getBBox().width + 30 })
.attr('cy', '24')
.attr('stroke-width', '0px')
.attr('fill', (d) => d.id == 'Memcached' ? 'rgb(217, 77, 68)' : 'rgb(0,175,102)')
.attr('r', '9px')
// An icon or label that exists within the circle, inside the infobox
text.append('text')
.attr('class', 'health')
.attr('x', function () { return d3.select(this.parentNode).select('.info_text').node().getBBox().width + 30 })
.attr('y', '29')
.attr('text-anchor', 'middle')
.attr('fill', '#fff')
.text((d) => d.id == 'Memcached' ? '!' : '❤')
// Box where stats will live
var stats = elm.append('g');
stats.append('path')
.attr('class', 'node')
.attr('d', (d) => d.id == 'Percona' ? rect('0', '-39', 170, 78, 2) : bottomRoundedRect('0', '-39', 170, 78, 4))
.attr('stroke', '#343434')
.attr('stroke-width', '1px')
.attr('fill', '#464646')
var html = stats
.append('switch')
.append('foreignObject')
.attr('requiredFeatures', 'http://www.w3.org/TR/SVG11/feature#Extensibility')
.attr('x', 12)
.attr('y', 57)
.attr('width', 160)
.attr('height', 70)
// From here everything will be rendered with react using a ref.
// However for now these values are hard-coded.
.append('xhtml:div')
.attr('class', 'node_statistics')
// Remove with react + dyanmic data.
html.append('p')
.text('CPU: 48%')
html.append('p')
.text('Memory: 54%')
html.append('p')
.text('Network: 1.75kb/sec')
elm.call(d3.drag()
.on('start', dragstarted)
.on('drag', dragged)
.on('end', dragended));
elm.append('title')
.text(function(d) { return d.id; });
}
function createExtendedNode(elm) {
elm.append('path')
.attr('class', 'node')
.attr('d', topRoundedRect('0', '0', 170, 47, 4))
.attr('stroke', '#343434')
.attr('stroke-width', '1px')
.attr('fill', '#464646')
// Hover-over text for a node's label.
var text = elm.append('g')
text.append('text')
.attr('class', 'info_text')
.attr('x', '12')
.attr('y', '30')
.attr('text-anchor', 'start')
.attr('fill', '#fff')
.text(d => d.id)
// Box where stats will live
var stats = elm.append('g');
var primary = stats.append('g')
primary.append('path')
.attr('class', 'node')
.attr('d', rect('0', '-39', 170, 114, 2))
.attr('stroke', '#343434')
.attr('stroke-width', '1px')
.attr('fill', '#464646')
primary.append('text')
.attr('class', 'primary')
.attr('x', '12')
.attr('y', '70')
.attr('text-anchor', 'start')
.attr('fill', '#fff')
.text('Primary')
primary.append('circle')
.attr('class', 'alert')
.attr('cx', function () { return d3.select(this.parentNode).select('.primary').node().getBBox().width + 30 })
.attr('cy', '64')
.attr('stroke-width', '0px')
.attr('fill', 'rgb(227, 130, 0)')
.attr('r', '9px')
// An icon or label that exists within the circle, inside the infobox
primary.append('text')
.attr('class', 'health_warn')
.attr('x', function () { return d3.select(this.parentNode).select('.primary').node().getBBox().width + 30 })
.attr('y', '69')
.attr('text-anchor', 'middle')
.attr('fill', '#fff')
.text('☇')
var html = primary
.append('switch')
.append('foreignObject')
.attr('requiredFeatures', 'http://www.w3.org/TR/SVG11/feature#Extensibility')
.attr('x', 12)
.attr('y', 87)
.attr('width', 160)
.attr('height', 70)
// From here everything will be rendered with react using a ref.
// However for now these values are hard-coded.
.append('xhtml:div')
.attr('class', 'node_statistics')
// Remove with react + dyanmic data.
html.append('p')
.text('CPU: 48%')
html.append('p')
.text('Memory: 54%')
html.append('p')
.text('Network: 1.75kb/sec')
var secondary = stats.append('g');
secondary.append('path')
.attr('class', 'node')
.attr('d', bottomRoundedRect('0', '-149', 170, 114, 4))
.attr('stroke', '#343434')
.attr('stroke-width', '1px')
.attr('fill', '#464646')
secondary.append('text')
.attr('class', 'secondary')
.attr('x', '12')
.attr('y', '183')
.attr('text-anchor', 'start')
.attr('fill', '#fff')
.text('Secondary')
secondary.append('circle')
.attr('class', 'alert')
.attr('cx', function () { return d3.select(this.parentNode).select('.secondary').node().getBBox().width + 30 })
.attr('cy', '177')
.attr('stroke-width', '0px')
.attr('fill', 'rgb(0,175,102)')
.attr('r', '9px')
// An icon or label that exists within the circle, inside the infobox
secondary.append('text')
.attr('class', 'health')
.attr('x', function () { return d3.select(this.parentNode).select('.secondary').node().getBBox().width + 30 })
.attr('y', '182')
.attr('text-anchor', 'middle')
.attr('fill', '#fff')
.text('❤')
var html = secondary
.append('switch')
.append('foreignObject')
.attr('requiredFeatures', 'http://www.w3.org/TR/SVG11/feature#Extensibility')
.attr('x', 12)
.attr('y', 200)
.attr('width', 160)
.attr('height', 70)
// From here everything will be rendered with react using a ref.
// However for now these values are hard-coded.
.append('xhtml:div')
.attr('class', 'node_statistics')
// Remove with react + dyanmic data.
html.append('p')
.text('CPU: 48%')
html.append('p')
.text('Memory: 54%')
html.append('p')
.text('Network: 1.75kb/sec')
elm.call(d3.drag()
.on('start', dragstarted)
.on('drag', dragged)
.on('end', dragended));
}
// Drawing the links between nodes
var link = svg.append('g')
.attr('class', 'links')
.selectAll('line')
.data(graph.links)
.enter().append('line')
.attr('stroke-width', '2px')
// And svg group, to contain all of the attributes in @antonas' first prototype
var node = svg.selectAll('.node')
.data(graph.nodes)
.enter()
.append('g')
.attr('class', 'node_group');
svg.selectAll('.node_group').each(function (d) {
// Create different type of node for services with Primaries + Secondaries
// We could extend this further to allow us to have as many nested services
// as wanted.
if (d.id === 'Percona') {
createExtendedNode(d3.select(this));
} else {
createNode(d3.select(this));
}
});
simulation
.nodes(graph.nodes)
.on('tick', ticked);
simulation.force('link')
.links(graph.links);
function contrain(dimension, r, z) {
return Math.max(0, Math.min(dimension - r, z))
}
function ticked() {
// TODO: Remove these values and pull them out of the height of the boxes
// that the constraints belong to.
r=174
r2=270
link
.attr('x1', function(d) {
let x;
svg.selectAll('.node_group').each(function (_, i) {
if (i !== d.source.index) return;
x = d3.select(this).node().getBBox().width;
});
return contrain(width, x, d.source.x) + 80;
})
.attr('y1', function(d) {
let y;
svg.selectAll('.node_group').each(function (_, i) {
if (i !== d.source.index) return;
y = d3.select(this).node().getBBox().height;
});
return contrain(height, y, d.source.y) + 24;
})
.attr('x2', function(d) {
let x;
svg.selectAll('.node_group').each(function (_, i) {
if (i !== d.target.index) return;
x = d3.select(this).node().getBBox().width;
});
return contrain(width, x, d.target.x) + 80;
})
.attr('y2', function(d) {
let y;
svg.selectAll('.node_group').each(function (_, i) {
if (i !== d.target.index) return;
y = d3.select(this).node().getBBox().height;
});
return contrain(height, y, d.target.y) + 24;
});
svg.selectAll('.node_group')
.attr('transform', function(d) {
let x = d3.select(this).node().getBBox().width;
let y = d3.select(this).node().getBBox().height;
return 'translate(' + contrain(width, x, d.x) + ',' + contrain(height, y, d.y) + ')';
});
}
});
function dragstarted(d) {
if (!d3.event.active) simulation.alphaTarget(0.3).restart();
d.fx = d.x;
d.fy = d.y;
}
function dragged(d) {
d.fx = d3.event.x;
d.fy = d3.event.y;
}
function dragended(d) {
if (!d3.event.active) simulation.alphaTarget(0);
d.fx = null;
d.fy = null;
}
</script>

View File

@ -0,0 +1,15 @@
{
"nodes": [
{"id": "Nginx", "group": 1},
{"id": "Wordpress", "group": 1},
{"id": "Memcached", "group": 1},
{"id": "Percona", "group": 1},
{"id": "NFS", "group": 1}
],
"links": [
{"source": "Nginx", "target": "Wordpress", "value": 1},
{"source": "Wordpress", "target": "Memcached", "value": 8},
{"source": "Wordpress", "target": "NFS", "value": 8},
{"source": "Wordpress", "target": "Percona", "value": 8}
]
}

View File

@ -0,0 +1,15 @@
{
"presets": [
"react",
"es2015"
],
"plugins": [
["transform-object-rest-spread", {
"useBuiltIns": true
}],
"add-module-exports",
"transform-es2015-modules-commonjs",
"react-hot-loader/babel"
],
"sourceMaps": "both"
}

View File

@ -0,0 +1,3 @@
/node_modules
coverage
.nyc_output

View File

@ -0,0 +1,30 @@
{
"extends": "semistandard",
"parser": "babel-eslint",
"parserOptions": {
"ecmaVersion": 7,
"ecmaFeatures": {
"jsx": true
},
"sourceType": "module"
},
"plugins": [
"babel",
"react"
],
"rules": {
"generator-star-spacing": 0,
"babel/generator-star-spacing": 1,
"space-before-function-paren": [2, "never"],
"react/jsx-uses-react": 2,
"react/jsx-uses-vars": 2,
"react/react-in-jsx-scope": 2,
"object-curly-newline": ["error", {
"minProperties": 1
}],
"sort-vars": ["error", {
"ignoreCase": true
}],
"operator-linebreak": 0
}
}

View File

@ -0,0 +1,4 @@
/node_modules
coverage
.nyc_output
npm-debug.log

View File

@ -0,0 +1,26 @@
const ReactRedux = require('react-redux');
const React = require('react');
const Links = require('./links');
const Nodes = require('./nodes');
const {
connect
} = ReactRedux;
const Component = (props) =>
<svg width='960' height='600'>
<Links {...props}/>
<Nodes {...props}/>
</svg>;
const mapStateToProps = ({
data
}) => {
return {
data
};
};
module.exports = connect(
mapStateToProps
)(Component);

View File

@ -0,0 +1,18 @@
const ReactDOM = require('react-dom');
const React = require('react');
const store = require('./store')();
const render = () => {
const Root = require('./root');
ReactDOM.render(
<Root store={store} />,
document.getElementById('root')
);
};
render();
if (module.hot) {
module.hot.accept('./root', render);
}

View File

@ -0,0 +1,10 @@
const React = require('react');
const renderLines = (props) => {
return () => <line strokeWidth={2}></line>;
};
module.exports = (props) =>
<g className='links'>
{ props.data.links.map(renderLines()) }
</g>;

View File

@ -0,0 +1,75 @@
const React = require('react');
function rightRoundedRect(x, y, width, height, radius) {
return 'M' + x + ',' + y // Move to (absolute)
+ 'h ' + (width - radius) // Horizontal line to (relative)
+ 'a ' + radius + ',' + radius + ' 0 0 1 ' + radius + ',' + radius // Relative arc
+ 'v ' + (height - 2 * radius) // Vertical line to (relative)
+ 'a ' + radius + ',' + radius + ' 0 0 1 ' + -radius + ',' + radius // Relative arch
+ 'h ' + (radius - width) // Horizontal lint to (relative)
+ 'z '; // path back to start
}
function leftRoundedRect(x, y, width, height, radius) {
return 'M' + (x + width) + ',' + y // Move to (absolute) start at top-right
+ 'v ' + height // Vertical line to (relative)
+ 'h ' + (radius - width) // Horizontal line to (relative)
+ 'a ' + radius + ',' + radius + ' 0 0 1 ' + -radius + ',' + -radius // Relative arc
+ 'v ' + -(height - 2 * radius) // Vertical line to (relative)
+ 'a ' + radius + ',' + radius + ' 0 0 1 ' + radius + ',' + -radius // Relative arch
+ 'z '; // path back to start
}
const InfoBoxContainer = () =>
<g>
<path className='node_info'
d={leftRoundedRect('0', '0', 48, 48, 4)}
stroke='#bc3e35'
strokeWidth={1}
fill='#d6534a'
></path>
<path className='node'
d={rightRoundedRect('48', '0', 112, 48, 4)}
stroke='#343434'
strokeWidth={1}
fill='#464646'
></path>
</g>;
const InfoBoxAlert = () =>
<g>
<circle className='alert'
cx={24}
cy={24}
strokeWidth={0}
fill='#fffff'
r={9}
></circle>
<text className='exclamation'
x={24}
y={30}
textAnchor='middle'
fill='#d75148'
>{'!'}</text>
</g>;
const InfoBoxText = (props) =>
<text className='info_text'
x={100}
y={30}
textAnchor='middle'
fill='#fff'
>{props.id}</text>;
module.exports = (props) => (
<g className='groups'>
{ props.data.nodes.map(node =>
<g className='node_group'>
<InfoBoxContainer/>
<InfoBoxAlert/>
<InfoBoxText {...node}/>
</g>
)
}
</g>
);

View File

@ -0,0 +1,21 @@
const React = require('react');
const ReactHotLoader = require('react-hot-loader');
const ReactRedux = require('react-redux');
const Graph = require('./graph');
const {
AppContainer
} = ReactHotLoader;
const {
Provider
} = ReactRedux;
module.exports = ({
store
}) =>
<AppContainer>
<Provider store={store}>
<Graph />
</Provider>
</AppContainer>;

View File

@ -0,0 +1,15 @@
{
"nodes": [
{"id": "Nginx", "group": 1},
{"id": "Wordpress", "group": 1},
{"id": "Memcached", "group": 1},
{"id": "Percona", "group": 1},
{"id": "NFS", "group": 1}
],
"links": [
{"source": "Nginx", "target": "Wordpress", "value": 1},
{"source": "Wordpress", "target": "Memcached", "value": 8},
{"source": "Wordpress", "target": "NFS", "value": 8},
{"source": "Wordpress", "target": "Percona", "value": 8}
]
}

View File

@ -0,0 +1,17 @@
const redux = require('redux');
const services = require('./services');
const {
createStore
} = redux;
const reducer = (state, action) => {
return {
...state,
data: services
};
};
module.exports = (state = Object.freeze({})) => {
return createStore(reducer, state);
};

View File

@ -0,0 +1,56 @@
{
"name": "chartjs-graphing-spike",
"private": true,
"license": "private",
"main": "server/index.js",
"dependencies": {
"autoprefixer": "^6.5.1",
"babel-eslint": "^7.0.0",
"babel-loader": "^6.2.5",
"babel-plugin-add-module-exports": "^0.2.1",
"babel-plugin-transform-es2015-modules-commonjs": "^6.16.0",
"babel-plugin-transform-object-rest-spread": "^6.16.0",
"babel-plugin-transform-runtime": "^6.15.0",
"babel-preset-es2015": "^6.16.0",
"babel-preset-react": "^6.16.0",
"babel-preset-react-hmre": "^1.1.1",
"babel-runtime": "^6.11.6",
"build-array": "^1.0.0",
"component-emitter": "^1.2.1",
"css-loader": "^0.25.0",
"hapi": "^15.2.0",
"hapi-webpack-dev-plugin": "^1.1.4",
"inert": "^4.0.2",
"lodash.takeright": "^4.1.1",
"nes": "^6.3.1",
"postcss-loader": "^1.0.0",
"postcss-modules-values": "^1.2.2",
"postcss-nested": "^1.0.0",
"react": "^15.3.2",
"react-dom": "^15.3.2",
"react-hot-loader": "^3.0.0-beta.6",
"react-redux": "^4.4.5",
"redux": "^3.6.0",
"require-dir": "^0.3.1",
"style-loader": "^0.13.1",
"webpack": "^1.13.2",
"webpack-dev-server": "^1.16.2"
},
"devDependencies": {
"babel-register": "^6.16.3",
"eslint": "^3.8.1",
"eslint-config-semistandard": "^7.0.0",
"eslint-config-standard": "^6.2.0",
"eslint-plugin-babel": "^3.3.0",
"eslint-plugin-promise": "^3.3.0",
"eslint-plugin-react": "^6.4.1",
"eslint-plugin-standard": "^2.0.1",
"json-loader": "^0.5.4"
},
"ava": {
"require": [
"babel-register"
],
"babel": "inherit"
}
}

View File

@ -0,0 +1,9 @@
# ChartJS
![](http://g.recordit.co/N8vdP8DBk4.gif)
## summary
- [x] customisable via js
- [x] fast (handles 100ms updates well)
- [x] easy to update data

View File

@ -0,0 +1,29 @@
const requireDir = require('require-dir');
const plugins = require('./plugins');
const routes = requireDir('./routes');
const Hapi = require('hapi');
const path = require('path');
const fs = require('fs');
const server = new Hapi.Server();
server.connection({
host: 'localhost',
port: 8000
});
server.register(plugins, (err) => {
if (err) {
throw err;
}
Object.keys(routes).forEach((name) => {
routes[name](server);
});
server.start((err) => {
server.connections.forEach((conn) => {
console.log(`started at: ${conn.info.uri}`);
});
});
});

View File

@ -0,0 +1,15 @@
const webpack = require('webpack');
const path = require('path');
const cfg = require('../webpack.config.js');
module.exports = [
require('inert'),
require('nes'), {
register: require('hapi-webpack-dev-plugin'),
options: {
compiler: webpack(cfg),
devIndex: path.join(__dirname, '../static')
}
}
];

View File

@ -0,0 +1,11 @@
const path = require('path');
module.exports = (server) => {
server.route({
method: 'GET',
path: '/',
handler: (request, reply) => {
reply.file(path.join(__dirname, '../../static/index.html'));
}
});
};

View File

@ -0,0 +1,15 @@
const path = require('path');
module.exports = (server) => {
// server.route({
// method: 'GET',
// path: '/{param*}',
// handler: {
// directory: {
// path: path.join(__dirname, '../../static'),
// redirectToSlash: true,
// index: true
// }
// }
// });
};

View File

@ -0,0 +1,18 @@
const Pkg = require('../../package.json');
const internals = {
response: {
version: Pkg.version
}
};
module.exports = (server) => {
server.route({
method: 'GET',
path: '/ops/version',
config: {
description: 'Returns the version of the server',
handler: (request, reply) => reply(internals.response)
}
});
};

View File

@ -0,0 +1,11 @@
<!doctype html>
<html lang='en-US'>
<head>
<title>D3 React Boilerplate</title>
<link rel="stylesheet" type="text/css" href="https://necolas.github.io/normalize.css/latest/normalize.css" />
</head>
<body>
<div id='root'></div>
<script src='/static/bundle.js'></script>
</body>
</html>

View File

@ -0,0 +1,69 @@
const webpack = require('webpack');
const path = require('path');
const config = {
debug: true,
devtool: 'source-map',
context: path.join(__dirname, './client'),
app: path.join(__dirname, './client/index.js'),
entry: [
'webpack-dev-server/client?http://localhost:8080',
'webpack/hot/only-dev-server',
'react-hot-loader/patch',
'./index.js'
],
output: {
path: path.join(__dirname, './static'),
publicPath: '/static/',
filename: 'bundle.js'
},
plugins: [
new webpack.HotModuleReplacementPlugin(),
new webpack.NoErrorsPlugin()
],
postcss: () => {
return [
require('postcss-modules-values'),
require('postcss-nested'),
require('autoprefixer')
];
},
module: {
loaders: [{
test: /js?$/,
exclude: /node_modules/,
include: [
path.join(__dirname, './client')
],
loaders: ['babel']
}, {
test: /\.json?$/,
exclude: /node_modules/,
include: [
path.join(__dirname, './client')
],
loaders: ['json']
}, {
test: /\.css$/,
exclude: /node_modules/,
include: [
path.join(__dirname, './client')
],
loader: 'style-loader!css-loader?modules&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]!postcss-loader'
}]
}
};
const devServer = {
hot: true,
compress: true,
lazy: false,
publicPath: config.output.publicPath,
historyApiFallback: {
index: './static/index.html'
}
};
module.exports = Object.assign({
devServer
}, config);