How to setup node with webpack dev server? - node.js

Question

I want to proxy all /bundle urls to webpack dev server.
I have followed the advice from this question which does the same thing.
However, I still can't see my publicFiles served from localhost:8081/bundle? The silly thing is I have another project not based on react which works just fine, but this just says:
Cannot GET /bundle/
when accessing localhost:8081/bundle .
If you can point out what I'm missing I would really appreciate it. It must be something silly since I know this has to work.
Working in development mode
Here is my webpack config
'use strict';
var webpack = require('webpack');
const autoprefixer = require('autoprefixer');
var ExtractTextPlugin = require('extract-text-webpack-plugin');
var CompressionPlugin = require('compression-webpack-plugin');
const SWPrecacheWebpackPlugin = require('sw-precache-webpack-plugin');
let getPlugins;
var isProd = (process.env.NODE_ENV === 'production');
console.log("Production: " + isProd);
let entryFill = null;
let publicPathFill = null;
if (isProd) {
entryFill = {
bootstrap: ['bootstrap/dist/css/bootstrap.css', 'bootstrap/dist/js/bootstrap.js'],
index: ['./src/bundle/index.tsx'],
vendor: ['react', 'react-dom', 'jquery', 'jquery-ui-bundle', "redux-thunk", 'redux', 'react-redux']
}
publicPathFill = "./dist/assets/bundle";
getPlugins = function () {
return [
new SWPrecacheWebpackPlugin(
{
cacheId: 'cleaning-website',
filename: 'service-worker.js',
maximumFileSizeToCacheInBytes: 4194304,
runtimeCaching: [{
handler: 'cacheFirst',
urlPattern: /[.]js$/
}],
}
),
new ExtractTextPlugin("site.css"),
new webpack.optimize.UglifyJsPlugin(),
new webpack.optimize.OccurrenceOrderPlugin(),
//new webpack.optimize.DedupePlugin(),
//new webpack.optimize.CommonsChunkPlugin('vendor', 'vendor.bundle.js'),
//new webpack.optimize.AggressiveMergingPlugin(),
new webpack.ProvidePlugin({
jQuery: 'jquery',
$: 'jquery',
jquery: 'jquery'
})
//new CompressionPlugin({
// asset: "[path].gz[query]",
// algorithm: "gzip",
// test: /\.js$|\.css$|\.tsx$/,
// threshold: 10240,
// minRatio: 0.8
//})
]
}
} else {
entryFill = {
bootstrap: ['bootstrap/dist/css/bootstrap.css', 'bootstrap/dist/js/bootstrap.js', 'webpack/hot/dev-server', 'webpack-dev-server/client?http://localhost:8081'],
index: ['./src/bundle/index.tsx', 'webpack/hot/dev-server', 'webpack-dev-server/client?http://localhost:8081'],
vendor: ['react', 'react-dom', 'jquery', 'jquery-ui-bundle', "redux-thunk", 'redux', 'react-redux', 'webpack/hot/dev-server', 'webpack-dev-server/client?http://localhost:8081']
}
publicPathFill = "http://localhost:8081/bundle/",
//publicPathFill = "/",
getPlugins = function () {
return [
new ExtractTextPlugin("site.css"),
new webpack.HotModuleReplacementPlugin()
]
}
}
module.exports = {
/**
* Entry for all client side code.
* #var {object} entry
*/
entry: entryFill,
plugins: getPlugins(),
output: {
path: publicPathFill,
filename: '[name].js',
libraryTarget: 'umd'
publicPath: 'http://localhost:8081/bundle/'
},
resolve: {
extensions: ["", ".webpack.js", ".web.js", ".ts", ".tsx", ".js"],
//alias: {
// 'react': 'preact-compat',
// 'react-dom': 'preact-compat',
// 'react-router': 'preact-compat'
//}
},
module: {
loaders: [
// { test: /\.(jpe?g|png|gif|svg)$/i, loader: 'url?limit=10000!img?progressive=true'},
{ test: /\.css$/, loader: "style-loader!css-loader" },
{
test: /\.scss$/,
loader: ExtractTextPlugin.extract(
//Need:?modules&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5] to set the right name for each css!
"style",
"css!postcss-loader!sass")
},
// { test: /bootstrap-sass\/assets\/javascripts\//, loader: 'imports?jQuery=jquery' },
{ test: /\.tsx?$/, loader: "ts-loader" },
{
test: /\.(pug|png|ttf|eot|svg|woff(2)?)(\?[a-z0-9]+)?$/,
loader: 'file-loader'
}
]
},
postcss: function () {
return [autoprefixer(
// { browsers: ['ie 10', 'firefox 20', 'safari 9.1','Chrome ] }
{ browsers: ['> 0%'] }
)];
}
};
and my webpack dev server running in node looks like:
import * as express from 'express';
import * as path from 'path'
let webpack = require('webpack');
let WebpackDevServer = require('webpack-dev-server');
let proxy = require('proxy-middleware');
let url = require('url');
let config = require('../../../webpack.config.js');
import { post } from "./post";
import { pages } from "./pages";
module.exports = function (app: any, passport: any) {
var router = express.Router();
post(router, passport);
pages(router);
if (process.env.NODE_ENV === 'development') {
let base = path.join(__dirname, "..", "..", "assets");
console.log("Base : " + base);
//console.log(__dirname);
let server = new WebpackDevServer(webpack(config), {
//contentBase: base,
hot: true,
quiet: false,
noInfo: false,
publicPath: "/bundle/",
stats: { colors: true }
});
server.listen(8081, "localhost", function () { });
app.use('/bundle', proxy(url.parse('http://localhost:8081/bundle')));
}
app.use('/', router);
};
I serve the html page like so:
import { createStore, bindActionCreators, applyMiddleware } from 'redux';
import { routerReducer } from 'react-router-redux'
import thunkMiddleware from 'redux-thunk'
import * as path from 'path'
import * as fs from "fs";
import { Routes, Navigation, RootReducer } from "../../client/index";
export function pages(router) {
router.get('/*', function (req: any, res: any, next) {
let initial = {};
const store = createStore(RootReducer, initial, applyMiddleware(thunkMiddleware))
const body = ReactDOMServer.renderToString(
<Provider store={store}>
<StaticRouter location={req.url}>
<Routes/>
</StaticRouter>
</Provider>
)
//const nav = ReactDOMServer.renderToString(
// <Navigation/>
//)
const nav = ReactDOMServer.renderToString(
<div> Nav</div>
)
console.log("Body:");
console.log(body);
//const state = store.getState()
const state = {};
res.send(`
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Clement Cleaning</title>
<meta name="description" content="A cleaning business">
<meta name="author" content="Mortonproductions">
<script src="/bundle/bootstrap.js"></script>
<link rel="stylesheet" href="/bundle/site.css">
</head>
<body>
<header>
<h1>
Clement Cleaning
</h1>
<h2>
A cleaning business based in Loch Lomond
</h2>
</header>
<nav>
<div id="react-nav">${nav}</div>
</nav>
<section>
<div id="react-router">${body}</div>
</section>
<footer>
Progressive web app produced my morton productions
</footer>
<script>window.__REDUX_STATE__ = ${JSON.stringify(state)}</script>
<script src="/bundle/vendor.bundle.js"></script>
<script src="/bundle/index.js"></script>
</body>
</html>`
)
});
}