Server side rendering with Webpack and Express at runtime - node.js

Question

Is it possible to render template files (such as Pug or Handlebars) dynamically at runtime using Webpack and Express?
My issue is when loading my root page (index.pug), the html loads however no assets are loading.
Example:
app
.set('views', path.join(__dirname, 'views'))
.set('view engine', 'pug')
.use('/', function(req, res) {
res.render('index', {some: 'param'})
})
If I remove the '/' route handler, the page loads with all of the assets just fine.
Client webpack.config.js file:
module.exports = {
entry: {
main: ['webpack-hot-middleware/client?path=/__webpack_hmr&timeout=60000', './index.js', './css/main.css']
},
output: {
path: path.join(__dirname, 'dist'),
publicPath: '/',
filename: '[name].js'
},
mode: 'development',
target: 'web',
devtool: '#source-map',
module: {
rules: [
{
test: /\.pug$/,
use: ['html-loader?attrs=false', 'pug-html-loader']
}
]
},
plugins: [
new HtmlWebPackPlugin({
template: './views/index.pug',
filename: "./index.html",
excludeChunks: [ 'app' ]
})
]
}
Server webpack.server.config.js:
module.exports = (env, argv) => {
return ({
entry: {
app: 'app.js',
},
output: {
path: path.join(__dirname, 'dist'),
publicPath: '/',
filename: '[name].js'
},
target: 'node',
node: {
// Need this when working with express, otherwise the build fails
__dirname: false, // if you don't put this is, __dirname
__filename: false, // and __filename return blank or /
},
externals: [nodeExternals()], // Need this to avoid error when working with Express
module: {
rules: [
{
// Transpiles ES6-8 into ES5
test: /\.js$/,
exclude: /node_modules/,
use: {
loader: "babel-loader"
}
}
]
}
})
}

Answer 1

You can make it work in 2 easy steps (based on the code above).
In server change the views path to where your built template is going to be. In the example above it's going to be inside the dist folder
app
.set("views", "./dist");
.set('view engine', 'pug')
.use('/', function(req, res) {
res.render('index', {some: 'param'})
})
At this point, after we run a build script and start the server we would get a message that there's no view in dist folder, which is correct because engine is looking for a template and all we have are html files
In webpack.config.js in HtmlWebPackPlugin we need to leave a filename as a template
plugins: [
new HtmlWebPackPlugin({
template: './views/index.pug',
filename: "./index.pug",
excludeChunks: [ 'app' ]
})
]
And that's it. Now template engine will find index.pug in dist with injected style and script and generate html from it
Note: In production it's important to set a path for static files, otherwise you won't get your css displayed even though the link tags were injected correctly
app.use(express.static(__dirname));
The above solution worked for me when I run into the same problem, but with the ejs template. I couldn't find the answer to it anywhere, so hopefully, it will save someone hours of frustration.