title: Production React App Failing With 429 Error
body: <p>I have built a react app webpage, i <strong>use node, express and react. I serve it within an ec2 ubuntu server with nginx</strong>, i also installed ssl and configured DNS but when I load the page, the first time it gives no problems, but when reloaded, i get this <a href="https://i.stack.imgur.com/r8Xi8.png" rel="nofollow noreferrer">Server responded with 429 status code</a></p>
  <p>The page is very simple itself, but stills failing and i can't solve the problem, i have read a lot of posts and blogs to fix it but none has worked (this only happens in production, in dev environment i get no error when running my node app).</p>
  <p>Some of those said that you had to lazy load images and i did it, i have also tried loading components in timeout so requests are made every 1.5 seconds...</p>
  <p>The main files that give me problems are the <strong>manifest.json</strong> and <strong>favicon.ico</strong>, they are accesible by url so i can't understand why (<a href="https://i.stack.imgur.com/gpo58.png" rel="nofollow noreferrer">another 429 example</a>).</p>
  <h2>Node server.js</h2>
  <blockquote>
  <p>Routes has nothing, just console logs</p>
  </blockquote>
  <pre><code>require('dotenv').config();
  const express = require(&quot;express&quot;);
  const app = express();
  const path = require(&quot;path&quot;);
  const cors = require(&quot;cors&quot;);
  
  const allowedOrigins = [`http://localhost:${process.env.PORT}`];
  
  var corsOptions = {
    origin: function (origin, callback) {
      if (allowedOrigins.indexOf(origin) !== -1 || !origin) {
        callback(null, true)
      } else {
        callback(new Error('Not allowed by CORS'))
      }
    }
  };
  
  app.use(cors(corsOptions));
  
  app.use(express.urlencoded({ extended: false }));
  app.use(express.json());
  
  app.use(express.static(path.join(__dirname, &quot;/public&quot;)));
  
  app.use(&quot;/&quot;, require(&quot;./routes/routes&quot;));
  app.get(&quot;*&quot;, (_, res) =&gt; res.redirect(&quot;/&quot;))
  
  app.listen(process.env.PORT, function () {
    console.log(`Listening on port ${process.env.PORT}`);
  });
  
  </code></pre>
  <h2>App directory structure</h2>
  <p><a href="https://i.stack.imgur.com/xKRLP.png" rel="nofollow noreferrer">This is my folders structure</a>, public folder is the build that react script <code>npm run build</code> returns.</p>
  <h2>React app directory structure</h2>
  <p><a href="https://i.stack.imgur.com/Yw3iN.png" rel="nofollow noreferrer">Here you can see the structure</a>, nothing special to what you get when run <code>npx create-react-app</code>. As you can see, there's a <code>favicon.ico</code> and <code>manifest.json</code>.</p>
  <h3>Manifest.json</h3>
  <pre><code>{
    &quot;short_name&quot;: &quot;Proximedica Bajío&quot;,
    &quot;name&quot;: &quot;Proximedica Bajío - Oxígeno Medicinal&quot;,
    &quot;icons&quot;: [
      {
        &quot;src&quot;: &quot;favicon.ico&quot;,
        &quot;sizes&quot;: &quot;64x64 32x32 24x24 16x16&quot;,
        &quot;type&quot;: &quot;image/x-icon&quot;
      },
      {
        &quot;src&quot;: &quot;logo192.png&quot;,
        &quot;type&quot;: &quot;image/png&quot;,
        &quot;sizes&quot;: &quot;192x192&quot;
      },
      {
        &quot;src&quot;: &quot;logo512.png&quot;,
        &quot;type&quot;: &quot;image/png&quot;,
        &quot;sizes&quot;: &quot;512x512&quot;
      }
    ],
    &quot;start_url&quot;: &quot;.&quot;,
    &quot;display&quot;: &quot;standalone&quot;,
    &quot;theme_color&quot;: &quot;#000000&quot;,
    &quot;background_color&quot;: &quot;#ffffff&quot;
  }
  </code></pre>
  <p>This is all, if you need me to provide some other file it would be a pleasure.
  Thanks!</p>