Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
long-hp opened this issue Jan 31, 2018 · 9 comments
Open

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

long-hp opened this issue Jan 31, 2018 · 9 comments
Assignees
Labels

Comments

@long-hp
Copy link

long-hp commented Jan 31, 2018

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;
})();
@long-hp long-hp changed the title how to use HMR view engine pug how to use HMR view engine pug + webpack dev server Jan 31, 2018
@long-hp long-hp changed the title how to use HMR view engine pug + webpack dev server how to use express-engine-hotloader for pug + webpack dev server Jan 31, 2018
@long-hp
Copy link
Author

long-hp commented Jan 31, 2018

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
Copy link
Owner

des-des commented Feb 1, 2018

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

@des-des des-des added the bug label Feb 1, 2018
@des-des des-des self-assigned this Feb 1, 2018
@long-hp
Copy link
Author

long-hp commented Feb 1, 2018

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

@des-des
Copy link
Owner

des-des commented Feb 5, 2018

@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
Copy link
Owner

des-des commented Feb 5, 2018

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

@long-hp
Copy link
Author

long-hp commented Feb 5, 2018

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

@des-des
Copy link
Owner

des-des commented Feb 10, 2018

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

@long-hp
Copy link
Author

long-hp commented Feb 12, 2018

@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
Copy link
Owner

des-des commented Feb 28, 2018

@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?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

No branches or pull requests

2 participants