I'm building a single page node app with express and handlebars but i'm new to node and got stuck while building the handlebars with webpack. My folder structure is like this : https://i.stack.imgur.com/sKQVd.jpg
I'm using 'express-handlebars'(https://github.com/ericf/express-handlebars) and i need to render some templates on the server to handle building standard layout (with header, footer and content panel).
views/layouts/main.hbs:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Node with Webpack</title>
</head>
<body>
<main>
<header>
{{> header}}
</header>
{{{body}}}
<footer>
{{> footer}}
</footer>
</main>
</body>
</html>
views/home.hbs:
Home
<a href="employees">employees</a>
With 'handlebars-loader' (https://github.com/pcardune/handlebars-loader) The partials are loading properly in the dist folder but the 'home.hbs' is not loading in the 'main.hbs', which should load by default as i have mentioned in express route.
server/express.js:
const express = require('express');
const db = require('./database');
const server = express()
const path = require('path')
const router = require('./router');
//WEBPACK CONFIGURATION
const webpack = require('webpack')
const config = require('../../config/webpack.config')
const compiler = webpack(config)
const webpackHotMiddleware = require('webpack-hot-middleware')(
compiler
)
const webpackDevMiddleware = require('webpack-dev-middleware')(
compiler,
config.devServer
)
server.use('/', router) //express route
server.use(webpackDevMiddleware)
server.use(webpackHotMiddleware)
//VIEW ENGINE SETUP
const hbs = require( 'express-handlebars');
server.set('views', path.resolve(__dirname, '../views/'));
server.engine( 'hbs', hbs({
extname: '.hbs',
defaultView: 'main',
layoutsDir: path.resolve(__dirname, '../views/layouts/'),
partialsDir: path.resolve(__dirname, '../views/partials/')
}));
server.set('view engine', 'hbs');
db.connect(() => {
server.listen(3000, () => {
console.log('Server is listenig with mongoose.')
})
})
server/router.js:
const express = require('express');
const router = express.Router();
const employeeController = require('../controllers/employeeController');
router.get('/', (req, res) => {
console.log('home')
res.render('home', {
layout: 'main'
});
})
router.get('/employees', employeeController.index);
module.exports = router;
config/webpack.config.js:
const path = require('path')
const HTMLWebpackPlugin = require('html-webpack-plugin')
const webpack = require('webpack')
module.exports = {
mode: 'development',
entry: {
main: ['@babel/polyfill', './src/index.js']
},
output: {
filename: '[name]-bundle-[hash].js',
path: path.resolve(__dirname, '../dist'),
publicPath: '/' //Absolute path
},
devServer: {
contentBase: 'dist',
hot: true,
overlay: true,
stats: {
colors: true
}
},
resolve: {
extensions: ['*', '.js'],
modules: [
path.resolve(__dirname, '..', 'node_modules'),
],
},
module: {
rules: [
{
test: /\.js$/,
use: [
{
loader: 'babel-loader'
}
],
exclude: /node_modules/
},
{
test: /\.css$/,
use: [
{
loader: 'style-loader'
},
{
loader: 'css-loader'
}
]
},
{
test: /\.scss|\.sass$/,
loader: ['style-loader', 'css-loader', 'sass-loader'],
},
{
test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
loader: 'url-loader',
query: {
limit: 10000,
name: 'images/[name].[hash:7].[ext]'
}
},
{
test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
loader: 'url-loader',
options: {
limit: 1000,
name: 'fonts/[name].[hash:7].[ext]'
}
},
{
test: /\.(webm|mp4)$/,
loader: 'file-loader',
options: {
name: 'videos/[name].[hash:7].[ext]'
}
},
{
test: /\.html$/,
use: [
{
loader: 'html-loader',
options: {
attrs: ['img:src']
}
}
]
},
{
test: /\.hbs$/,
use: [
{
loader: 'handlebars-loader',
query: {
partialDirs: [
path.join(__dirname, '../src/views', 'partials')
],
}
}
]
}
]
},
plugins: [
new webpack.HotModuleReplacementPlugin(),
new HTMLWebpackPlugin({
template: './src/views/layouts/main.hbs',
title:'Handlebars vew engine'
})
]
}
I want to have a one single html file in which depending on route the pages will load. right now after 'npm run build' the 'index.html' file looks like this :
dist/index.html
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Node with Webpack</title>
</head>
<body>
<main>
<header><h3>header</h3></header>
<footer><h3>footer</h3></footer>
</main>
<script type="text/javascript" src="/main-bundle-55e1587718f042cecfec.js"></script></body>
</html>
I don't know what i am missing since i'm new to this, is this causing from webpack or problem with routing i'm not getting , any help would be very much appreciated.
