incorporate webpack with vanilla JS project built with node js and express

[xkeshav]

I have vanilla js project which use node js and express js to run and now need to build which works fine with my config but now unable to start in local.

below is my folder structure

src
│   index.js
│
├───assets
│   ├───fonts
│   │       sportrop-webfont.woff
│   │       sportrop-webfont.woff2
│   │
│   ├───images
│   │   │   start.png
│   │   │
│   │   ├───background
│   │   │       banana.jpg
│   │   │       blank.jpg
│   │   │
│
├───common
│       constants.js
│       helper.js
│       utils.js
│
├───html
│       about.html
│       canvas.html
│       draw.html
│       index.html
│       varnmala.html
│
├───mappers
│       alphabet.js
│
├───scripts
│       canvas.js
│       draw.js
│       varnmala.js
│
├───server
│       server.js
│
└───styles
        base.css
        canvas.css
        draw.css
        index.css
        varnmala.css

package.json

{
  "name": "canvas",
  "version": "1.1.0",
  "description": "",
  "scripts": {
    "client": "webpack --mode production --config webpack.client.config.js",
    "clean": "rd /s /q dist >nul 2>&1|echo.>null",
    "start": "node ./dist/scripts/server.js",
    "dev": "webpack-dev-server --config webpack.dev.config.js --mode development"
  },
  "repository": {
    "type": "git",
    "url": "https://github.com/xkeshav/canvas.git"
  },
  "keywords": [
    "canvas",
    "varnmala",
    "kid learn"
  ],
  "author": "Keshav Mohta",
  "license": "see LICENSE in LICENSE",
  "bugs": {
    "url": "https://github.com/xkeshav/canvas/issues"
  },
  "devDependencies": {
    "@babel/core": "^7.20.7",
    "@babel/eslint-parser": "^7.22.9",
    "@babel/register": "^7.0.0",
    "babel-loader": "^9.1.0",
    "copy-webpack-plugin": "^11.0.0",
    "css-loader": "^6.7.3",
    "css-minimizer-webpack-plugin": "^5.0.1",
    "eslint": "^8.30.0",
    "eslint-webpack-plugin": "^3.2.0",
    "html-loader": "^4.2.0",
    "html-webpack-plugin": "^5.5.0",
    "http-proxy-middleware": "^2.0.6",
    "mini-css-extract-plugin": "^2.7.6",
    "style-loader": "^3.3.1",
    "webpack": "^5.88.2",
    "webpack-cli": "^5.1.4",
    "webpack-dev-middleware": "^6.0.1",
    "webpack-dev-server": "^4.15.1",
    "webpack-hot-middleware": "^2.25.4",
    "webpack-node-externals": "^3.0.0"
  },
  "dependencies": {
    "@babel/preset-env": "^7.20.2",
    "cors": "^2.8.5",
    "dotenv": "^16.3.1",
    "express": "^4.18.2",
    "path": "^0.12.7",
    "request": "^2.88.2"
  }
}

index.js

/* eslint-disable no-undef */
// @ts-nocheck
import "./styles/base.css";
import "./styles/index.css";

if (module.hot) {
  module.hot.accept();
}

server/server.js

// @ts-nocheck
import express from "express";
import path from "path";
import { webpack } from "webpack";

import webpackDevMiddleware from "webpack-dev-middleware";
import webpackHotMiddleware from "webpack-hot-middleware";
import { alphabetMapper } from "../mappers/alphabet.js";
const config = require("../../webpack.client.config.js");

const app = express();

const router = express.Router();

const currentDirectory = process.cwd(); // current directory

const DIST_DIR = path.join(path.resolve(currentDirectory, "dist"));

const HTML_DIR = path.join(DIST_DIR, "html");
const HTML_FILE = path.join(HTML_DIR, "index.html");
const compiler = webpack(config);

app.use(
  webpackDevMiddleware(compiler, {
    publicPath: config.output.publicPath
  })
);

app.use(webpackHotMiddleware(compiler));

app.use(express.static(HTML_DIR));

app.get("/home", (_, res) => {
  res.sendFile(HTML_FILE);
});

app.get("/about", (_, res) => {
  res.sendFile(path.join(HTML_DIR, "about.html"));
});

app.get("/draw", (_, res) => {
  res.sendFile(path.join(HTML_DIR, "draw.html"));
});

