title: How can I bundle Express Js (NodeJs) and Pug engine using Webpack?
body: <p><strong>Introduction:</strong>
  I have used ExpressJs framework with node as server and pug as a template engine. I want to bundle .js , .pug &amp; .css.</p>
  <p>I'm aware of webpack <em>(module bundler)</em> configuration for static files <em>(CSR-client side rendering)</em> . For CSR appoach we will follow the steps below.</p>
  <ol>
  <li>Bundle all files using webpack</li>
  <li>Host html &amp; bundle.js(created by webpack earlier) using server <em>(iis / npm serve or of any other choice)</em>.</li>
  </ol>
  <p>So, I tried the same with ExpressJs which is(SSR-server side rendering), webpack bundled all files <em>(<strong>excluding NodeModules</strong>)</em> including index.js which contains server(nodeJs).</p>
  <ul>
  <li>Is it the right ? If so how to serve the files using the bundled host inside index.js?</li>
  <li>If that is totally a wrong then, can you please suggest some good practice?</li>
  </ul>
  <p><a href="https://i.stack.imgur.com/hwg7g.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/hwg7g.png" alt="Folder Structure" /></a></p>
  <p>index.js</p>
  <pre><code>var express = require('express');
  var cookieParser = require('cookie-parser');//cookie Parser
  var bodyParser = require('body-parser');//JSON data
  
  //Inbuild Functions
  const userManagementRoutes = require('./src/routes/userManagementRoutes');
  const app = express();
  
  //view Engine
  app.set('view engine', 'pug');
  app.set('views', './src/views/userManagement');
  
  //for cookie parser
  app.use(cookieParser());
  
  // for parsing application/xwww-form-urlencoded
  app.use(bodyParser.urlencoded({ extended: true })); 
  
  //Static File Server
  app.use('/Malips', express.static('public'));
  
  //Routes
  app.use('/', userManagementRoutes)
  
  //server
  app.listen(3000);
  </code></pre>
  <p>src\routes\UserManagementRoutes.js</p>
  <pre><code>const express = require('express');
  const loginController = require('../controllers/userManagement/loginController');
  
  const router = express.Router();
  
  router.get('/', function(req, res){
      res.render('app.pug');
  });
  
  router.get('/Login', function(req, res){
      res.render('login.pug');
  });
  
  router.post('/Login', function(req, res){
      const { userName, password } = req.body;
      if(loginController(userName, password)){
          res.render('home.pug',{userName : userName});
      }
      else{
          res.render('login.pug',{errorMessage : 'Invalid Credentials'});
      }
  });
  
  module.exports  = router;
  </code></pre>
  <p>src\controller\userManagement\LoginController</p>
  <pre><code>module.exports = function LoginController(userName, password)
  {
      if(userName == 'admin@gmail.com' &amp;&amp; password == 'admin')
          return true;
  
      else
          return false;    
  }
  </code></pre>
  <p>src\views\userManagement\Login.pug</p>
  <pre><code>extends _layout.pug
  block content
      div 
      form(action=&quot;/Login&quot;, method=&quot;post&quot;)
          label UserName
          br 
          input(type='email', name = 'userName' required autofocus)
          br
          label Password
          br
          input(type='text' name = 'password' required autofocus)
          br
          input(type=&quot;submit&quot;)
          h3 #{errorMessage}
  </code></pre>
  <p>package.json</p>
  <pre><code>  &quot;scripts&quot;: {
      &quot;start&quot;: &quot;nodemon index.js&quot;,
      &quot;test&quot;: &quot;echo \&quot;Error: no test specified\&quot; &amp;&amp; exit 1&quot;
    },
  </code></pre>