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 mand, 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?
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 mand, 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?
Share Improve this question asked Dec 5, 2019 at 7:53 mevrickmevrick 1,0454 gold badges21 silver badges31 bronze badges3 Answers
Reset to default 4What you can do to load manifest.json are following steps:
- put the
manifest.jsonin thestaticfolder at the root of your project. - in your
index.html:<link rel="manifest" href="/manifest.json">
To know if your file was load, check in Chrome DevTools, inside Application => Manifest
If the answer above doesn't work for you (like in my case), try the app-manifest-webpack-plugin.
It builds out the manifest.json file for you when you run npm run build or yarn run build.
It also has numerous configurations, making it very flexible.
Try using this plugin to automatically generate manifest file.
Plugin: webpack-pwa-manifest
Sample code :
const WebpackPwaManifest = require('webpack-pwa-manifest');
new WebpackPwaManifest({
name: 'My App',
short_name: 'App',
description: 'My awesome app',
background_color: '#ffffff',
theme_color: '#000000',
publicPath: '/',
icons: [
{
src: path.resolve('web/public/logo192.png'),
sizes: [ 192],
},
],
}),
Note: publicPath: '/', is very important.This resolved my 404 issue.
Here this is demo manifest file that will be generated and stored in you destination folder where index.html is stored as per your webpack config file.
Remember using
new HtmlWebpackPlugin({
template: path.resolve(appDirectory, 'web/public/index.html'),
inject:true,
}),
This will directly load your manifest file in index.html file.