title: Express app not serving static files on production server
body: <p>I'm building a simple (at least from a backend perspective) single page app using Express. This app is working perfectly well locally but after deploying it, my static files aren't working. I've looked around and I believe I am using express.static() correctly. The other thing to note, I've deployed it on GoDaddy. Not sure if this is causing any issue but perhaps relevant information.</p>
  
  <p>Here's a link to my hosted site, feel free to inspect yourself: <a href="http://senseless.world/" rel="nofollow noreferrer">http://senseless.world/</a></p>
  
  <p>My relevant code in my app.js file is the following (I've excluded a few unrelated bits):</p>
  
  <pre><code>const express = require('express');
  const app = express();
  const path = require('path');
  const router = express.Router();
  
  app.use('/static', express.static(__dirname+'/static'));
  router.get('/',function(req,res){
    res.render(path.join(__dirname+'/static/index.ejs'), {routeStr: ''});
  });
  app.use('/', router);
  app.listen(process.env.port || 3000);
  </code></pre>
  
  <p>Here's how I'm loading static files in my index.ejs file:</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
    &lt;head&gt;
      &lt;meta charset="UTF-8"&gt;
      &lt;meta name="viewport" content="width=device-width,initial-scale=1"&gt;
      &lt;title&gt;Senseless World&lt;/title&gt;
      &lt;link rel="stylesheet" href="static/styles/main.css?version=8" type="text/css"&gt;
      &lt;link rel="stylesheet" href="/static/styles/mobile-styles.css?version=3" type="text/css"&gt;
      &lt;script src="/static/scripts/vendors/jquery-3.5.0.min.js"&gt;&lt;/script&gt;
      &lt;script src="/static/scripts/vendors/p5.min.js"&gt;&lt;/script&gt;
      &lt;script src="/static/scripts/vendors/p5.sound.js"&gt;&lt;/script&gt;
      &lt;script src="/static/scripts/bundle.js" type="module"&gt;&lt;/script&gt;
      &lt;script src="/static/scripts/modal-page-open.js?version=5"&gt;&lt;/script&gt;
      &lt;script src="/static/scripts/flashlight.js?version=3"&gt;&lt;/script&gt;
      &lt;link rel="icon" href="/static/senseless-favicon-16.png" type="image/png" sizes="16x16"&gt;
      &lt;link rel="icon" href="/static/senseless-favicon-32.png" type="image/png" sizes="32x32"&gt;
    &lt;/head&gt;
  ...
  </code></pre>
  
  <p>The error I'm seeing in the console is the following:</p>
  
  <p><a href="https://i.stack.imgur.com/Ud0g0.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Ud0g0.png" alt="enter image description here"></a></p>
  
  <p>And here is what I'm seeing from the network console:
  <a href="https://i.stack.imgur.com/Qqlrp.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Qqlrp.png" alt="enter image description here"></a></p>
  
  <hr>
  
  <p>Solved it:</p>
  
  <p>Needed this in my .htaccess</p>
  
  <pre><code>RewriteEngine On
  DirectoryIndex disabled
  RewriteRule ^$ http://127.0.0.1:3000/ [P,L]
  RewriteCond %{REQUEST_FILENAME} !-f
  RewriteCond %{REQUEST_FILENAME} !-d
  RewriteRule ^(.*)$ http://127.0.0.1:3000/$1 [P,L]
  </code></pre>