title: Express API Trying To Serve Public Files Gives 404
body: <p>I currently have an API setup like so...</p>
  
  <p><strong>index.js</strong></p>
  
  <pre><code>require('dotenv').config();
  
  const index = require('./server');
  
  const port = process.env.PORT || 5000;
  
  index.listen(port, () =&gt; console.log(`Server is live at localhost:${port}`));
  
  module.exports = index;
  </code></pre>
  
  <p><strong>server/index.js</strong></p>
  
  <pre><code>const express = require('express');
  const routes = require('../routes');
  const bodyParser = require('body-parser');
  const helmet = require('helmet');
  const morgan = require('morgan');
  const path = require('path');
  
  const server = express();
  
  server.use(express.json());
  
  // enhance your server security with Helmet
  server.use(helmet());
  
  // use bodyParser to parse server application/json content-type
  server.use(bodyParser.json());
  server.use(bodyParser.urlencoded({ extended: true }));
  
  // log HTTP requests
  server.use(morgan('combined'));
  
  server.use(express.static(path.normalize(__dirname+'/public')));
  server.use('/api', routes);
  
  // Handle 404
  server.use(function(req, res) {
    res.send('404: Page not Found', 404);
  });
  
  // Handle 500
  server.use(function(error, req, res, next) {
    res.send('500: Internal Server Error', 500);
  });
  
  module.exports = server;
  </code></pre>
  
  <p><strong>routes/index.js</strong></p>
  
  <pre><code>const router = Router();
  
  // enable all CORS requests
  router.use(cors());
  router.use(function (req, res, next) {
    res.header("Access-Control-Allow-Origin", "*"); // update to match the domain you will make the request from
    res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");
    next();
  });
  
  router.get('/', (req, res) =&gt; res.send('Welcome to Timelapse Videos API'));
  
  ....
  </code></pre>
  
  <p>For some reason my public directory always returns 404 and i don't know why. <br>If i add this to the <strong>routes/index.js</strong> :</p>
  
  <pre><code>router.get('/public', function(req, res) {
    res.sendFile(path.join(path.normalize(__dirname+'/../public'), 'index.html'));
  });
  </code></pre>
  
  <p>It will return the static file but the issue is, there could be number of customer directories that have multiple images i want to return.</p>
  
  <p>There is clearly an issue with my setup but i can for the life of me see whats going on. If i have an API all in an <strong>index.js</strong> and not split the router it seems to work.</p>
  
  <p>Any help would fantastic and if you need more information please ask.</p>