Using express to serve public static files - css

Question

I'm trying to get my express to serve files from my public folder but I can't seem to get anything to work here. I have tried so many variations in my file paths yet I can't seem to get pug to cooperate with node. I can see the html at the very least from index but neither the css nor the music files want to load. And yes I have looked at many questions similar to mine. I still can't determine why it's not working. please help.
I get these errors in dev tools
Refused to apply style from 'http://localhost:3000/public/music.css' because its MIME type ('text/html') is not a supported stylesheet MIME type, and strict MIME checking is enabled.
GET http://localhost:3000/public/Music/Pink_Floyd/WishYouWereHere/ShineOnYouCrazyDiamond(PartsI-V).mp3 404 (Not Found)
my file structure is like this:
js
-server.js
public
-Music
--artist
---album
----musicfiles.mp3
-music.css
views
-index.pug
My node.js code:
var jsmediatags = require('jsmediatags');
var express= require('express');
var app=express();
var pug=require('pug');
const path=require('path')
const fs=require('fs');
const { error } = require('console');
var tagsArray=Array();
const port=3000;
const host='localhost';
app.use('/public', express.static(path.join(__dirname, 'public')))
app.set('views','./views');
app.set('view engine', 'pug');
const server =app.listen(port, host, ()=>{
console.log("server started at "+host+" port:"+port);
});
process.on('SIGTERM', () => {
server.close(() => {
console.log('Process terminated')
})
})
jsmediatags.read("./public/Music/Pink_Floyd/WishYouWereHere/ShineOnYouCrazyDiamond(PartsI-V).mp3", {
onSuccess: function(tag) {
var tags=tag.tags;
tagsArray=[tags.artist,tags.track,tags.album,tags.title,tags.picture];
var artist=tags.artist;
var album=tags.album;
var title=tags.title;
var track=tags.track;
var base64Url=Buffer.from(tags.picture.data).toString("base64");
// var base64Url=Buffer.from(base64String).toString("base64");
var artInfo="data:"+tags.picture.format+";base64,"+base64Url;
console.log(`data:${tags.picture.format};base64,`);
app.get('/', (req, res)=>{
res.render("index", {
artist:tags.artist,
album: tags.album,
title: tags.title,
track: tags.track,
art: artInfo
});
console.log('done');
});
},
onError: function(error) {
console.log(':(', error.type, error.info);
}
});
My pug code:
html(lang="en")
head
meta(charset='UTF-8')
meta(http-equiv='X-UA-Compatible' content='IE=edge')
meta(name='viewport' content='width=device-width, initial-scale=1.0')
title Music App
link(rel='stylesheet' type='text/css' href='/public/music.css')
body
img#albumC(src=art alt='album art')
.playbox
.play
.reflect
.playRef
.pausebox
.pause
.PA.center
.PB.center
.reflect
.pause
.PAref.center
.PBref.center
.stopbox
.stop
.reflect
.stopRef
h2 Artist: #{artist}
h2 Album: #{album}
h2 Song: #{title}
h2 Track: #{track}
audio(controls src="/public/Music/Pink_Floyd/WishYouWereHere/ShineOnYouCrazyDiamond(PartsI-V).mp3")

Answer 1

From your directory sketch, it looks to me like your public directory is a sibling (not a sub-directory) to the js directory where server.js is. So, instead of this:
app.use('/public', express.static(path.join(__dirname, 'public')))
you would to go up a level first like this:
app.use('/public', express.static(path.join(__dirname, '../public')))
To go up a directory and then down to the public directory.
That would then match up with this tag you have:
link(rel='stylesheet' type='text/css' href='/public/music.css')