hapi.js and webpack

Recently we do use webpack and hapi.js quite frequently. Thus we decided to adapt the great webpack-dev-server to function as a hapi.js plugin. Though it is still work in progress it is usable now. At the moment without hot code replacement, but we’ll figure that out as well.

If you want to use it, just have a look at our github page where the plugin and its usage is documented.

brief usage overview:

assuming the following filestructure

-Project
    +backend //your application-backend folder
    -frontend
    -src
        entry.js
        webpack.config.js
    -views
        main.html
    server.js
    package.json

npm install hapi-webpack-dev-plugin  

var webpack = require("webpack");

//feed it your webpack config object
var webpackConf = require("./frontend/webpack.config.js");  
webpackConf.entry = {  
    app: "./frontend/src/entry.js"
};

//enabled sourcemap generation
webpackConf.devtool = "source-map";

//create the webpack compiler object
var webpackCompiler = webpack(webpackConf);

//use the hapi-webpack-dev-server-plugin    
server.register({  
    register: require("hapi-webpack-dev-plugin"),
    options: {
        compiler: webpackCompiler,
        quiet: false,
        devIndex: "./frontend",
        devView: {
            name: "main.html", //optional - configure a view template to reply with
            data: function(request) {
                var tplData = isUserLoggedIn(request);
                return tplData;
            }
        }
    }
}, function(err) {
    if (err) {
        console.log("something went wrong :/ ", err);
    }
});

Fire up your hapi server, open your browser – type http://localhost:port/webpack-dev-server/index.html and you’re (hopefully) ready to go!