app.get("/varnmala", (_, res) => {
  res.sendFile(path.join(HTML_DIR, "varnmala.html"));
});

app.get("/canvas", (_, res) => {
  res.sendFile(path.join(HTML_DIR, "canvas.html"));
});

app.get("/bg/:key", (req, res) => {
  const [output] = alphabetMapper.filter((f) => f.key === req.params.key.toLowerCase());
  console.log("called ==>", { output });
  res.json({ success: "canvas bg called", url: req.url, output });
});

app.use("/", router);

const PORT = process.env.PORT || 3003;

app.listen(PORT, () => {
  console.log(`App listening to ${PORT}....`);
  console.log("Press Ctrl+C to quit.");
});

webpack.plugins.config.js

require("dotenv").config();

const webpack = require("webpack");
const path = require("path");

const HtmlWebpackPlugin = require("html-webpack-plugin");
const ESLintPlugin = require("eslint-webpack-plugin");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const CopyPlugin = require("copy-webpack-plugin");

const BUILD_DIR = path.join(__dirname, "dist");
const HTML_DIR = path.join(BUILD_DIR, "html");

const htmlPageNames = ["about", "canvas", "draw", "varnmala"];

const multipleHtmlPlugins = htmlPageNames.map(
  (name) =>
    new HtmlWebpackPlugin({
      template: `./src/html/${name}.html`, // relative path to the HTML files
      filename: `${HTML_DIR}/${name}.html`, // output HTML files
      chunks: [`${name}`] // respective JS files
    })
);

const esLintOptions = {
  extensions: [`js`],
  exclude: [`/node_modules/`],
  emitWarning: true,
  failOnError: false
};

const plugins = [
  new HtmlWebpackPlugin({
    template: "src/html/index.html",
    filename: `${HTML_DIR}/index.html`,
    chunks: ["index"],
    excludeChunks: ["server"],
    title: "HMR for index.html"
  }),

  new webpack.HotModuleReplacementPlugin(),
  new ESLintPlugin(esLintOptions),
  new webpack.NoEmitOnErrorsPlugin(),
  new MiniCssExtractPlugin({
    filename: "styles/[name].css"
  })
  //new CopyPlugin({
  //  patterns: [
  //    {
  //      from: "./public/images",
  //      to: "./assets/images"
  //    }
  //  ]
  //})
].concat(multipleHtmlPlugins);

//console.log(process.env.MODE);

module.exports = plugins;

webpack.modules.js

const MiniCssExtractPlugin = require("mini-css-extract-plugin");

const modules = {
  rules: [
    {
      test: /\.js$/,
      exclude: /node_modules/,
      use: {
        loader: "babel-loader"
      }
    },
    { test: /\.html$/i, loader: "html-loader" },
    {
      test: /\.css$/,
      use: [
        MiniCssExtractPlugin.loader,
        {
          loader: "css-loader",
          options: {
            importLoaders: 2,
            esModule: false
          }
        }
      ]
    },
    {
      test: /\.(png|svg|jpg|gif)$/,
      type: "asset/resource"
    },
    {
      test: /\.(ttf|otf|eot|svg|woff(2)?)(\?[a-z0-9]+)?$/,
      type: "asset/resource",
      dependency: { not: ["url"] },
      generator: {
        filename: "assets/fonts/[hash][ext][query]"
      }
    }
  ]
};

module.exports = modules;

webpack.dev.config.js

require("dotenv").config();
const path = require("path");
const nodeExternals = require("webpack-node-externals");

const plugins = require("./webpack.plugins.config");
const modules = require("./webpack.modules.config");

const DIST_DIR = path.join(__dirname, "dist");

module.exports = {
  entry: {
    index: ["./src/index.js"],
    draw: ["./src/scripts/draw.js", "./src/styles/draw.css"],
    varnmala: ["./src/scripts/varnmala.js", "./src/styles/varnmala.css"],
    canvas: ["./src/scripts/canvas.js", "./src/styles/canvas.css"],
    server: ["/src/server/server.js"]
  },
  devServer: {
    static: DIST_DIR,
    compress: true,
    port: 3000,
    historyApiFallback: true,
    open: true,
    hot: true
  },
  output: {
    path: DIST_DIR,
    //publicPath: "/",
    filename: "scripts/[name].js",
    chunkFilename: "scripts/[name].js",
    assetModuleFilename: "assets/[hash][ext][query]"
    //clean: true
  },
  mode: "development",
  target: "node",
  node: {
    __dirname: false,
    __filename: false
  },
  externals: [nodeExternals()],
  devtool: "eval-source-map",
  plugins,
  module: modules,
  resolve: {
    extensions: [".html", ".js", ".json", ".css"]
  },
  optimization: {
    runtimeChunk: "single"
  }
};

