how to use express-engine-hotloader for pug + webpack dev server

[wiloke1]

webpack.config.js

module.exports = {
  entry: './app/main.js',
  output: {
    path: path.resolve(__dirname + '/public'),
    filename: './bundle.js'
  },
  devtool: 'inline-source-map',
  devServer: {
    contentBase: './app/views/',
    compress: true,
    hotOnly: true,
    port: 8888,
    setup: app => {
      const express = require('express');
      const router = require('./app/router.js');
      const app = express();
      app.set('views', './app/views/');
      app.locals.basedir = path.join(__dirname, appConfig.folders.path);
      app.set('view engine', 'pug');
      app.use('/', router);
    }
  }
}

router.js

const express = require('express');

module.exports = (() => {
  'use strict';
  const router = express.Router();

  router.get('/', (req, res) => {
    res.render('index');
  });
  router.get('/contact', (req, res) => {
    res.render('contact');
  });
  return router;
})();

[wiloke1]

i'm use pug

const pug = require('pug')
const withHotloader = require('express-engine-hotloader')

var app = require('express')()

const server = require('http').Server(app)

const engine = process.env.NODE_ENV !== 'production'
  ? withHotloader(server, pug)
  : pug
app
  .engine('pug', engine)
  .set('view engine', 'pug')
  .get('/', (req, res) => { res.render('home') })

server.listen(3000, () => {
  console.log('listening on 3000')
})

error:

initEngine.apply is not a function

[des-des]

@wiloke1 This looks like a bug. Thanks for reporting! Ill push a fix today.

[wiloke1]

I'm waiting for the update for Pug template thank you @des-des thank you express-engine-hotloader <3

[des-des]

@wiloke1 okay, I think there is now a working example for pug in this repo, with a new version that fixes a bug (you will need to update to version 2)

So pug now works with express, update me about it working for webpack!

[des-des]

@wiloke1 Is it possible for you to send me the entire codebase?

[wiloke1]

@des-des Can you teamview help me? skype: hpvanlong

[des-des]

@wiloke1 thankyou for your patience, the latest version should have a fix!

[wiloke1]

@des-des (Y) demo webpack https://www.dropbox.com/s/b52bvcpw40yew3m/webpack-HMR-and-pug-template.zip?dl=0 You can use it for example

[des-des]

@wiloke1 I am a bit confused about how hotloader and webpackHotMiddleware are interacting.

Am I correct to say you are using webpack to load the css? What is the goal of this, how would this work if webpack was used for more things?

Can you tell me, does this work to update the DOM with new css, and without a page reload?