I have a React app setup with Webpack(and not CRA). I am trying to make it progressive by adding a manifest.json file parallel to index.html. While running the app I am getting below error.
GET http://localhost:8090/manifest.json 404 (Not Found)
Also, if I look at the dist folder after running the build command, there is no manifest.json file copied to dist. I have tried using the webpack's file-loader plugin, but it also doesn't work. Below is the webpack.config.js snippet:
module: {
rules: [
{ test: /\.(js)$/, exclude: /node_modules/, use: 'babel-loader' },
{ test: /\.css$/, use: ['style-loader', 'css-loader'] },
//{ test: /\.html$/, use: ['html-loader'] },
{ test: /\.(svg|png|jpg|jpeg|gif)$/, use: { loader: 'file-loader', options: { name: '[name].[ext]', outputPath: 'assets/img' } } },
{ test: /\.(json)$/, use: { loader: 'file-loader', options: { name: '[name].[ext]', outputPath: './' } } }
]
},
Below is index.html snippet:
<head>
<link rel="manifest" href="./manifest.json" />
</head>
What am I doing wrong?
What you can do to load manifest.json are following steps:
manifest.json in the static folder at the root of your project.index.html : <link rel="manifest" href="/manifest.json">To know if your file was load, check in Chrome DevTools, inside Application => Manifest
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With