SimonDegraeve / hapi-webpack-plugin

Webpack middleware for Hapi. Supports HMR.
57 stars 25 forks source link

Polling Issue Question #2

Closed hydrotik closed 8 years ago

hydrotik commented 8 years ago

Been battling with this for a while and not sure where to post this. I'm using Hapi 9 and hooking up the webpack plugin and not getting any HMR action. I see a polling error in the browser console:

[Error] Failed to load resource: the server responded with a status of 404 (Not Found) (socket.io, line 0)
http://localhost:8000/socket.io/?EIO=3&transport=polling&t=1441832575608-122

But I get;

[Log] [HMR] Waiting for update signal from WDS...

in the console. When I load the Webpack Dev server and point to the same config, HMR works. I'm rendering a jsx on the server side in a views folder in lieu of an index html, which then pulls in the client side React code that should be hot reloading.

server.js

// Bundle the client assets with Webpack
//var StartWebpack = require('./webpack');
//StartWebpack();

// Create a basic Hapi.js server
var Hapi = require('hapi');
var dateFormat = require('dateformat');
var format = "dd mmm HH:MM:ss";

// Basic Hapi.js connection stuff
var server = new Hapi.Server();
server.connection({
  host: 'localhost',
  port: 8000
});

var rootHandler = function (request, reply) {
    reply.view('Default');
};

server.register([
      require('vision'),
      require('inert'),
      {
        register : require('hapi-webpack-plugin'),
        options : './webpack.hot.config.js'
      }
    ], function (err) {

    server.views({
        engines: {
            jsx: require('hapi-react-views')
        },
        relativeTo: __dirname,
        path: 'views'
    });

    // Add a route to serve static assets (CSS, JS, IMG)
    server.route({
      method: 'GET',
      path: '/{param*}',
      handler: {
        directory: {
          path: 'build'
        }
      }
    });

    // Add main app route
    server.route({
      method: 'GET',
      path: '/',
      handler: rootHandler
    });

    server.start(function() {
      console.info('==> '+ dateFormat(new Date(), format));
      console.info("==> ✅  Server is listening");
      console.info("==> 🌎  Go to " + server.info.uri.toLowerCase());
    });
});

webpack.hot.config.js

var path = require('path');
var webpack = require('webpack');
var HtmlWebpackPlugin = require('html-webpack-plugin');

var pkg = require('./package.json');
var ExtractTextPlugin = require('extract-text-webpack-plugin');
var autoprefixer = require('autoprefixer-core');
var util = require('util');
var webpack = require('webpack');

var DEBUG = process.env.NODE_ENV === 'development';
var TEST = process.env.NODE_ENV === 'test';

var cssBundle = path.join('css', util.format('app.%s.css', pkg.version));
var jsBundle = path.join('js', util.format('app.%s.js', pkg.version));

var jsxLoader;
var sassLoader;
var cssLoader;
var fileLoader = 'file-loader?name=[path][name].[ext]';
var htmlLoader = [
    'file-loader?name=[path][name].[ext]',
    'template-html-loader?' + [
        'raw=true',
        'engine=lodash',
        'version=' + pkg.version,
        'title=' + pkg.name,
        'debug=' + DEBUG
    ].join('&')
].join('!');
var jsonLoader = ['json-loader'];

var sassParams = [
    'outputStyle=expanded',
    'includePaths[]=' + path.resolve(__dirname, './app/scss'),
    'includePaths[]=' + path.resolve(__dirname, './node_modules')
];

jsxLoader = [];
jsxLoader.push('react-hot');
jsxLoader.push('babel-loader?optional[]=runtime&stage=0&plugins=rewire');
sassParams.push('sourceMap', 'sourceMapContents=true');
sassLoader = [
    'style-loader',
    'css-loader?sourceMap&modules&localIdentName=[name]__[local]___[hash:base64:5]',
    'postcss-loader',
    'sass-loader?' + sassParams.join('&')
].join('!');
cssLoader = [
    'style-loader',
    'css-loader?sourceMap&modules&localIdentName=[name]__[local]___[hash:base64:5]',
    'postcss-loader',
    'csslint'
].join('!');

module.exports = {
    devtool: 'eval',
    context: path.join(__dirname, './app'),
    entry: [
        'webpack-dev-server/client?http://localhost:8000',
        'webpack/hot/only-dev-server',
        path.resolve(__dirname, './views/Default'),
        path.resolve(__dirname, './app/app.jsx')
    ],/*
    output: {
        path: path.resolve(__dirname, 'hot'),
        filename: 'bundle.js'
    },*/
    output: {
        path: path.resolve(pkg.config.buildDir),
        filename: jsBundle
    },
    plugins: [
        new ExtractTextPlugin(cssBundle, {
            allChunks: true
        }),
        new webpack.optimize.DedupePlugin(),
        new webpack.HotModuleReplacementPlugin()
    ],
    resolve: {
        extensions: ['', '.js', '.json', '.jsx']
    },
    module: {
        loaders: [{
            test: /\.html$/,
            loader: htmlLoader
        }, {
            test: /\.css$/,
            loader: 'style!css'
        }, {
            test: /\.scss$/,
            loader: sassLoader
        }, {
            test: /\.jpe?g$|\.gif$|\.png$|\.ico|\.svg$|\.woff$|\.ttf$|\.eot$/,
            loader: fileLoader
        }, {
            test: /\.json$/,
            exclude: /node_modules/,
            loaders: jsonLoader
        }, {
            test: /\.jsx$/,
            loaders: jsxLoader,
            exclude: /node_modules/
        }, {
            include: /\.js$/,
            loaders: ["babel-loader?stage=0&optional=runtime&plugins=typecheck"],
            exclude: /node_modules/
        }]
    }
};
hydrotik commented 8 years ago

Had my ports wrong and needed to fire up the web pack instance for HMR, but for anyone that is having some difficulty with this I am including my code.

webpack.dev.server.hot.js

var path = require('path');
var webpack = require('webpack');
var WebpackDevServer = require('webpack-dev-server');
var config = require('./webpack.hot.config');

new WebpackDevServer(webpack(config), {
  contentBase: path.resolve(__dirname, './'),
  hot: true,
  historyApiFallback: true
}).listen(8080, 'localhost', function (err) {
  if (err) {
    console.log(err); //eslint-disable-line no-console
  }

  console.log('Listening at localhost:8080'); //eslint-disable-line no-console
});

In my package.json scripts object

"start": "node server.js",
"watch-client": "node ./webpack.dev.server.hot.js --verbose --colors --display-error-details --config webpack.hot.config.js",
"watch": "node ./node_modules/concurrently/src/main.js --kill-others \"npm run watch-client\" \"npm run start\""