I am having trouble configuring my Express server to serve files from the public folder. Despite trying various file path combinations, Pug does not seem to cooperate with Node.js. While I can view the HTML content of the index, the CSS and music files fail to load. I have read multiple similar questions, but still cannot figure out why it's not working. Any assistance would be greatly appreciated.
These are the errors I receive in the developer 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)
This is how my file structure looks:
js
-server.js
public
-Music
--artist
---album
----musicfiles.mp3
-music.css
views
-index.pug
Here is 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);
}
});
This is 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")