How to configure webpack to deploy react application on heroku? - node.js

Question

I have created a react application from scratch and I'm trying to deploy it on heroku but unfortunately I faced a lot of errors, however I came to the point where I need to add a start script to my package.json file according to the logs of heroku :
npm ERR! Missing script: "start"
I don't know what content to add to my start script command in the package.json because I don't know if it takes additional webpack configuration or not, here is the file :
{
"name": "APPNAME",
"version": "1.0.0",
"description": " web application, etc..",
"main": "index.js",
"scripts": {
"dev": "webpack-dev-server --mode development",
"build" : "webpack --mode production"
},
"repository": {
"type": "git",
"url": "gitrepo"
},
"author": "LOUKACH EL-Mehdi",
"license": "ISC",
"bugs": {
"url": "ISSUES"
},
"homepage": "readme",
"devDependencies": {
"#babel/cli": "^7.1.0",
"#babel/core": "^7.1.0",
"#babel/preset-env": "^7.1.0",
"#babel/preset-react": "^7.0.0",
"babel-loader": "^8.0.2",
"css-loader": "^5.2.7",
"style-loader": "^2.0.0",
"webpack": "^4.46.0",
"webpack-cli": "^4.10.0",
"webpack-dev-server": "^4.9.3"
},
"dependencies": {
"aos": "^2.3.4",
"bootstrap": "^5.1.3",
"express": "^4.18.1",
"react": "^18.2.0",
"react-bootstrap": "^2.4.0",
"react-dom": "^18.2.0",
"react-flow-renderer": "^10.3.11"
}
}
I have a webpack.config.js file that allows me to parse the bundle.js file :
const path = require("path");
const webpack = require("webpack");
module.exports = {
entry: "./src/index.js",
mode: "development",
module: {
rules: [
{
test: /\.(js|jsx)$/,
exclude: /(node_modules|bower_components)/,
loader: "babel-loader",
options: { presets: ["#babel/env"] }
},
{
test: /\.css$/,
use: ["style-loader", "css-loader"]
}
]
},
resolve: { extensions: ["*", ".js", ".jsx"] },
output: {
path: path.resolve(__dirname, "dist/"),
publicPath: "/dist/",
filename: "bundle.js"
},
devServer: {
static : {
directory : path.join(__dirname, "public/")
},
port: 3000,
devMiddleware:{
publicPath: "https://localhost:3000/dist/",
},
hot: "only",
},
plugins: [new webpack.HotModuleReplacementPlugin()]
};
P.S : after browsing the internet, I found out about an express file can be added to the root directory of the project, please let me know if this is the way to go to deploy the application on heroku, thank you !