i have created a react app using node backend. everything works fine, except when any page from the app is refreshed, and then it shows a ton of 404s. from reading around i have understood that historyApiFallback should solve this issue, but for whatever reason i can not get it to work. page refresh still results in 404s.
i’ve tried to configure the devserver in many many ways i;ve found in several of posts here, but no way works. i’ve tried to use historyApiFallback.rewrites, simply set it to true, used index : ‘/’
also added the publicPath:’/’ in the output, have also added the base tag in the index.html, but no good news.
any direction would be helpful right now..
webpack.config.js
const port = 3000;
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
entry: './src/index.js',
output:{
path: path.resolve(__dirname,'/dist'),
filename:'main.[fullhash].js',
publicPath: "/",
},
module:{
rules:[
{
test:/.(js|jsx)$/,
exclude: /node_modules/,
use:[
{loader:"babel-loader"},
],
},
{
test:/.css$/,
use:[
"style-loader",
"css-loader"
],
}
]
},
plugins:[
new HtmlWebpackPlugin({
template:'./public/index.html',
})
],
devServer:{
port: 3000,
historyApiFallback:{
rewrites: [
{ from: /./, to: './index.html' }
],
index: 'index.html',
},
//historyApiFallback:true,
open:true
}
}
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<base href="/"/>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#000000" />
<meta
name="description"
content="Web site created using create-react-app"
/>
<title>React App</title>
</head>
<body>
<noscript>You need to enable JS to run this app.</noscript>
<div id="root"></div>
<div id="portal"></div>
</body>
</html>