I'm currently working on a creative website built with Pug and Webpack that's being served via Express. In this post, I'll layout how to setup a new project with these tools in a series of steps.
Link to boilerplate repo: https://github.com/Uzoamaka126/express-pug-webpack-boilerplate
<h3>Steps</h3>
<ol>
<li>Create a github repository for your new project (optional)</li>
<li>Initialize your project</li>
<li>Install dependencies</li>
<li>Install dev dependencies</li>
<li>Create your Webpack config files</li>
<li>Setup other files</li>
<li>Setup scripts in your package.json to run your build and development commands</li>
<li>Test that your setup works</li>
</ol>
<h3>Create a github repository</h3>
Go to <a href="https://github.com">Github</a> to create a new repository for your project. This is a completely optional step if you use a different version control service, you are playing around or running this in an online playground. After creating the repository, open your terminal and run the git clone (remote-url) command to clone the repository locally.
<h3>Initialization</h3>
Next, we run the "npm init" command to create the package.json file which helps scaffold the node packages our project relies on to run. Any package we install shows up on this file with its installed version number. This file also stores meta data and contains the scripts we'll need to run the project -- in this case, we're going to need a build script for production and a dev script for development.
<h3>Install dependencies</h3>
Dependencies are packages our projects rely on to run in production or users will need to install when they run our app. In your terminal, run the following to install the dependency packages
<pre><code> npm install express pug node-sass
</code></pre>
<h3>Install dev dependencies</h3>
We use dev dependencies during development, so the following packages below need to be installed as dev dependencies. In your terminal, run the following command and add the package name after it. You can run the installs individually or at the same time by writing them in one straight line.
<pre><code>/* 
 @babel/core, dotenv, errorhandler, nodemon, webpack, webpack-cli, 
 webpack-dev-server, webpack-merge, postcss-loader, sass, sass-loader, 
 mini-css-extract-plugin, file-loader, css-loader, babel-loader, concurrently, 
 clean-webpack-plugin, copy-webpack-plugin
*/
</code></pre>
Individually
<pre><code> npm install &#x3C;package-name>
</code></pre>
or simultaneously
<pre><code> npm install @babel/core dotenv errorhandler ...
</code></pre>
Yes, they are quite a lot but since we are not working with a build tool that abstracts the work of bundling packages, we are going to do it manually using webpack and babel. Libraries/frameworks like <a href="https://nuxt.com/">Nuxt</a>, <a href="https://vuejs.org/">Vue</a> or <a href="https://react.dev/">React</a>, provide the option of having Webpack and Babel baked in, package bundling abstracted away, and ready to use out of the box.
This project uses scss in place of css, so we are adding the following package loaders below to help with ...
<pre><code> postcss-loader css-loader sass sass-laoder mini-css-extract-plugin
</code></pre>
If you plan on using regular css, you can skip the installation of the above packages.
<h3>Create Webpack config files</h3>
We're going to create three different webpack config files. One for the source config, one for development and the other for production. The output of the build files are going to be put in a public directory that gets rebuilt every time the build command runs
Source config (webpack.config.js)
<pre><code> const path = require('path');
 const webpack = require('webpack');
 const { CleanWebpackPlugin } = require('clean-webpack-plugin');
 const CopyWebpackPlugin = require('copy-webpack-plugin');
 const MiniCssExtractPlugin = require('mini-css-extract-plugin');

 const IS_DEVELOPMENT = process.env.NODE_ENV === 'dev';

 const sourceDir = path.join(__dirname, 'src');
 const sharedDir = path.join(__dirname, 'shared');
 const stylesDir = path.join(__dirname, 'styles'); // skip if you are using vanilla css
 const modulesDir = 'node_modules';

 module.exports = {
 entry: [
 path.join(sourceDir, 'index.js'),
 path.join(stylesDir, 'index.scss')
 ],

 resolve: {
 modules: [sourceDir, sharedDir, stylesDir, modulesDir]
 },

 plugins: [
 new webpack.DefinePlugin({
 IS_DEVELOPMENT
 }),

 new CopyWebpackPlugin({
 patterns: [
 { from: './shared', to: '' }
 ]
 }),

 new MiniCssExtractPlugin({
 filename: '[name].css',
 chunkFilename: '[id].css'
 }),

 new CleanWebpackPlugin()
 ],

 module: {
 rules: [
 {
 test: /\.js$/,
 use: { loader: 'babel-loader' }
 },

 {
 test: /\.scss$/,
 exclude: /node_modules/,
 use: [
 {
 loader: MiniCssExtractPlugin.loader,
 options: { publicPath: '' }
 },
 { loader: 'css-loader' },
 { loader: 'postcss-loader' },
 { loader: 'sass-loader' }
 ]
 }
 ]
 },
}

