My React Router is functioning properly in the development environment. Here's what I implemented in Webpack Dev Server:
historyApiFallback: {
index: 'index.html',
}
Now, when transitioning to production mode, I wanted to replicate the same behavior using Express. This is how I set it up:
const indexPath = path.join(__dirname, '../public/index.html')
const publicPath = express.static(path.join(__dirname, '../public'))
app.use('/public', publicPath)
app.use('/graphql', graphQLHTTP(async (req) => {
let { user } = await getUser(req.headers.authorization);
if(!user) {
user = 'guest'
}
return {
schema,
pretty: true,
graphiql: true,
context: {
user,
}
}
});
app.get('/', function (_, res) { res.sendFile(indexPath) });
I haven't made any changes to react-router-dom, so I suspect the issue lies within my Express configuration. What would be the equivalent of historyApiFallback in production mode? Below is a snippet from my webpack bundle configuration:
output: {
path: path.join(__dirname, 'public'),
filename: 'bundle.js',
publicPath: '/public/'
},
In my HTML file, I reference the bundle like this:
<script type="text/javascript" src="/public/bundle.js"></script>
Despite having what seems to be the correct configuration, I encounter a "cannot GET Error 404" upon reloading. Any insights on this issue?