Webpack devServer set up on localhost opening the wrong local URL - wordpress

Question

I'm working on a WordPress plugin that will use a React App. I'm trying to get devServer to work with live reload. I need it to open http://localhost/shuffledink/builder in the browser. My current setup keeps opening http://localhost:8085 and shows all the files in assets/js when I run npm start. I commented out the port in my webpack config because I kept getting error:
code: 'EADDRINUSE',
errno: -4091,
syscall: 'listen',
address: '127.0.0.1',
port: 80
I'm using XAMPP apache local server on port 80.
I also get this message in terminal:
[webpack-dev-server] Content not from webpack is served from 'C:\xampp\htdocs\shuffledink\wp-content\plugins\shuffled-ink-builder\assets\js' directory
Which is the correct path to my bundle files so I think that part is okay?
Here is my current config:
const path = require("path");
const webpack = require("webpack");
module.exports = {
mode: "development",
entry: {
main: "./src/index.js",
},
output: {
path: path.resolve(__dirname, "/assets/js"),
filename: "[name].bundle.js",
publicPath: "/assets/js/",
},
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
use: [
{
loader: "babel-loader",
options: {
presets: ["#babel/preset-env"],
},
},
],
},
{
test: /\.s?css$/,
use: ["style-loader", "css-loader", "sass-loader"],
},
],
},
devServer: {
host: "localhost",
//port: 80,
static: path.join(__dirname, "/assets/js"),
liveReload: true,
open: true,
proxy: {
"/shuffledink/builder/": {
target: "http://localhost",
secure: false,
},
},
},
};
Here is my package.json:
{
"name": "Shuffled Ink",
"version": "1.0",
"private": true,
"description": "Shuffled Ink Card Bulder",
"scripts": {
"start": "webpack-dev-server --mode development",
"build": "webpack --mode production"
},
"devDependencies": {
"#babel/core": "^7.19.6",
"#babel/preset-env": "^7.19.4",
"#babel/preset-react": "^7.18.6",
"babel-loader": "^8.2.5",
"clean-webpack-plugin": "^4.0.0",
"css-loader": "^6.7.1",
"mini-css-extract-plugin": "^2.6.1",
"style-loader": "^3.3.1",
"webpack": "^5.74.0",
"webpack-cli": "^4.10.0",
"webpack-dev-server": "^4.11.1"
},
"dependencies": {
"#eastdesire/jscolor": "^2.5.1",
"#emotion/react": "^11.10.5",
"#emotion/styled": "^11.10.5",
"#mui/icons-material": "^5.11.0",
"#mui/material": "^5.11.1",
"#types/jest": "^29.2.4",
"#types/node": "^18.11.17",
"#types/react": "^18.0.26",
"#types/react-dom": "^18.0.9",
"fabric": "^5.2.4",
"fabric-history": "^1.7.0",
"node-sass": "^7.0.3",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"sass": "^1.55.0",
"sass-loader": "^13.1.0",
"selectable.js": "^0.18.0",
"sortablejs": "^1.15.0",
"typescript": "^4.9.4"
}
}
I'm including my bundled JS file in my WordPress plugin like so:
function builder_scripts() {
if(get_query_var('custom_page')) {
wp_register_script('shuffled_ink_builder_scripts', plugins_url('assets/js/main.bundle.js', __FILE__), array(),null, true);
wp_enqueue_script('shuffled_ink_builder_scripts');
}
}

Answer 1

If the webpack-dev-server is opening the wrong URL, you can specify the correct URL by setting the public option in your webpack.config.js file:
module.exports = {
// ...
devServer: {
public: 'http://localhost:3000', // Specify the correct URL
// ...
}
};
Alternatively, you can start the webpack-dev-server with the --host option to specify the hostname to bind to:
webpack-dev-server --host 0.0.0.0
This should resolve the issue of the webpack-dev-server opening the wrong URL.