when I run npm run dev it run successfully

but opening localhost:3000 gives error with can not get / message

what could be the issue.

you can see complete code here in my repo : https://github.com/xkeshav/canvas

Thanks in Advance.

[xkeshav]

does any one see this?

[mixserrm999]

me but ido t knew i want to leading webpack and nodejs express html css tailwind

[xkeshav]

no one damn care. this is how webpack works ? if it works then good and if you face any kind of issue; we will not provide any kind of support/help.

[alexander-akait]

@xkeshav Sorry for delay, still valid? If yes - please create reproducibe test repo, thank you

[xkeshav]

2 weeks passed. anyone here to help?

[xkeshav]

any update? what a supportive community webpack have

[alexander-akait]

This is a bug tracker, not personal support. Quite a lot of questions come from all sides, I try to answer everything, but I would also like time for work, family and just free time. Instead of waiting and blaming the community for poor supporting, you could do some minor debugging and come up with a specific question or problem, but you expect someone else to do it for you. This doesn't seem very respectful.

What command should I use to reproduce the problem? Where I can see the problem? What kind of a problem?

When I run npm run dev, I just to see webpack in the watch mode

How to ask questions effectively?

• Short description about the problem
• How to reproduce - github repo and another sources + instruction how to run/reproduce
• Actual behaviour/expected behaiour

Why you have publicPath: "",? Are you sure you need empty public path?
You have target: "node",, but ./src/index.js is for browsers

[xkeshav]

Hi, Thanks for the response. I admire your support for the open source community .

but the issue here is, I have already described my issue and also reply with what you have said, issue here is consistency. 2 months back you said same thing and I have replied within a day that missing public path is typo

And for the minimum reproduction issue, I have given the complete repo code and also told how to reproduce and if you are still having issues then let me know.

And yes, community support is really poor here for webpack, its not the first issue but many times I face the same.

Thanks.

[alexander-akait]

@xkeshav Sometimes I can ask to repeat some steps, but because I don't respect you, just because I have a lot of issues and sometimes lose context. I asked some questions above and didn't see answers.

You have "dev": "webpack --config webpack.dev.config.js --mode development --watch", in dev, but do you want to run dev server? If yes please use webpack serve --config webpack.dev.config.js --mode development . I really can't undestand what you expected.

then it does not run ;

What is doesn't run? What you expected? Please describe your problem clarify.

And yes, community support is really poor here for webpack, its not the first issue but many times I face the same.

Because you need to be able to ask questions clearly and understandably, sorry, I’m not a magician and I can’t guess what you expect

[xkeshav]

I tried your suggestion and made below changes

1. change in dev command

"dev": "webpack serve --config webpack.dev.config.js --mode development",

2. added publicPath in devServer ; below is my webpack.dev.config

const path = require("path");
const nodeExternals = require("webpack-node-externals");

const plugins = require("./webpack.plugins.config");
const modules = require("./webpack.modules.config");

const BUILD_DIR = path.join(__dirname, "build");
const DIST_DIR = path.join(__dirname, "dist");

const pages = ["draw", "varnmala", "canvas", "about", "math"];

const entryObject = pages.reduce((p, n) => Object.assign(p, { [n]: [`./src/scripts/${n}.js`, `./src/styles/${n}.css`] }), {});

module.exports = {
  entry: {
    index: ["./src/index.js"],
    server: ["./src/server/index.js"],
    ...entryObject
  },

  devServer: {
    static: DIST_DIR,
    compress: true,
    port: 3000,
    historyApiFallback: true,
    open: true,
    hot: true
  },

  output: {
    path: BUILD_DIR,
    publicPath: "/",
    filename: "scripts/[name].js",
    chunkFilename: "scripts/[name].js",
    assetModuleFilename: "assets/[hash][ext][query]",
    clean: true
  },
  mode: "development",
  target: "node",
  node: {
    __dirname: false,
    __filename: false
  },
  externals: [nodeExternals()],
  devtool: "eval-source-map",
  plugins,
  module: modules,
  resolve: {
    extensions: [".html", ".js", ".json", ".css"]
  },
  optimization: {
    runtimeChunk: "single"
  }
};

