Skip to content

Instantly share code, notes, and snippets.

@AutoSponge
Last active September 24, 2018 19:19
Show Gist options
  • Star 3 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save AutoSponge/97c79e96fe9842a10cfc to your computer and use it in GitHub Desktop.
Save AutoSponge/97c79e96fe9842a10cfc to your computer and use it in GitHub Desktop.
webpack-hot-middleware with separate host
{
"stage": 0,
"env": {
"development": {
"plugins": ["react-transform"],
"extra": {
"react-transform": {
"transforms": [{
"transform": "react-transform-hmr",
"imports": ["react"],
"locals": ["module"]
}, {
"transform": "react-transform-catch-errors",
"imports": ["react", "redbox-react"]
}]
}
}
}
}
}
{
"scripts": {
"start": "babel-node ./<path to devserver>/server.js"
},
"dependencies": {
"react": "0.13.3",
},
"devDependencies": {
"babel-core": "^5.8.25",
"babel-loader": "^5.3.2",
"babel-plugin-react-transform": "^1.1.1",
"express": "^4.13.3",
"react-transform": "0.0.3",
"react-transform-catch-errors": "^1.0.0",
"react-transform-hmr": "^1.0.1",
"redbox-react": "^1.1.1",
"webpack": "^1.12.2",
"webpack-dev-middleware": "^1.2.0",
"webpack-hot-middleware": "^2.4.1"
}
}
import path from 'path';
import express from 'express';
import webpack from 'webpack';
import hot from 'webpack-hot-middleware';
import dev from 'webpack-dev-middleware';
import config from './webpack.config.dev';
const app = express();
const compiler = webpack(config);
app.use(dev(compiler, {
noInfo: true,
publicPath: config.output.publicPath,
headers: {
'Access-Control-Allow-Credentials': true,
'Access-Control-Allow-Origin': 'http://<appserver hostname>:<appserver port>'
}
}));
app.use(hot(compiler));
app.listen(<devserver port>, '<devserver hostname>', err => {
if (err) {
console.log(err);
return;
}
console.log('Listening at <devserver hostname>:<devserver port>');
});
import path from 'path';
import webpack from 'webpack';
export default {
devtool: 'eval',
entry: [
'webpack-hot-middleware/client?path=http://<devserver hostname>:<devserver port>/__webpack_hmr',
'./<path to app entry point>'
],
output: {
path: path.join(__dirname, 'dist'),
filename: '<public app filename>.js',
publicPath: 'http://<devserver hostname>:<devserver port>/<public app path>/'
},
plugins: [
new webpack.HotModuleReplacementPlugin(),
new webpack.NoErrorsPlugin()
],
module: {
loaders: [{
test: /\.jsx?$/,
exclude: /(node_modules|bower_components)/,
loader: 'babel'
}]
}
};
@thomashibbard
Copy link

You have a syntax error in your package file: there is a comma after "react": "0.13.3" which invalidates the JSON.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment