jsreact - GET http://localhost:8080/manifest.json 404 (Not Found)
I'm trying to make my existing react application progressive by adding among other things a manifest.json.
However it seems that my application is unable to find my manifest.json file as I get the above error message and Cannot GET /manifest.json when I take a look at the developer tool's network tab . This is strange since my manifest.json is located at the root of my application, exactly where the error says it cannot find the file.
I tried several things like placing a manifest.json file in every directory or introducing a json-loader in my webpack configuration but nothing worked.
Where I reference the manifest
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="utf-8" name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="manifest" href="/manifest.json" >
</head>
<body>
<div id="root" class="body"></div>
</body>
</html>
In addition I'm using webpack-manifest-plugin which creates an asset-manifest.json file in my build directory that maps my index files.
webpack.config
//...
const ManifestPlugin = require("webpack-manifest-plugin")
module.exports = {
plugins: [
new ManifestPlugin({
fileName: "asset-manifest.json"
})
//...
created asset-manifest.json
{
"index.js": "index.bundle.js",
"index.html": "index.html"
}
I hope you can help me
Answer
The problem is not only with manifest.json but with all json files. As it says here: https://stackoverflow.com/a/29633038/3231884 , you need to setup the web.config according to the following example:
<?xml version="1.0"?>
<configuration>
<system.webServer>
<staticContent>
<remove fileExtension=".json" />
<mimeMap fileExtension=".json" mimeType="application/json" />
</staticContent>
</system.webServer>
</configuration>
Afterwards, you should make 'npm run build' copy it to the build folder by following these steps (credits to Liviu Costea): https://medium.com/hackernoon/adding-web-config-to-react-projects-3eb762dbe01f