So the thing is that everything works as expected with webpack-dev-server.
But when I manually open index.html after npm run build
, I see only the header component being rendered and the rest, which is to be rendered after fetching data, is blank. There's no error in the console.
The un-rendered components are the Route
s. Well I'm using Route
s for the first time, and after searching a lot all I've come to understand is that I should use historyApiFallback
and publicPath
in webpack.config.js.
output: {
path: path.join(__dirname, '/build'),
filename: '[name].bundle.js',
publicPath: '/'
},
devServer: {
historyApiFallback: true
},
But the result is the same. I have no idea how it works different for development and production. I also want a little bit explanation of the fix that you may provide!
Please let me know the cause and the fix as well!
Link to project- https://codesandbox.io/s/fetch-countries-api-1ibwp?file=/src/index.js:138-154
Try serving your build folder with a package like serve
https://www.npmjs.com/package/serve
Create a serve.json with the similar following contents for accessing sub-routes directly.
{
"public": "build",
"rewrites": [
{
"source": "/*",
"destination": "/index.html"
}
]
}