Menu
When deploying, heroku tells me that my build succeeds but I get Failed to load resource: the server responded with a status of 400 (Bad Request) for the favicon and the manifest as well as Manifest: Line: 1, column: 1, Unexpected token. Lighthouse tells me that it doesn't link to my manifest.json at all. I'm not sure if these are even related and if that's the case I will make a new question. I am using Reactjs with a node server.
Here is my server.js
const express = require("express");
const bodyParser = require("body-parser");
const path = require("path");
const app = express();
const PORT = process.env.PORT || 3001;
app.use(bodyParser.urlencoded({ extended: true }));
app.use(bodyParser.json());
if (process.env.NODE_ENV === "production") {
app.use(express.static("client/build"));
}
app.get("*", (req, res) => {
res.sendFile(path.join(__dirname, "./client/public/index.html"));
});
app.listen(PORT, function() {
console.log(`🌎 ==> API Server now listening on PORT ${PORT}!`);
});
Here is the head of my index.html
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1,
shrink-to-fit=no">
<meta name="theme-color" content="#000000">
<link rel="manifest" href="%PUBLIC_URL%/manifest.json">
<link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
<title>React App</title>
</head>
This is my file structure
This is my github repo
Let me know if you need more info, if this is a repeat question, or if these problems are unrelated so I can act accordingly.
964
json file is the only file that every extension using WebExtension APIs must contain. Using manifest. json , you specify basic metadata about your extension such as the name and version, and can also specify aspects of your extension's functionality (such as background scripts, content scripts, and browser actions).
Yes, you should be completely fine deleting the manifest.
I had the same problem after deploying my react-app on firebase-hosting
manifest.json and favicon.ico gave 400 Bad Request in network tab on google-chrome DevTools
After running firebase init,
In case you did not type build when firebase was asking What do you want to use as your public directory? (public)
then you will have to go to firebase.json file in your root project folder and manually change hosting -> "public": "build"
It will be some thing like this
{
"hosting": {
"public": "build",
"ignore": [
"firebase.json",
"**/.*",
"**/node_modules/**"
],
"rewrites": [
{
"source": "**",
"destination": "/index.html"
}
]
}
}
If you are deploying react app on firebase check this and this's useful also.
125
In my case go to file public/index.html
Change
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
<link rel="shortcut icon" href="%PUBLIC_URL%/favicon.png" />
To
<link rel="manifest" href="manifest.json" />
<link rel="shortcut icon" href="favicon.ico" />
I hope is help.
1
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
