├── README.md ├── src └── index.js ├── webpack.config.js ├── .gitignore ├── package.json ├── LICENSE └── server └── index.js /README.md: -------------------------------------------------------------------------------- 1 | # hapi-webpack-example 2 | Example of using hapi with webpack dev server and hot reloading 3 | 4 | ## Run the Example 5 | ```npm install && npm run start``` 6 | -------------------------------------------------------------------------------- /src/index.js: -------------------------------------------------------------------------------- 1 | const logStuffOnLoad = () => { 2 | const el = document.createElement('div'); 3 | el.innerHTML = '

🍩

'; 4 | el.style.fontSize = '24px'; 5 | document.body.appendChild(el); 6 | }; 7 | 8 | logStuffOnLoad(); 9 | 10 | module.hot.accept(() => { 11 | logStuffOnLoad(); 12 | }); 13 | -------------------------------------------------------------------------------- /webpack.config.js: -------------------------------------------------------------------------------- 1 | const Path = require('path'); 2 | const Webpack = require('webpack'); 3 | const HtmlWebpackPlugin = require('html-webpack-plugin'); 4 | 5 | module.exports = { 6 | devtool: 'inline-source-map', 7 | entry: [ 8 | 'webpack-hot-middleware/client', 9 | './src/index.js' 10 | ], 11 | output: { 12 | path: Path.resolve(__dirname, 'dist'), 13 | filename: 'bundle.js', 14 | publicPath: '/' 15 | }, 16 | plugins: [ 17 | new Webpack.optimize.OccurrenceOrderPlugin(), 18 | new Webpack.HotModuleReplacementPlugin(), 19 | new HtmlWebpackPlugin() 20 | ] 21 | }; 22 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # Logs 2 | logs 3 | *.log 4 | npm-debug.log* 5 | 6 | # Runtime data 7 | pids 8 | *.pid 9 | *.seed 10 | 11 | # Directory for instrumented libs generated by jscoverage/JSCover 12 | lib-cov 13 | 14 | # Coverage directory used by tools like istanbul 15 | coverage 16 | 17 | # nyc test coverage 18 | .nyc_output 19 | 20 | # Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files) 21 | .grunt 22 | 23 | # node-waf configuration 24 | .lock-wscript 25 | 26 | # Compiled binary addons (http://nodejs.org/api/addons.html) 27 | build/Release 28 | 29 | # Dependency directories 30 | node_modules 31 | jspm_packages 32 | 33 | # Optional npm cache directory 34 | .npm 35 | 36 | # Optional REPL history 37 | .node_repl_history 38 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "hapi-webpack-example", 3 | "version": "1.0.0", 4 | "description": "Example of using hapi with webpack dev server and hot reloading", 5 | "main": "src/index.js", 6 | "scripts": { 7 | "start": "webpack-dashboard -- node ./server" 8 | }, 9 | "repository": { 10 | "type": "git", 11 | "url": "git+https://github.com/tkh44/hapi-webpack-example.git" 12 | }, 13 | "keywords": [], 14 | "author": "", 15 | "license": "MIT", 16 | "bugs": { 17 | "url": "https://github.com/tkh44/hapi-webpack-example/issues" 18 | }, 19 | "homepage": "https://github.com/tkh44/hapi-webpack-example#readme", 20 | "devDependencies": { 21 | "hapi": "^15.0.3", 22 | "html-webpack-plugin": "^2.22.0", 23 | "webpack": "^1.13.2", 24 | "webpack-dashboard": "^0.1.8", 25 | "webpack-dev-middleware": "^1.6.1", 26 | "webpack-hot-middleware": "^2.12.2" 27 | } 28 | } 29 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2016 Kye Hohenberger 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /server/index.js: -------------------------------------------------------------------------------- 1 | const Path = require('path'); 2 | const Hapi = require('Hapi'); 3 | const Webpack = require('webpack'); 4 | const DashboardPlugin = require('webpack-dashboard/plugin'); 5 | const Config = require('../webpack.config.js'); 6 | 7 | const server = new Hapi.Server(); 8 | const host = 'localhost'; 9 | const port = 3000; 10 | server.connection({ host, port }); 11 | 12 | const compiler = Webpack(Config); 13 | compiler.apply(new DashboardPlugin()); 14 | 15 | const devMiddleware = require('webpack-dev-middleware')(compiler, { 16 | host, 17 | port, 18 | historyApiFallback: true, 19 | publicPath: Config.output.publicPath, 20 | quiet: true // important for webpack-dashboard to work 21 | }); 22 | 23 | const hotMiddleware = require('webpack-hot-middleware')(compiler, { 24 | log: () => {} 25 | }); 26 | 27 | server.ext('onRequest', (request, reply) => { 28 | 29 | devMiddleware(request.raw.req, request.raw.res, (err) => { 30 | 31 | if (err) { 32 | return reply(err); 33 | } 34 | 35 | reply.continue(); 36 | }); 37 | }); 38 | 39 | server.ext('onRequest', (request, reply) => { 40 | 41 | hotMiddleware(request.raw.req, request.raw.res, (err) => { 42 | 43 | if (err) { 44 | return reply(err); 45 | } 46 | 47 | reply.continue(); 48 | }); 49 | }); 50 | 51 | server.ext('onPreResponse', (request, reply) => { 52 | 53 | // This assumes you are using the html-webpack-plugin 54 | // If you are serving a static html file just reply with that file directly 55 | const filename = Path.join(compiler.outputPath, 'index.html'); 56 | compiler.outputFileSystem.readFile(filename, (fileReadErr, result) => { 57 | 58 | if (fileReadErr) { 59 | return reply(fileReadErr); 60 | } 61 | 62 | reply(result).type('text/html'); 63 | }); 64 | }); 65 | 66 | server.start((err) => { 67 | 68 | console.log('server started'); 69 | 70 | if (err) { 71 | throw err; 72 | } 73 | }); 74 | --------------------------------------------------------------------------------