it opens localhost:3000 but it gives Cannot Get / page

[xkeshav]

I tried after remove target: "node" and also try with target:'web' also but same issue

[alexander-akait]

Firstly remove publicPath, don't touch this if you don't undestand why you need this.

Secondly - because you don't have index.html in the static: DIST_DIR directory and you have HTML files in the html directory, so you need rewrite request to such files

I used:

const path = require("path");
const nodeExternals = require("webpack-node-externals");

const plugins = require("./webpack.plugins.config");
const modules = require("./webpack.modules.config");

const BUILD_DIR = path.join(__dirname, "build");
const DIST_DIR = path.join(__dirname, "dist");

const pages = ["draw", "varnmala", "canvas", "about", "math"];

const entryObject = pages.reduce((p, n) => Object.assign(p, { [n]: [`./src/scripts/${n}.js`, `./src/styles/${n}.css`] }), {});

module.exports = {
  entry: {
    index: ["./src/index.js"],
    server: ["./src/server/index.js"],
    ...entryObject
  },

  devServer: {
    setupMiddlewares(middlewares) {
      middlewares.unshift({
        name: 'rewrite-url',
        middleware: (req, res, next) => {
          console.log(req.url)
          if (req.url === '/') {
            req.url = '/html/index.html';
          } else if (pages.includes(req.url.slice(1))) {
            req.url = `/html${req.url}.html`;
          }

          next();
        },
      });

      return middlewares;
    },
    static: DIST_DIR,
    compress: true,
    port: 3000,
    historyApiFallback: true,
    open: true,
    hot: true
  },

  output: {
    path: BUILD_DIR,
    filename: "scripts/[name].js",
    chunkFilename: "scripts/[name].js",
    assetModuleFilename: "assets/[hash][ext][query]",
    clean: true
  },
  mode: "development",
  target: "web",
  node: {
    __dirname: false,
    __filename: false
  },
  devtool: "eval-source-map",
  plugins,
  module: modules,
  resolve: {
    extensions: [".html", ".js", ".json", ".css"]
  },
};

Anyway you still have a lot of problems, you can't use Node.js modules in the browsers, you can't set target: "node" and await that it will work in the browser. You can't mix Node.js entrypoints with web entrypoints, of course this is technically possible, but it will create more difficulties and problems in catching errors.

Use multi compiler mode and move Node.js configuration and the server entry to the own configuration (with the target: node) and code for browser to own too (with the target: "web").

Your build process is simply not configured right. There are a lot of articles/stackoverflow answers/examples and etc. I cannot give correct advice which setting is better, because this is your application and its structure is known only to you

[xkeshav]

Thanks for help; I make changes as per your suggestions and page comes up but no javascript file being loaded also it gives error in console

runtime.js:39 Uncaught ReferenceError: require is not defined
    at webpack/hot/log.js (index.js:332:1)
    at __webpack_require__ (runtime.js:36:33)
    at fn (runtime.js:277:21)
    at eval (index.js?protocol=ws%3A&hostname=0.0.0.0&port=3000&pathname=%2Fws&logging=info&overlay=true&reconnect=10&hot=true&live-reload=true:3:76)
    at ./node_modules/webpack-dev-server/client/index.js?protocol=ws%3A&hostname=0.0.0.0&port=3000&pathname=%2Fws&logging=info&overlay=true&reconnect=10&hot=true&live-reload=true (index.js:84:1)
    at __webpack_require__ (runtime.js:36:33)
    at __webpack_exec__ (index.js:338:48)
    at index.js:339:37
    at webpackJsonpCallback (runtime.js:1247:39)
    at index.js:9:65

which cause issue in production build also ( face similar issue previously)

[xkeshav]

Hi @alexander-akait I know I have some configuration issues, that is the reason seeking for help. I have started the project keeping local only in mind and when it grows the webpack coems as rescuse but now stuck in such a way that now I cant make any changes and update the project ( even on style) as I have only build script and whenever make any changes which reflectes after build so here is the minimal setup of code . kindly help me to set up development hot reload webpack.

I have tried various stack overflow/forum and even chat GPty but nonw of them seems working. this is the branch minimal ; will you please do some help.

https://github.com/xkeshav/canvas/tree/minimal

[xkeshav]

I have started again with new folder structure and here is the issue mentioned-- > #18153