Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to load manifest.json in React JS app

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?

like image 207
Gaurav Avatar asked Nov 25 '25 23:11

Gaurav


1 Answers

What you can do to load manifest.json are following steps:

  • put the manifest.json in the static folder 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

like image 118
Arnaud Avatar answered Nov 27 '25 15:11

Arnaud



Donate For Us

If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!