</code></pre>
Build config file extended from the source config file (webpack.config.build.js)
<pre><code> const path = require('path')
 const { merge } = require('webpack-merge')
 const config = require('./webpack.config')

 module.exports = merge(config, {
 mode: 'production',

 output: {
 path: path.join(__dirname, 'public')
 }
 })
</code></pre>
Dev config file extended from the source config file (webpack.config.development.js)
<pre><code> const { merge } = require('webpack-merge')
 const path = require('path')
 const config = require('./webpack.config')

 module.exports = merge(config, {
 mode: 'development',

 devtool: 'inline-source-map',

 devServer: {
 static: {
 directory: path.join(__dirname, 'public'),
 },
 devMiddleware: {
 writeToDisk: true,
 },
 },

 
 output: {
 path: path.resolve(__dirname, 'public')
 }
 })
</code></pre>
<h4>Setup other files</h4>
Create an app.js file in your root directory. This is going to be the entry file for your express server. This file contains setup for things like serving your pages on the server side, global error handling and logging, passing the data you need to your pages and listening for changes.
app.js
<pre><code> require('dotenv').config();

 const logger = require('morgan')
 const express = require('express');
 const errorhandler = require('errorhandler');
 const app = express();
 const port = process.env.PORT || 3000;
 const path = require('path');

 // meta data for pages
 const meta = {
 title: "",
 image: {
 "url": "",
 "alt": ""
 }
 }

 app.use(logger('dev'));
 app.use(errorhandler());
 app.use(express.static(path.join(__dirname, 'public'))); // Serves the static file returned by the build

 // functions to use within your pug components
 app.use(function (req, res, next) {
 res.locals.Link = function(link) {
 if (link &#x26;&#x26; link === "Home") {
 return "/"
 }

 if (link &#x26;&#x26; typeof link === 'string') {
 return `/${link.toLowerCase()}`
 }
 };

 next();
 })

 app.set('views', path.join(__dirname, 'views'));
 app.set('view engine', 'pug');

 app.get("/", function (req, res) {
 res.render('pages/home', { meta: { ...meta, title: "Home" } });
 })

 app.get("/about", function (req, res) {
 res.render('pages/about', { meta: { ...meta, title: "About us" } });
 })

 app.get("/features", function (req, res) {
 res.render('pages/features', { meta: { ...meta, title: "Our Features" } });
 })

 app.get("/features/:id", function (req, res) { 
 const id = req.params.id;

 res.render('pages/single-feature', { 
 id,
 meta: { ...meta, title: `Page ${id}`}
 });
 })

 app.listen(port, function() {
 console.log(`Example app listening at http://localhost:${port}`);
 })
