CODEWITHSUNDEEP
javascripthtmlreactjswebpack
mevrick
mevrick

Reputation: 1045

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?

Upvotes: 3

Views: 10630

Answers (3)

Shalu
Shalu

Reputation: 1

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.

Upvotes: 0

RyanK
RyanK

Reputation: 21

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.

Upvotes: 1

0xGorri
0xGorri

Reputation: 101

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

Upvotes: 4

Related Questions