Some expressjs Static Files being served while others are not

Question

I have an odd situation what is particularly troublesome is that I have done this many times before it has to be something simple I am missing.

Please help I feel like I am loosing my mind...

Problem/Symptoms

1. I can load any js files from the lib folders
2. I can load any of the png files in the folder root/public/art under the web location //art/foo/bar.png
3. Can't load anything from the CSS nor js no mater what I do it all gives me 404 errors this is driving me totally crazy.
4. Same behavior with line 13 commented out
5. Same with various forms of lines 14-16
6. Same with and without using router

Folder Structure

• Root
  • server.ts
  • public
  • art
    • art in subfolders
  • css
    • canvas.css
  • js
    • js files in folders and not

Code

import * as express from "express";
import * as path from "path";
//const express = require("express")
//const path = require("path")

let app = express()
let port = 3000
let router = express.Router();

router.use('/lib/framework', express.static( path.join(__dirname, 'node_modules','framework')));
router.use('/lib/redactedLib2', express.static(path.join(__dirname, 'node_modules', 'redactedLib2')));
router.use('/lib/redactedLib3', express.static(path.join(__dirname, 'node_modules', 'redactedLib3')));
router.get('/', (req, res) => res.sendFile(path.join(__dirname, 'index.html')))
//app.use('/art/*', express.static(path.join(__dirname, 'public', 'art')));
//app.use('/css/*', express.static(path.join(__dirname, 'public', 'css')));
//app.use('/js/*', express.static(path.join(__dirname, 'public', 'js')));

router.use('/', express.static('public'))

app.use('/', router)

app.listen(port, () => console.log(`Go to http://localhost:${port} to view.`))

Solution (Edit)

Incase anyone finds this later I was fixing it the whole time I just needed to do an empty cache and reload... If you are in chrome open dev tools F12 then click and hold on refresh and select it.

Answer 1

I see two issues, based on what you're showing here. First is your directory structure. Is that accurate to what your structure actually is? Because in your application you're telling Node to translate /art/* to the /public/art/ directory, but that directory is actually at /art.

Second, it's the formatting of your virtual path prefix. Drop the /*; there's no need to declare a wildcard value. It'll just mess up the pathing. The trailing / is unnessary too, though it shouldn't cause a problem. Either way, restructuring your routes to:

router.use('/lib/framework', express.static( path.join(__dirname, 'node_modules','framework')));
router.use('/lib/redactedLib2', express.static(path.join(__dirname, 'node_modules', 'redactedLib2')));
router.use('/lib/redactedLib3', express.static(path.join(__dirname, 'node_modules', 'redactedLib3')));
app.use('/art', express.static(path.join(__dirname, 'public', 'art')));
app.use('/css', express.static(path.join(__dirname, 'public', 'css')));
app.use('/js', express.static(path.join(__dirname, 'public', 'js')));
router.get('/', (req, res) => res.sendFile(path.join(__dirname, 'index.html')));

And either fixing the path joins in the app, or fixing the physical file structure, will solve the issue of loading resources that don't actually exist.

Answer 2

I see two issues, based on what you're showing here. First is your directory structure. Is that accurate to what your structure actually is? Because in your application you're telling Node to translate /art/* to the /public/art/ directory, but that directory is actually at /art.

Second, it's the formatting of your virtual path prefix. Drop the /*; there's no need to declare a wildcard value. It'll just mess up the pathing. The trailing / is unnessary too, though it shouldn't cause a problem. Either way, restructuring your routes to:

router.use('/lib/framework', express.static( path.join(__dirname, 'node_modules','framework')));
router.use('/lib/redactedLib2', express.static(path.join(__dirname, 'node_modules', 'redactedLib2')));
router.use('/lib/redactedLib3', express.static(path.join(__dirname, 'node_modules', 'redactedLib3')));
app.use('/art', express.static(path.join(__dirname, 'public', 'art')));
app.use('/css', express.static(path.join(__dirname, 'public', 'css')));
app.use('/js', express.static(path.join(__dirname, 'public', 'js')));
router.get('/', (req, res) => res.sendFile(path.join(__dirname, 'index.html')));