Using express to serve public static files-CodePudding

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:

-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');
    });


  },
  one rror: 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")

CodePudding user response：

From your directory sketch, it looks to me like your public directory is a sibling (not a sub-directory) to the js directory where you 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')