title: 400 (Bad Request) and cannot find manifest.json
body: <p>When deploying, heroku tells me that my build succeeds but I get <code>Failed to load resource: the server responded with a status of 400 (Bad Request)</code> for the favicon and the manifest as well as <code>Manifest: Line: 1, column: 1, Unexpected token.</code> 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.</p>
  
  <p>Here is my server.js</p>
  
  <pre><code>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) =&gt; {
    res.sendFile(path.join(__dirname, "./client/public/index.html"));
  });
  
  
  app.listen(PORT, function() {
    console.log(`  ==&gt; API Server now listening on PORT ${PORT}!`);
  });
  </code></pre>
  
  <p>Here is the head of my index.html</p>
  
  <pre><code>&lt;head&gt;
      &lt;meta charset="utf-8"&gt;
  
      &lt;meta name="viewport" content="width=device-width, initial-scale=1, 
      shrink-to-fit=no"&gt;
      &lt;meta name="theme-color" content="#000000"&gt;
      &lt;link rel="manifest" href="%PUBLIC_URL%/manifest.json"&gt;
      &lt;link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico"&gt;
      &lt;title&gt;React App&lt;/title&gt;
  &lt;/head&gt;
  </code></pre>
  
  <p><a href="https://i.stack.imgur.com/QtZlw.png" rel="noreferrer">This is my file structure</a></p>
  
  <p><a href="https://github.com/ajstack/ajstack.github.io" rel="noreferrer">This is my github repo</a></p>
  
  <p>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.</p>