</code></pre>
Next, we're going to create the directories and files we need with the following steps:
<ol>
<li>In the root directory, create a server**, shared, views and client directory respectively.</li>
<li>In the views directory, create two separate directories; pages and partials. The pages directory is going to house all our page views. The partials directory is going to contain reusable components like layouts, loaders..etc</li>
<li>In the views directory, create an index.pug file. This is going to be our base file from which every other page view file is going to extend from.</li>
<li>Next, in the views/pages directory, create your .pug files. Ideally, this should be page views files that are going to be served by the express server. Inline with the boilerplate, we're going to create 4 different .pug files: home.pug, about.pug, features.pug, single-feature.pug. These are placeholder pages and can always be removed as needed.</li>
<li>Finally, copy and paste the following content below into their respective files</li>
</ol>
Note: unlike regular HTML, Pug will throw an error if there is an invalid or inconsistent indentation. Try to follow a consistent indentation pattern to avoid these errors.
index.pug
[In this file, multiple CSS files can be added to the head block. If you are using CSS pre-processor like SCSS, you'll need a compiled CSS file (this is our main.css file below)]
<pre><code> block variables

 doctype html
 html(lang="en") 
 head
 meta(charset="UTF-8")
 meta(name="viewport" content="width=device-width, initial-scale=1.0")

 base(href="/")

 title=meta.title

 meta(name="description" content=meta.description)

 link(rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png")
 link(rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png")
 link(rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png")
 link(rel="manifest" href="/site.webmanifest")

 link(href="main.css" rel="stylesheet")

 meta(property="og:type" content="website")
 meta(property="og:title" content=meta.title)
 meta(property="og:description" content=meta.description)
 meta(property="og:image" content=meta.image ? meta.image.url : '')

 meta(name="twitter:card" content="summary_large_image")
 meta(name="twitter:title" content=meta.title)
 meta(name="twitter:description" content=meta.description)
 meta(name="twitter:image" content=meta.image ? meta.image.url : '')

 body
 include ./partials/nav

 .content#content(data-template=template)
 block content
</code></pre>
home.pug
<pre><code> extends ../index.pug 

 block variables
 - var template = 'home' 

 block content
 .wrapper 
 | This is the home page
</code></pre>
about.pug
<pre><code> extends ../index.pug 

 block variables
 - var template = 'about' 

 block content
 div This is the about page
</code></pre>
features.pug
<pre><code> extends ../index.pug 

 block variables
 - var template = 'features' 

 block content
 .wrapper 
 | This is the features page
</code></pre>
single-feature.pug
<pre><code> extends ../index.pug 

 block variables
 - var template = 'single-feature' 

 block content
 .wrapper 
 | This is the single feature details page. The params id is #{id}
</code></pre>
<h3>Setup build and dev scripts in package.json</h3>
Now, that we've set up these directories and files, we can setup our dev and build scripts that enables us to run our app in either dev or production mode. Inside your package.json file, go to the scripts object and paste the following
package.json
<pre><code> "scripts": {
 "server:build": "node app.js",
 "server:dev": "nodemon app.js",
 "client:build": "webpack --progress --config webpack.config.build.js",
 "client:dev": "webpack serve --progress --config webpack.config.development.js",
 "start": "concurrently --kill-others \"npm run server:dev\" \"npm run client:dev\""
 },
</code></pre>
We're using the <a href="https://www.npmjs.com/package/concurrently">concurrently</a> package to run multiple commands concurrently (no pun intended).
Run the npm run start command to test run the app. You should see something in your terminal like this below
<pre><code> [0] [nodemon] starting `node app.js`
 [0] Example app listening at http://localhost:3000
</code></pre>
<h3>Test app</h3>
Open the development link in your browser to confirm that your app is running. You should see a bare-bones page with 3 different navigation links; Home, About and Features.
<h3>Notes</h3>
Here are some resources you might find helpful
<ul>
<li><a href="https://expressjs.com/en/guide/using-template-engines.html">Using template engines with Express</a></li>
<li><a href="https://pugjs.org/api/express.html">Express Integration with Pug</a></li>
<li><a href="https://pugjs.org/api/getting-started.html">Getting started with Pug</a></li>
<li><a href="https://nodesource.com/blog/an-absolute-beginners-guide-to-using-npm/">An Absolute Beginner's Guide to Using npm</a></li>
<li><a href="https://webpack.js.org/configuration/dev-server/">Webpack DevServer</a></li>
</ul>

Setup a new project with Pug, Webpack and Express