Two Webpack Configs (Client, Server) Express App not hosting HTML files - node.js

Question

I am building an Application that has a Node Backend that I am trying to bundle with Webpack.
At first I had one Webpack configuration that had target: node. I was unable to compile Websockets into the frontend bundle unless I changed it to target: web but that wasn't compiling my backend code changes. I would have to run tsc && webpack.
I am now to two configs to compile them separately. My current config is:
const path = require("path");
const CopyWebpackPlugin = require("copy-webpack-plugin");
const HtmlWebpackPlugin = require("html-webpack-plugin");
var fs = require("fs");
var nodeModules = {};
fs.readdirSync("node_modules")
.filter(function(x) {
return [".bin"].indexOf(x) === -1;
})
.forEach(function(mod) {
nodeModules[mod] = "commonjs " + mod;
});
const common = {
module: {
rules: [
{
test: /\.tsx?$/,
use: "ts-loader",
exclude: /node_modules/
},
{
test: /\.html$/,
use: [{ loader: "html-loader" }]
}
]
},
resolve: {
extensions: [".tsx", ".ts", ".js"]
}
};
const frontend = {
entry: "./src/index.ts",
output: {
filename: "bundle.js",
path: path.resolve(__dirname, "build"),
publicPath: "/"
},
target: "web",
plugins: [
new CopyWebpackPlugin([
{
from: path.resolve(
"node_modules/#webcomponents/webcomponentsjs/webcomponents-bundle.js"
),
to: path.resolve(__dirname, "build/vendor")
},
{
from: path.resolve(
"node_modules/#webcomponents/webcomponentsjs/custom-elements-es5-adapter.js"
),
to: path.resolve(__dirname, "build/vendor")
}
]),
new HtmlWebpackPlugin({
title: "Flop The World Poker",
template: "build/index.template.html"
})
]
};
const backend = {
entry: "./src/server.ts",
output: {
filename: "server.js",
path: path.resolve(__dirname, "build"),
publicPath: "/"
},
target: "node",
externals: nodeModules
};
module.exports = [
Object.assign({}, common, frontend),
Object.assign({}, common, backend)
];
Before I switch to two configs I was able to host my index.html that is in my output folder using:
import bodyParser from "body-parser";
import express from "express";
import { createServer } from "http";
import { listen } from "socket.io";
import { DeckController} from "./controllers";
const app: express.Application = express();
const port: number = ((process.env.PORT as any) as number) || 3000;
const server = createServer(app);
const io = listen(server);
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: false }));
app.use(express.static("static"));
app.use("/deck", DeckController);
app.use(express.static(__dirname, { extensions: ["html"] }));
server.listen(port, () => {
console.log(`Listening at http://localhost:${port}/`);
});
io.on("connection", socket => {
console.log("Client connected..");
socket.on("join", data => {
console.log(data);
});
});
I am now receiving cannot get /. I can set up a route like
router.get("/", (req: Request, res: Response) => {
res.send("Hello World");
});
and receive Hello World in the browser.
Can anyone help me to figure out what changed that now I cannot host my html file?

Answer 1

I fixed this with help from Robert in the comments. Here are my new files:
const path = require("path");
const CopyWebpackPlugin = require("copy-webpack-plugin");
const HtmlWebpackPlugin = require("html-webpack-plugin");
var fs = require("fs");
var nodeModules = {};
fs.readdirSync("node_modules")
.filter(function(x) {
return [".bin"].indexOf(x) === -1;
})
.forEach(function(mod) {
nodeModules[mod] = "commonjs " + mod;
});
const common = {
module: {
rules: [
{
test: /\.tsx?$/,
use: "ts-loader",
exclude: /node_modules/
}
]
},
resolve: {
extensions: [".tsx", ".ts", ".js"]
}
};
const frontend = {
entry: "./src/index.ts",
output: {
filename: "bundle.js",
path: path.resolve(__dirname, "build"),
publicPath: "/"
},
target: "web",
plugins: [
new CopyWebpackPlugin([
{
from: path.resolve(
"node_modules/#webcomponents/webcomponentsjs/webcomponents-bundle.js"
),
to: path.resolve(__dirname, "build/vendor")
},
{
from: path.resolve(
"node_modules/#webcomponents/webcomponentsjs/custom-elements-es5-adapter.js"
),
to: path.resolve(__dirname, "build/vendor")
}
]),
new HtmlWebpackPlugin({
title: "Flop The World Poker",
template: "build/index.template.html"
})
]
};
const backend = {
entry: "./src/server.ts",
output: {
filename: "server.js",
path: path.resolve(__dirname, "build"),
publicPath: "/"
},
target: "node",
externals: nodeModules
};
module.exports = [
Object.assign({}, common, frontend),
Object.assign({}, common, backend)
];
import bodyParser from "body-parser";
import express from "express";
import { createServer } from "http";
import { listen } from "socket.io";
import { DeckController } from "./controllers";
const app: express.Application = express();
const port: number = ((process.env.PORT as any) as number) || 3000;
const server = createServer(app);
const io = listen(server);
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: false }));
app.use(express.static("./build"));
app.use("/deck", DeckController);
app.use(express.static(__dirname, { extensions: ["html"] }));
server.listen(port, () => {
// tslint:disable-next-line:no-console
console.log(`Listening at http://localhost:${port}/`);
});
io.on("connection", socket => {
console.log("Client connected..");
socket.send("Testing Message");
socket.on("join", data => {
console.log(data);
});
});